<style>

* { box-sizing: border-box; }
nav a:link {color: #5C7FA3}
nav a:visited {color: #344873}
nav a:hover {color: #A52A2A}
header a:link {color: #FFFFFF; text-decoration: none ;}
header a:visited {color: #FFFFFF}
header a:hover {color: #90C7E3}


body{	color: #666666; 
		font-family: Verdana, Arial, "Sans Serif";
		background-color: #90C7E3;	
		margin: 0;
		}


header{	
		background-color:#002171;
		padding: 1em;
		color: #FFFFFF; 
		font-family: Georgia, Serif;
		}

h1{ 	
		text-align: center;
		font-size: 1.5em;}

nav{	font-size: 1.2em;
		text-align: center;
		background-color: #FFFFFF;
		}

nav ul{
	display: flex;
	flex-direction: column;
	list-style-type: none;
	margin: 0;
	padding-left: 0em;
}

nav li{
	padding: .5em 1em .5em 1em;
	width: 100%;
	border-bottom-style: solid;
	border-bottom-width: 1px;
}
		
nav a { text-decoration: none;
}

main{	padding: 0em 1em 0em 1em;
}

h2{ 	color: #1976D2; 
		font-family: Georgia, Serif; }
		
h3{		font-family: Georgia, Serif; }

dt{ 	color: #002171; 
		font-weight: bold; }

.resort {	color: #1976D2; 
			font-size: 1.2em; }

footer{ 	background-color: #FFFFFF;
			font-size:.70em; 
			font-style: italic; 
			text-align: center;
			padding: 1em;	}
			
section{ 	padding-left: .5em;
			padding-right: .5em;
}

#mobile{ display: inline;}

#desktop{ display: none;}

#wrapper {	background-color: #FFFFFF;
			}
			
#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%;
			}


@media  (min-width: 600px) {
h1{ 	letter-spacing: .25em;
		font-size: 2em;}

nav ul{
	display: flex;
	flex-direction: row;
	flex-wrap: none;
	justify-content: space-around;
	list-style-type: none;
	margin: 0;
	padding-left: 0em;
	padding-right: 2em;
}

nav li{
	padding: .5em 1em .5em 1em;
	width: 12em;
	bottom-border: none;
	border-bottom-style: solid;
	border-bottom-width: 1px
}

section{ 	
			padding-left: 2em;
			padding-right: 2em;
}

#flow{ display:flex;
		flex-direction: row;
		}

#mobile{ 
			display:none;}

#desktop{ 
			display:inline;}


#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-left:10%;
		padding-right: 10%;
		}
		#wrapper{
			margin: 0 auto;
			width: 80%;
}
</style>