*{

	box-sizing:border-box;

}


.resort{

	color:#1976D2;
}

main dt{

	color:#002171;
}

h1{
	
	color:#FFFFFF; 
	background-color:#002171; 
	text-align:center;
	padding-top:.5em;
	padding-bottom:.5em;
	margin-top:0px;
	margin-bottom:0;
	font-family:Georgia, Times New Roman, serif;
	letter-spacing:.25em;
}

h2{

	color:#1976D2; 
	text-shadow:1px 1px 0px #CCCCCC;
	font-family:Georgia, Times New Roman, serif;
}

nav{
	font-weight:bold;
	padding:0;
	font-size:120%;
	text-align:center;
	
}

nav a{
	text-decoration:none;
}

body{
	color:#555555 
	background-color:#EAEAEA;
	font-family:Arial, Helvetica,sans-serif;
}

h3{
	font-family:Georgia, Times New Roman, serif; 
	color:#000033;
}

main ul{

	list-style-image:url(Images/marker.gif);
}

footer{
	
	font-family:Georgia, Times New Roman, serif;
	font-size:75%;
	font-style:italic;
	text-align:center;
	padding:2em;
	background-color:#FFFFFF;
}

.resort{
	
	font-weight:bold;
}

#contact{

	font-size:90%;
}


#wrapper{


	
	background-image:linear-gradient(to bottom, white, lightblue); 

	
	
}

main{

	padding-top:1px;
	padding-right:20px;
	padding-bottom:20px;
	padding-left:30px;
	display:block;
	background-color:#FFFFFF;
	overflow: auto;
}

#homehero{

	height:300px;
	background-image:url(Images/coast2.jpg);
	background-size:100% 100%;
	background-repeat:no-repeat;

}
	

#yurthero{

	height:300px;
	background-image:url(Images/yurt.jpg);
	background-size:100% 100%;
	background-repeat:no-repeat;

}


#trailhero{

	height:300px;
	background-image:url(Images/trail.jpg);
	background-size:100% 100%;
	background-repeat:no-repeat;

}
	


nav ul{

	list-style-type:none;
	margin:0;
	padding-left:0;
	font-size:1.2em;

}

nav li{

border:1px solid darkblue;

}

nav a:link{

	color:#5C7FA3;

}

	
nav a:visited{

	color:#344873;
}


nav a:focus{


}

nav a:hover{

	color:#A52A2A;

}


nav a:active{

}


h1 a:link{

	text-decoration:none;
	color:#FFFFFF;
}


h1 a:visited{

	text-decoration:none;
	color:#FFFFFF;
}


h1 a:focus{


}

h1 a:hover{

	color:#90C7E3;

}


h1 a:active{

}


@media screen and (min-width:600px){ 

nav ul{

Display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:space-around;

}


nav li{

border:none; 

}


section{

margin-left:2em;
margin-right:2em;

}

.flow{

display:flex;
flex-direction:row;

section{

flex:1;

}


}


@media screen and (min-width:1024px){ 

#wrapper{

margin:auto;
width:80%;
border:1px solid darkblue;
box-shadow:3px 3px 3px 3px darkblue;

}

nav{

text-align:left;
Padding-left:1em;

}

nav ul{

flex-direction:column;
padding-top:1em;

}


header{

grid-area:header;

}

nav{

grid-area:nav;

}

.hero{

grid-area:hero;

}

main{

grid-area:main;

}

footer{

grid-area:footer;

}

#wrapper{

display:grid;
grid-template-columns:180px;
grid-template-areas:
		"header header"
		"nav hero"
		". main"
		". footer";

}

}