* { box-sizing: border-box; }
body {
    background-color: #EAEAEA;
}

header {
    background-color: #002171;
    color: #FFFFFF;
    text-align: center;
}

header a {
    text-decoration: none;
}

header a:link, 
header a:visited {
    color: white;
}
  
header a:hover {
    color: light blue;
}

nav{
    font-size: 120%;
    text-align: center;
    font-weight: bold;
    padding: 0;
    
}

nav a {
    text-decoration: none;
}

nav a:link{
    color: #5C7FA3;
}

nav a:visited{
    color: #344873;
}

nav a:hover{
    color: #A52A2A;
}

nav ul{

    list-style: none;
    margin: 0;
    padding-left: 0;
    font-size: 1.2em;
}
nav li{
    border-bottom: solid;
    border-bottom-color: darkblue;
}

main {
    overflow: auto;
    padding: 1px 20px 20px 20px;
    padding-left: 30px;
    background-color: #FFFFFF;
}

/* section{
    width: 33%;
    padding-left: 2em;
    padding-right: 2em;
} */

main ul{
    list-style-image: url("../ch5pacific/images/marker.gif")
}



h1{
    font-family: sans-serif;
    letter-spacing: 0.25em;
    margin-bottom: 0;
    margin-top: 0;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

h2{
    font-family: sans-serif;
    color: #1976D2;
    text-shadow: 1px 1px #CCCCCC;
}

h3{
    font-family: sans-serif;
    color: #000033;
}

table{
    border: 2px solid #3399CC;
    border-collapse: collapse;
}

th, td{
    border: 2px solid #3399CC;
    padding: 0.5em;
}
td{
    text-align: center;
}

  
.text{
    text-align: left;
}

tr:nth-of-type(odd) {
    background-color: #F5FAFC;
}


footer{
    font-family: sans-serif;
    font-style: italic;
    background-color: white;
    font-size: 75%;
    text-align: center;
    padding: 2em;
}

#homehero {
    height: 300px;
    background-image: url("../ch7pacific/images/coast2.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

#yurthero {
    height: 300px;
    background-image: url("../ch7pacific/images/yurt.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

#trailhero {
    height: 300px;
    background-image: url("../ch7pacific/images/trail.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

#contact{
    font-size: large;
}

#wrapper {
  background: linear-gradient(to bottom, #FFFFFF, #90C7E3);
  background-color: #90C7E3;
}


  
.resort{
    font-weight: bold;
    color: #1976D2;
}

@media (min-width: 600px) {
    /* Styles for nav ul */
    nav ul {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-around;
      align-items: center;
      padding: 0;
    }
    
    /* Styles for nav li */
    nav li {
      border-bottom: none;
    }
    
    /* Styles for section */
    section {
      padding-left: 2em;
      padding-right: 2em;
    }
    
    /* Styles for main element within .content class */
    .content main {
      display: grid;
      grid-template-rows: auto;
      grid-template-columns: 1fr 1fr 1fr;
    }
    
    /* Styles for h2 */
    h2 {
      grid-row: 1 / 2;
      grid-column: 1 / 5;
    }
    
    /* Styles for section */
    section {
      grid-row: 2 / 3;
      grid-column: auto;
    }
    
    /* Styles for #special */
    #special {
      grid-row: auto;
      grid-column: 1 / 5;
    }
    
    /* Styles for footer */
    footer {
      grid-row: auto;
      grid-column: 1 / 5;
    }
  }

  @media screen and (min-width: 1024px) {
    nav ul {
      flex-direction: column;
      align-items:baseline;
      padding-top: 1em;
    }
    nav {
      padding: 1em;
    }
    #wrapper {
      margin: auto;
      width: 80%;
      border: 2px solid darkblue;
      box-shadow: 5px 5px 5px #888888;
      display: grid;
      grid-template-areas: 
        "header header header"
        "nav   div     div"
        "nav   main    main"
        "nav   footer  footer";


    }
    header {
        grid-area: header;
    }
    nav {

        grid-area: nav;
    }
    div {
      grid-area: div;
    }
    main {
        grid-area: main;

    }
    footer {
        grid-area: footer;

    }
  }