body { color: #666666; background-color: #90C7E3; font-family: Arial, Verdana, sans-serif ; margin: 0; box-sizing: border-box; }
h1 { color: #FFFFFF; font-family: Georgia, "Time New Roman", serif; text-align: center; font-size: 1.5em; }
header a { text-decoration: none; }
header a:link { color: #FFFFFF; }
header a:visited { color: #FFFFFF; }
header a:hover { color: #90C7E3; }
header { background-color: #002171; padding: 1em; }
nav a { text-decoration: none; }
nav a:link { color: #5C7FA3; }
nav a:visited { color: #344873; }
nav a:hover { color: #A52A2A; }
nav { background-color: #FFFFFF; text-align: center; font-size: 1.2em; }
nav ul {display: flex; margin: 0; padding-left: 0; list-style-type: none; flex-direction: column; justify-content: space-around; }
nav li { padding-top: .5em; padding-bottom: .5em; padding-right: 1em; padding-left: 1em; width: 100%; border-bottom: solid 1px; }
h2 { color: #1976D2; font-family: Georgia, "Time New Roman", serif; }
h3 { font-family: Georgia; }
main { float: right; padding-left: 1em; padding-right: 1em; padding-top: 0; padding-bottom: 0; display: block; }
#homehero { background-image: url(coast.jpg); background-repeat: no-repeat; background-size: 200% 100%; height: 300px; }
#yurthero { background-image: url(yurt.jpg); background-repeat: no-repeat; background-size: 200% 100%; height: 300px; }
#trailhero { background-image: url(trail.jpg); background-repeat: no-repeat; background-size: 200% 100%; height: 300px; }
dt { color: #002171; font-weight: bold; }
.resort { color: #1976D2; font-size: 1.2em; }
#wrapper { background-color: #FFFFFF; }
section { padding-left: .5em; padding-right: .5em; }
footer { background-color: #FFFFFF; font-size: small; font-style: italic; text-align: center; padding: 1em; }
#mobile { display: inline; }
#desktop {display: none; }
@media(min-width:600px)
h1 { font-size: 2em; letter-spacing: .25em; }
nav ul { display: flex; flex-direction: row; justify-content: space-around; padding-right: 2em; }
nav li { width: 12em; border-bottom: none; }
section { padding-left: 2em; padding-right: 2em; }
#flow { display: flex; flex-direction: row; }
#mobile { display: none; }
#desktop { display: inline; }
#homehero { background-size: 100% 100%; }
#yurthero { background-size: 100% 100%; }
#trailhero { background-size: 100% 100%; }
@media(min-width: 1024px)
body { background-image: linear-gradient( to bottom, #FFFFFF 20%, #90C7E3 60%, #FFFFFF 100%); }
nav ul { padding-right: 10%; padding-left: 10%; }
nav li { width: 12em; border-bottom: none; }
#wrapper { margin: auto; width: 80%; }