* {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;
    min-width: 960px;
    max-width: 2048px;}
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:visitied
    {color: #344873;}
nav a:hover
    {color: #A52A2A;}
nav ul
    {list-style-type: none;
    padding-left: 1em;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding-left: 0;}
nav li
    {padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 1em;
    padding-right: 1em;
    border-bottom: 1px;
    border-bottom-style: solid;
    width: 100%;}
main 
    {display: block;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 1em;
    padding-left: 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: 0.70em;
    font-style: italic;
    padding:1em;
    text-align: center;}
#mobile
    {display: inline;}
#desktop
    {display: none;}
form
    {display: flex;
    flex-direction: column;
    columns: 1;
    padding-left: 1em;
    width: 80%;}
input
    {margin-bottom: 0.5em;}
textarea
    {margin-bottom: 0.5em;}
#reshero
    {height: 300px;
    background-image: url(ocean.jpg);
    background-size: 200% 100%;
background-repeat: no-repeat;}
@media(min-width:600px){
    h1
        {font-size: 2em;
        letter-spacing: 0.25em;}
    nav ul 
        {flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-around;
        padding-right: 2em;}
    nav li
        {width: 12em;
        border-bottom: none;}
    section 
        {padding-left: 2em;
        padding-right: 2em;}
    #flow
        {flex-direction: row;}
    #mobile
        {display: none;}
    #desktop
        {display: inline;}
    #homehero
        {background-size: 100% 100%;}
    #yurthero
        {background-size: 100% 100%;}
    #trailhero
        {background-size: 100% 100%;}
    #reshero
        {background-size: 100% 100%;}
    form
        {width: 60%;
        display: grid;
        gap: 1em;
        columns: 2;
        column-width: 10em 1fr;}
    input[type="submit"]
        {grid-column: 2/2 ;
        width: 9em;}
}
@media (min-width:1024px){
    body 
        {background-image: linear-gradient(to bottom, #FFFFFF 20%, #90C7E3 60%, #FFFFFF 100%);}
    nav ul 
        {padding-left: 10%;
        padding-right: 10%;}
    #wrapper
        {margin: auto;
        width:80%;}
}
table
    {border: 1px solid #3399CC;
    border-collapse:collapse;
    width: 90%;}
td, th
    {padding: 5px;
    border: 1px solid #3399CC;}
td
    {text-align: center;}
.text
    {text-align: left;}
tr:nth-of-type(even)
    {background-color: #DFEDF8;}