* { box-sizing: border-box; }
 body { background-color: #90C7E3;
     height: 100vh;
     color: #666666;
	font-family: Verdana, Arial, sans-serif;
     margin: 0 px;
}
#wrapper { background-color: #FFFFFF;
		 background-repeat: no-repeat; 
}
header { background-color: #002171;
         color: #FFFFFF;
	    font-family: Georgia, serif;
	    padding: 1em;
}
header a { text-decoration: none; }
header a:link       { color: #FFFFFF; }
header a:visited { color: #FFFFFF; }
header a:hover     { color: #90C7E3; }
h1 {  font-size: 1.5em;
     text-align: center; 
}
h2 { color: #1976D2;
     font-family: Georgia, serif; 
}
h3 { font-family: Georgia, serif; }
nav { 
     font-size: 1.2em;
     text-align: center;
     background-color: white;
}
nav a { text-decoration: none; }
nav a:link       { color: #5C7FA3; }
nav a:visited { color: #344873; }
nav a:hover     { color: #A52A2A; }
nav ul { 
     display: flex; 
     flex-direction: column;
     margin: 0;
     padding-left: 0em;}
nav li { 
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-right: 1em;
padding-left: 1em;
width: 100%;
border-bottom: 1px solid}

main { 
      display: block; 
	  padding-top: 0em;
       padding-bottom: 0em;
       padding-left: 1em;
       padding-right: 1em;
}
dt { color: #002171;
     font-weight: bold;
}
.resort { color: #1976D2;
          font-size: 1.2em;
}
#homehero { height: 300px;
            background-image: url(coast.jpg);
  			background-repeat: no-repeat;
            background-size: 200% 100%; 
			 }
#yurthero { height: 300px;
            background-image: url(yurt.jpg);
  			background-repeat: no-repeat;
            background-size: 200% 100%; 
			 }
#trailhero { height: 300px;
            background-image: url(trail.jpg);
  			background-repeat: no-repeat;
            background-size: 200% 100%; 
			 }	
section { 
     padding-left: 0.5em;
	padding-right: 0.5em;	
}			
footer { background-color: #FFF;
       font-size: .70em;
       font-style: italic;
	  padding: 1em;
	  text-align: center;
}


@media screen and (min-width: 600px) {
     h1 {
          font-size: 2em;
          letter-spacing: 0.25em;
          }

     nav ul {
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          padding-right: right 10%;

          }
      
     nav li {
          width: 12em;
          border-bottom: none;
          }
      
     section {
          padding: 0 2em;
          }
      
     #flow {
          display: flex;
          flex-direction: row;
          }
      
     #mobile {
              display: none;
          }
      
     #desktop {
          display: inline;
          }
      
     #homehero,
     #yurthero,
     #trailhero {
      background-size: 100% 100%;
          }
      }






      @media screen and (min-width: 1024px) {
          body {
            background-image: linear-gradient(to bottom, white 20%,#90C7E3 60%, #FFFFFF 100%);
          }
          
          
          nav ul {
            padding-right: 10%;
            padding-left: 10%;
          }
          
          #wrapper {
            width: 80%;
            margin: 0 auto; 
          }
        }