* {box-sizing: border-box; }
header { color: #FFFFFF;
         background-color: #002171; 
         text-align: center;
}
header a {text-decoration: none;}
header a:link {color: #FFFFFF;}
header a:visited {color: #FFFFFF; }
header a:hover {color: #90C7E3; }
h1 { margin-top: 0;
     margin-bottom: 0;
     letter-spacing: 0.25em;
     padding-top: 0.5em;
     padding-bottom: 0.5em;
     font-family: Georgia, "Times New Roman", serif;
}
h2 { color: #1976D2;
     font-family: Georgia, "Times New Roman", serif;
     text-shadow: 1px 1px 1px #CCCCCC;
}
h3 { color: #000033;
     font-family: Georgia, "Times New Roman", serif;}
body { color: #666666; background-color: #EAEAEA;
       font-family: Arial, Helvetica, sans-serif;
}
main { padding-top: 1px;
       padding-right: 20px;
       padding-left: 30px;
       padding-bottom: 20px;
       display: block;
       background-color: #FFFFFF;
       overflow: auto;
}
main ul {list-style-image: url(marker.gif);}
nav { font-weight: bold;
      padding: 0;
      font-size: 120%;
      text-align: center;
}
nav a { text-decoration: none; }
nav a:link { color: #5C7FA3; }
nav a:visited { color: #344873; }
nav a:hover { color: #A52A2A; }
nav ul { list-style-type: none;
         margin: 0;
         padding-left: 0;
         font-size: 1.2em; }
nav li { border: 1px solid #00008B; }
dt { color: #002171; }
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; }
footer { font-size: 75%;
         font-style: italic;
         text-align: center;
         background-color: #FFFFFF;
         font-family: Georgia, "Times New Roman", serif;
         padding: 2em;
}
form { display: flex; flex-flow: column nowrap; }
form {  display: grid;
		grid-template-rows: auto;
		grid-template-columns: 6em 1fr;
		grid-gap: 1em;
        width: 60%; }
input, textarea { margin-bottom: .5em; }
input[type="submit"] { grid-column: 2 / 3; width: 9em; }
@media (min-width:600px) {
    nav ul { flex-flow: row nowrap; 
    display: flex; 
    justify-content: space-around;
    }
    nav li { border: 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; }
}
@media (min-width:1024px) {
    nav ul {display: flex; flex-direction: column; padding-top: 1em; }
    nav { text-align: left; padding-left: 1em; }
    #wrapper { margin: auto; 
               width: 80%; 
               border: 1px solid #00008B;
               box-shadow: 3px 3px 3px #333333;
               display: grid;
               grid-template-rows: auto;
               grid-template-columns: 180px auto; }
    header { grid-row: 1 / 2; grid-column: 1 / 4; }
    nav { grid-row: 2 / 5; grid-column: 1 / 2; }
    div { grid-row: 2 / 3; grid-column: 2 / 4; }
    main { grid-row: 3 / 4; grid-column: 2 / 4; }
    footer { grid-row: 4 / 5; grid-column: 2 / 4; }
}
#wrapper { background-color: #90C7E3;
           background-image: linear-gradient(to bottom, #FFFFFF, #90C7E3);
           background-repeat: no-repeat;
}
#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;
}
#contact { font-size: 90%}
.resort { color: #1976D2; font-weight: bold; }