* {
    box-sizing: border-box;
  }
  
  body {
    background-color: #90C7E3;
    color: #666666;
    font-family: Verdana, Arial, sans-serif;
    margin: 0;
}
  
  #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 li {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-right: 1em;
    width: 100%;
    border-bottom: 1px solid;
  }
  
  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: row;
   flex-wrap: wrap;
    list-style-type: none;
    padding-left: 0;
  }
  
  main {
    display: block;
    padding-left: 1em; 
    padding-right: 1em; 
    padding-top: 0em;
    padding-bottom: 0em;
  }
  
  #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: 0.70em;
    font-style: italic;
    padding: 1em;
    text-align: center;
  }

  #mobile {
    display: inline;
  }

  #desktop {
    display: none;
  }

  @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; 
    }
  }