*{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;}
header a:link 
      {color: #ffffff;text-decoration: none;}
header a:visited 
      {color:#ffffff;text-decoration: none;}
header a:hover
      {color: #90c7e3;}
nav {
    padding: 0em;
    font-size: 120%;
    text-align: center;
    font-weight: bold;
  }
nav a
  {text-decoration: none;}
nav ul
    { padding-left: 0px;
    list-style-type: none;
    font-size: 1.2em;
    margin: 0;
}
nav li {
  border: 1px solid darkblue;
}
nav a:link {color:#5c7fa3}
nav a:visited {color:#344873}
nav a:hover {color:#a52a2a}
h1
  {font-family: Georgia, 'Times New Roman', Times, serif;
    margin-bottom: 0;
    margin-top: 0;
    padding-top: .5em;
    padding-bottom: .5em; 
    letter-spacing: .25em;}
h2
  {color:#1976D2;font-family: Georgia, 'Times New Roman', Times, serif;
    text-shadow: 1px #cccccc;}
h3
  {font-family: Georgia, 'Times New Roman', Times, serif; color: #000033;}
main ul
  {list-style-image: url(marker.gif);}
footer
 {font-size: 75%;font-family: Georgia, 'Times New Roman', Times, serif;
  font-style: italic;
  text-align: center;
  padding: 2em;
background-color: #ffffff;}
dt
  {color:#002171;}
.resort
 {color:#1976D2;
  font-weight: bold;}
div
  {font-size: 90%;}
#wrapper
  {background-color: #90c7e3; 
    background-image: linear-gradient( #ffffff, #90c7e3);
  background-repeat: no-repeat;}
main
    {padding-top: 1px;
      background-color: #ffffff;
      overflow: auto;
      padding-right: 20px;
      padding-bottom: 20px;
      padding-left: 30px;
      display: block;}
#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;}
  @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; } }
    .content { 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; }

  @media ( min-width: 1024px ) {
    nav ul { flex-direction: column;
      padding-top: 1em; }
    nav { text-align: left; 
      padding-left: 1em; }
    #wrapper { margin: auto; 
      width: 80%; 
      border-color: #00008B; 
      box-shadow: 1px 1px 1px #00008B; 
      display: grid;
      grid-template-rows: auto auto auto auto; 
      grid-template-columns: 180px auto; }
    header { grid-row: 1 / 2; grid-column: 1 / 3; }
    nav { grid-row: 2 / 5; grid-column: 1 / 2; }
    .section { grid-row: 2 / 3; grid-column: auto; }
    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; } }