* {box-sizing: border-box; }
body { background-color: #90C7E3;
      color: #666666;
      font-family: Arial, Verdana, sans-serif; 
     margin: 0;}
header {background-color: #002171;
        color: #FFFFFF;
        font-family: Georgia, serif; 
       a:link { text-decoration: none; 
              color: #FFFFFF; }
       a:visited { text-decoration: none;
                 color: #FFFFFF; }
       a:hover { text-decoration: none; 
               color: #90C7E3;}
       }
h1 { 
     font-size: 1.5em;   
        text-align: center; }
nav { background-color: #FFFFFF;
     text-align: center;
    font-size: 1.2em;
      }
nav a:link {text-decoration: none; 
           color: 5C7FA3;}
nav a:visited {color: #344873; 
              text-decoration: none;}
nav a:hover { color: #A52A2A; 
            text-decoration: none;}
nav ul { list-style-type: none;
        display: flex;
       flex-direction: column;
       margin: 0;
       padding-left: 0;}

nav li {padding-top: .5em;
        padding-bottom: 1em;
        padding-left: 1em;
        padding-right: 1em;
        width: 100%;
        border-bottom: 1px solid #344873;
    }
h2 {color: #1976D2;
    font-family: Georgia, serif; }
h3 {font-family: Georgia, serif; }
main { padding-top: 0em;
      padding-bottom: 0em;
    padding-left: 1em; 
      padding-right: 1em; 
        display: block; }
dt { color: #002171;
    font-weight: bold; }
#wrapper {
          background-color: #FFFFFF;
           }
.resort { color: #1976D2;
         font-size: 1.2em; }
#homehero { background-image: url(coast.jpg);
           background-size: 200% 100%;
           background-repeat: no-repeat;
           height: 300px; 
           }
#yurthero { background-image: url(yurt.jpg);
           background-repeat: no-repeat;
           background-size: 200% 100%;
            height: 300px; 
           }
#trailhero { background-image: url(trail.jpg);
            background-size: 200% 100%; 
            background-repeat: no-repeat;
            height: 300px; 
            }
#mobile { display: inline; }

#desktop { display: none; }
footer { background-color: #FFFFFF; 
    font-size: .70em;
        font-style: italic;
        text-align: center; 
        padding: 1em; }
section { 
         padding-left: .5em; 
         padding-right: .5em; }
table { border: 1px solid #3399CC;
       border-collapse: collapse;
       width: 90%;
       margin: auto;
    }
td, th { padding: 5px; 
        border: 1px solid #3399CC;
    }
td { text-align: center;
    }
.text { text-align: left;
    }
tr:nth-of-type(even) {background-color: #DFEDF8; }
form { display: flex;
      flex-direction: column;
      padding-left: 1em;
      width: 80%;
}
input, textarea { margin-bottom: .5em; }
#reshero { height: 300px;
          background-image: url(ocean.jpg);
          background-size: 200% 100%;
          background-repeat: no-repeat;
@media (min-width: 600px){
    h1 { font-size: 2em;
        letter-spacing: .25em; }
    nav ul { display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-around;
            padding-right: 2em; }
    nav li { width: 12em;
            border-bottom: none; }
    section {padding-left: 2em;
             padding-right: 2em; }
    form { display: grid;
        width: 60%;
          grid-gap: 1em;
          grid-template-columns: 10em 1fr;
          }
    input[type="submit"] { grid-column: 2;
                          width: 9em;
                          }
    #reshero { background-size: 100% 100%; }
    #flow { display: flex;
           flex-direction: row; }
    #mobile { display: none; }
    #desktop { display: inline; }
    #homehero { background-size: 100% 100%; }
    #yurthero { background-size: 100% 100%; }  
    #trailhero { background-size: 100% 100%; }
    }
@media (min-width: 1024px) {
    body {background-image: linear-gradient(to bottom, #FFFFFF 20%, #90C7E3 60%, #FFFFFF 100%); }
    nav ul { padding-right: 10%;
            padding-left: 10%; }
    #wrapper { margin: auto;
              width: 80%; }
    }