*{box-sizing: border-box;}

body{background-color:#eaeaea; 
	color:#555555; 
	font-family: arial, helvetica, sans-serif;}

#wrapper{background-color: #90c7e3;
		background-image: linear-gradient(to bottom, #ffffff, #90c7e3); }

header h1{width: auto;
		text-align: center;}

header a{text-decoration: none;}
header a:link{color: #ffffff;}
header a:visited{color: #ffffff;}
header a:hover{color: #90c7e3;}

h1{background-color:#002171; 
	color: #ffffff; 
	margin-bottom: 0; 
	font-family: georgia, "times new roman", serif;
	margin-top: 0;
	letter-spacing: 0.25em;
    padding-top: .5em;
    padding-bottom: .5em;}


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

nav ul{list-style-type: none; 
		margin: 0;
		padding-left: 0;
		font-size: 1.2em;}

nav li{border-bottom: 1px solid #002171}

nav a:link{color: #5c7fa3;}
nav a:visited{color: #344873;}
nav a:hover{color: #a52a2a;}

nav a{text-decoration: none;}

main{background-color: #ffffff;
		padding: 1px 20px 20px 30px;
		display: block;
		overflow: auto;}

h2{color:#1976d2; 
	font-family: georgia, "times new roman", serif;
	text-shadow: 1px 1px #cccccc;}

h3 {color:#000033; 
	font-family: georgia, "times new roman", serif;}

main ul {list-style-image: url(marker.gif);}

footer{font-size: 75%; 
		font-style: italic; 
		text-align: center; 
		font-family: georgia, "times new roman", serif;
		padding: 2em;
		background-color: #ffffff; }

dt{color:#002171;}

#homehero{height: 300px;
			background-image: url(coast2.jpg);
			background-size: 100% 100%;
			background-repeat: no-repeat;}

#yurthero{height: 300px;
		background-image: url(yurt.jpg);
		background-size: 100% 100%;
		background-repeat: no-repeat;}

#trailhero{height: 300px;
		background-image: url(trail.jpg);
		background-repeat: no-repeat;}

.resort{color:#1976d2; 
		font-weight: bold;}

#contact {font-size: 90%;}

@media (min-width: 600px){nav ul{display: flex; flex-wrap: nowrap; justify-content: space-evenly;} nav li{border-bottom:none;} section{margin-right: 2em; margin-left: 2em; flex: 1 1 0;} .flow{display:flex; flex-direction: row;}}

@media (min-width: 1024px){#wrapper{margin:auto; width: 80%; border: 1px solid #344873; box-shadow: 3px 3px 3px #344873;} nav{text-align: left; padding-left: 1em;} @supports (display: grid) {nav ul{flex-direction: column; padding-top: 1em;} .hero{grid-area: hero;} header{grid-area: header;} nav{grid-area: nav;} main{grid-area: main;} footer{grid-area: footer;} #wrapper{display: grid; grid-template-areas: "header header" "nav hero" "nav main" "nav footer"}}}