* {box-sizing: border-box; }

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

header { color: #FFFFFF; 
	background-color:#002171; 
	text-align: center; }

header a:link { color: #FFFFFF;
		text-decoration: none; }

header a:visited { color: #FFFFFF;
		text-decoration: none; }

header a:hover { color: #90C7E3; }

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

h1 { 	margin-bottom: 0;
	font-family: Georgia, "Times New Roman", serif; 
	margin-top: 0; 
	letter-spacing: 0.25em;
	padding-top: 0.5em;
	padding-bottom: 0.5em; }

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

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

nav li { border-bottom: 1px solid #002171;
		text-align: center; }

nav a { text-decoration: none; 
	padding-left: .5em; 
	padding-right: .5em; }

nav a:link { color: #5C7FA3; }

nav a:visited { color: #344873; }

nav a:hover { color: #A52A2A; }

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

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

dt {color: #002171; }

main ul {list-style-image: url(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 { color: #1976D2;
	font-weight: bold; }

#contact { font-size: 90%; }

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

#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-size: 100% 100%;
	background-repeat: no-repeat; }

@media (min-width: 600px) {
	nav ul { display:flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: space-between; }
	nav li { border-bottom: none;}
	section {padding-left: 2em;
			padding-right: 2em;} 
	form {
			display: grid;
			grid-template-columns: 6em 1fr;
			grid-template-rows: auto;
			grid-gap: 1em; }
	#submit {grid-column: 2/3;
					width: 9em; }
	}
.content main { display: grid;
			grid-template-rows: auto;
			grid-template-columns: 1fr 1fr 1fr; }
h2 { grid-row: 1 / 2;
	grid-column: 1 / 5; }
section { grid-row: auto; 
		grid-column: 1 / 5; }
#special { grid-row: auto; 
		grid-column: 1 / 5; }
footer { grid-row: auto; 
		grid-column: 1 / 5; }

@media (min-width: 1024px) {
	nav ul { flex-flow: column; 
			padding-top: 1em;
			text-align: left; }
	#wrapper {margin: auto; 
		width: 80%; 
		border: 1px solid #002171;
		border-bottom: 1px solid #002171; 
		display: grid;
		grid-template-columns: 180px auto;
		grid-template-rows: auto; } }
	#wrapper header { grid-row: 1 / 2;
					grid-column: 1 / 3;}
	#wrapper nav { grid-row: 2 / 5; 
					grid-column: 1 / 2; }
	#wrapper div { grid-row: 2 / 3; 
					grid-column: auto; }
	#wrapper main { grid-row: 3 / 4; 
					grid-column: auto; }
	#wrapper footer { grid-row: auto; 
					grid-column: auto; }
	form {
			display: flex;
			flex-flow: column nowrap; }
	input, textarea {
			margin-bottom: 0.5em; }
	input { 
			padding: 0.5em; }