* {box-sizing: border-box; }

body { background-color: #EAEAEA;
       
       color: #666666; 
       font-family: Arial, Helvetica, sans-serif; }
header { background-color: #002171;
         color: #FFFFFF;

         text-align: center; }
h1 { margin-bottom: 0;
     margin-top: 0;
     font-family: Georgia, "Times New Roman", serif; 
     letter-spacing: 0.25em;
     padding-top: 0.5em;
     padding-bottom: 0.5em; }
nav { 
      text-align: center; 
      font-weight: bold; 
      font-size: 120%; 
      padding: 0; }
nav a { text-decoration: none; 
         transition: color 3s ease-out; }

nav ul { text-decoration: none; 
         margin: 0;
         padding-left: 0;
         font-size: 1.2em;
}

nav li { border-bottom: 1px solid #0000CC; }

nav a:link {color:  #5C7FA3; }
nav a:visited {color: #344873; }
nav a:hover { color: #A52A2A; }

header a { text-decoration: none; }
header a:link { color: #FFFFFF; }
header a:visited { color: #FFFFFF; }
header a:hover { color: #90C7E3; }
main { padding-top: 1px;
       padding-right: 20px;
       padding-left: 30px;
       padding-bottom: 20px; 
       display: block;
       background-color: #FFFFFF;
       
       overflow: auto;
       
}

h2 { color: #1976D2;
     font-family: Georgia, "Times New Roman", serif; 
     text-shadow: 1px 1px 1px #CCCCCC; }
h3 { color:#000033;
     font-family: Georiga, "Times New Roman", serif; }
main ul { list-style-image: url(marker.gif); }
dt { color: #002171; }
footer { font-size: 75%; 
         font-style: italic;
         text-align: center; 
         font-family: Georgia, "Times New Roman", serif; 
         padding: 2em;
         
         background-color: #FFFFFF;
}


#contact { font-size: 90%; }
.resort { color: #1976D2; }
#wrapper { background-color: #90C7E3;
 	    
           background-image: linear-gradient(to bottom, #FFFFFF, #90C7E3);       
}
#homehero { height: 300px;
            
            background-image: url(coast2.jpg);
            background-size: 100% 100%;
            background-repeat: no-repeat; 
}
#yurthero { background-image: url(yurt.jpg);
            
            height: 300px;
            background-size: 100% 100%;
            background-repeat: no-repeat;
}
#trailhero { background-image: url(trail.jpg);
              
             height: 300px;
             background-size: 100% 100%;
             background-repeat: no-repeat;
}

table  { 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; }

form { display: flex; 
        flex-flow: column nowrap; }
input, textarea { margin-bottom: 0.5em; } 

@media (min-width: 600px) {
  
  nav ul { display: flex; flex-flow: row nowrap;
           justify-content: space-around; }
  nav ul 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; }
#special      {grid-row: auto; grid-column: 1/5; }
footer        {grid-row: auto; grid-column: 1/5; }

form { display: grid;
       grid-template-columns: 6em 1fr;
       grid-template-rows: auto auto auto auto auto auto auto auto; 
       width: 60%;
       grid-gap: 1em; }
input[type="submit"] {grid-column: 2/3;
                      width: 10em; }

}

video, embed { float: right; padding-left: 20px; }

@media (min-width: 1024px) {
  
  nav ul { display: flex;
           flex-direction: column; 
           flex-wrap: nowrap; }
  nav { text-align: left;
        padding-left: 1em; }
  #wrapper { width: 80%; 
             margin: auto;
             display: grid;
             grid-template-columns: 180px auto;
             grid-template-rows: auto auto auto 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: 2/3; }
  main   {grid-row: 3/4; grid-column: 2/3; }
  footer  {grid-row: 4/5; grid-column: 2/3; }
            

}