body {background-color: #90C7E3; 
     color: #666666;
	font-family: Verdana, Arial, sans-serif;
     margin: 0;}

#wrapper {background-color: #FFFFFF;}

header {background-color: #002171;
     color: #FFFFFF;
	font-family: Georgia, serif;
	padding: 1em;}

h1 {text-align: center;
     font-size: 1.5em;}

h2 {color: #1976D2;
     font-family: Georgia, serif;}

h3 {font-family: Georgia, serif;}

nav {font-size: 1.2em;
     text-align: center;
     background-color: #FFFFFF;}

nav ul {flex-direction: column;
     margin: 0;
     padding-left: 0;
     display: flex;
     list-style-type: none}

nav li {padding-top: 0.5em;
     padding-bottom: 0.5em;
     padding-right: 1em;
     padding-left: 1em;
     width: 100%;
     border-bottom: solid 1px;}

main {padding-left: 2em; 
     padding-right: 2em;
     display: block;
     padding-top: 0em;
     padding-bottom: 0em;
     padding-left: 1em;
     padding-right: 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: .5em;
     padding-right: .5em;}

footer {font-size: .70em;
     font-style: italic;
	text-align: center;
	padding: 1em;
     background-color: #FFFFFF;}

.mobile {display: inline;}

.desktop {display: none;}

@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-right: 2em; padding-left: 2em;}
#flow {flex-direction: row; display: flex;}
.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%;}}