body { background-color: #90C7E3; color: #666666; font-family: Verdana, Arial, sans-serif; margin: 0;}
header { background-color: #002171; color: #FFFFFF; font-family: Georgia, serif; padding: 1em;}
header a:link { color: #FFFFFF;}
header a:visited { color: #FFFFFF;}
header a:hover { color: #90C7E3;}
header a { text-decoration: none;}
h1 { text-align: center; font-size: 1.5em;}
h2 { color: #1976D2; font-family: Georgia, serif;}
nav { text-align: center; background-color: #FFFFFF; font-size: 1.2em;}
nav a:link { color: #5C7FA3;}
nav a:visited { color: #344873;}
nav a:hover { color: #A52A2A;}
nav a { text-decoration: none;}
nav ul { list-style-type: none; padding-left: 0; display: flex; flex-direction: column; margin: 0;}
nav li { padding-top: .5em; padding-bottom: .5em; padding-left: 1em; padding-right: 1em; width: 100%; border-bottom: 1px solid;}
dt { color: #002171; font-weight: bold;}
.resort { color: #1976D2; font-size: 1.2em;}
footer { font-size: .70em; font-style: italic; text-align: center; padding: 1em; background-color: #FFFFFF;}
#wrapper { background-color: #FFFFFF;}
h3 { font-family: Georgia, serif;}
main { padding-left: 1em; padding-right: 1em; padding-top: 0; padding-bottom: 0;}
#homehero { height: 300px; background-image: url(coast.jpg); background-size: 200% 100%; background-repeat: no-repeat;}
#yurthero { height: 300px; background-image: url(yurt.jpg); background-size: 200% 100%; background-repeat: no-repeat;}
#trailhero { height: 300px; background-image: url(trail.jpg); background-size: 200% 100%; background-repeat: no-repeat;}
* { box-sizing: border-box;}
section { padding-left: .5em; padding-right: .5em;}
#mobile { display: inline;}
#desktop { display: none;}
table { margin: auto; width: 90%; border: 1px solid #3399CC; border-collapse: collapse;}
td, th { padding: 5px; border: 1px solid #3399CC;}
td { text-align: center;}
td.text { text-align: left;}
tr:nth-of-type(even) { background-color: #DFEDF8;}
@media (min-width: 600px) { 
h1 { font-size: 2em; letter-spacing: .25em;}
nav ul { display: flex; 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 { 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%;}
#wrapper { margin: auto; width: 80%;}
}