header {
background-color:#002171;
color:#FFFFFF;
text-align: center;
}
header a:link   {
color: #FFFFFF;
    }
header a:visited {
color: #FFFFFF;
    }
header a:hover  {
color: #90C7E3;
    }

body    {
background-color:#EAEAEA;
color:#666666;
}

nav     {
font-weight: bold;
padding: 0;
font-size: 120%;
text-align: center;
}

nav ul  {
list-style: none;
margin: 0;
padding-left: 0;
font-size: 1.2em;
}
nav a:link   { 
 color: #5C7FA3;
    }
nav a:visited   { 
color: #344873;
 }
nav a:hover  {
color: #A52A2A;
}
h2  {
color:#1976D2;
font-family: Georgia;
text-shadow: 1px 1px 1px #CCCCCC;
}

dt  {
color:#002171;
}

.resort {
color:#1976D2;
font-weight: bold;
}

h1  {
margin-bottom: 0;
font-family: Georgia;
margin-top: 0;
letter-spacing: 0.25em;
padding-bottom: 0.5em;
padding-top: 0.5em;
}

@font-face  {
    font-family:'Arial'
}

sunset.jpg  {
    line-height: 400%;
    text-indent: 1em;
}

nav a   {
    text-decoration: none;
    transition: 2s;
}

h3  {
font-family: Georgia;
color: #000033
}

main ul  {
list-style-image: url(marker.gif);
}

footer  {
font-size: 75%;
font-style: italic;
text-align: center;
font-family: Georgia;
padding: 2em;
background-color: #FFFFFF;
}

.contact    {
font-size: 90%
}

#wrapper {
margin-right: auto;
background-color: #90C7E3;
background-image: linear-gradient(to bottom, #FFFFFF, #90C7E3);
}

main    {
padding-top: 1px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 30px;
display: block;
background-color: #FFFFFF;
overflow: auto;
}

#homehero    {
    height: 300px;
    background-image: url(coast.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;
}

*   {box-sizing: border-box;}  

nav li  {
    border-bottom: solid;
    border-bottom-color: darkblue;
    border-bottom-width: 1px;
}
form    {
    display: flex;
    flex-flow: column nowrap;
}
input, textarea {
    margin-bottom: .5em;
}
video, embed    {float: right; padding-left: 20px;}
@media  (min-width: 600px)  {
    nav ul {
        display: flex;
        justify-content: space-around;
    }
    nav li  {
        border-bottom: 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;
         }
    form    {
        width: 60%;
        display: grid;
        grid-gap: 1em;
        grid-template-columns: 6em 1fr;
        grid-template-rows: auto;
        grid-column: 9em;
    }
}
form    {
    display: flex;
    flex-flow: column nowrap;
}
input, textarea {
    margin-bottom: .5em;
}
@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: darkblue;
        box-shadow: 1px 1px darkblue;
        display: grid;
        grid-template-rows: 180px auto;
        grid-template-rows: auto
    }
    header  {
        grid-row: 1 / 2;
        grid-column: 1 / 3;
    }
    nav {
        grid-row: 2 / 5;
        grid-column: 1 / 2;
    }
    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;
    }
}
table   {
   border: 2px solid #3399CC;
    border-collapse: collapse;
}
td  {
    text-align: center;
    padding: 0.5em;
    border: 2px solid #3399CC;
}
th  {
    padding: 0.5em;
    border: 2px solid #3399CC;
    
}
.text{
    text-align: left;
}
:nth-of-type(#F5FAFC)