* {box-sizing: border-box;
}

body{
   background-color: #EAEAEA;
   color: #666666;
   font-family: Arial, Helvetica, sans-sarif;
}
 
#wrapper{
   background-image: linear-gradient(to bottom, #ffffff, #90c7e3);
   background-color: #90c7e3;
   background-repeat: no-repeat;
}

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

header a{
   text-decoration: none;
}

header a:link{
   color: white;
}

header a:visited{
   color: white;
}

header a:hover{
   color: #90c7e3;
}

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

nav li{
   border-bottom: 1px solid darkblue;
}

nav a{
   text-decoration: none;
   padding-left: .5em;
   padding-right: .5em;
}

nav ul{
   list-style-type: none;
   margin: 0;
   padding-left: 0;
   font-size: 1.2em;
}

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

nav a:visited{
   color: #344873;
}

nav a:hover{
   color: #A52A2a;
}


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

h1{
   margin-bottom: 0;
   margin-top: 0;
   font-family: Georgia, "Times New Roman", serif;
   letter-spacing: 0.25em;
   padding-top: .5em;
   padding-bottom: .5em;
}

h2{
   color: #1976d2;
   font-family: Georgia, "Times New Roman", serif;
   text-shadow: 1px 1px 1px  #CCCCCC;
}

h3{
   font-family: Georgia, "Times New Roman", serif;
   color: #000033;
}
form{
   display: flex;
   flex-flow:column nowrap;
}
input, textarea{
   margin-bottom: .5em;
}
input{
   padding: .5em;
}

main ul{
   list-style-image: url(marker.gif);
}

dt{
   color: #002171;
}  

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

#contact{
   font-size: 90%;
}

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

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

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

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

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

td{
   text-align: center;
}
.text{
   text-align: left;
}

tr:nth-of-type(odd) {
   background-color: #F5FAFC;
}
nav li{
      border-bottom: none;
   }

section{
       padding-left: 2em;
       padding-right: 2em;
   }

.content main{
      display: grid;
      grid-template-rows: auto;
      grid-template-columns: 1fr 1fr 1fr;
   }

h2{
      grid-row: 1 / 2;
      grid-column: 1 / 5;
   } 
   
section{
   grid-row: 2 / 3;
   grid-column: auto;
}

footer{
   padding: 2em;
   font-family: Georgia, "Times New Roman", serif;
   font-size: 75%;
   font-style: italic;
   text-align: center; 
   background-color: white;
}

@media(min-width: 600px){
   nav ul{
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-around;
   }

   nav li{
      border-bottom: none;
   }
   section{
      padding-left: 2em;
      padding-right: 2em;
   }
   #special{
      grid-row: auto;
      grid-column: 1 / 5;
   form{
      display: grid;
      grid-template-columns: 6em 1fr;
      grid-template-rows: auto;
      grid-gap: 1em;
   }
   #submit{
      grid-column: 2 / 3;
      width: 9em;
   }

   footer{
      grid-row: 4 / 5;
      grid-column: 2 / 3;
   }
}

@media(min-width: 1024px){
   nav ul{
      flex-flow: column;
      padding-top: 1em;
      text-align: left;
   }
   #wrapper{
      margin: auto;
      width: 80%;
      border: 1px solid darkblue;
      display: grid;
      grid-template-columns: 180px auto;
      grid-template-rows: auto;
   }

   header{
      grid-row: 1 / 2;
      grid-column: 1 / 3;
   }
   nav{
      grid-row: 2 / 5;
      grid-column: 1 / 2;
   }
   div{
      grid-row: 2 / 3;
      grid-column: auto;
   }
   main{
      grid-row: 3 / 4;
      grid-column: 2/3;
   }
   footer{
      grid-row: 4 / 5;
      grid-column: 2 / 3;
   }
}