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

* { box-sizing: border-box; }
nav {
font-weight: bold;
padding: 0;
font-size: 120%;
text-align: center;
}
a:focus{color: #5C7FA3;}
a:active {color: #344873;}
a:hover{color: #A52A2A;}

nav a{
text-decoration: none;
transition: color 3s ease-out;
}

video, embed { 
float: right; 
padding-left: 20px;
}

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

nav li{
border-bottom: 1px solid darkblue;
}

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

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

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

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

dt {
color:#002171;		
}

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

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

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

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

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

footer {
font-size: 75%;
font-style: italic;
text-align: center;
font-family: Arial, Helvatica, sans-serif;
padding: 2em;
background-color: #FFFFFF;
}

contact id {
font-size: 90%;	 	 
}

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

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

table{
	border-collapse: collapse; 
	border: 2px solid #3399CC;
}

td {
	padding: 0.5em;
	border: 2px solid #3399CC;
	text-align: center;
}

th{
	padding: 0.5em;
	border: 2px solid #3399CC;
}

text {
	text-align: left;
}

altrow:nth-of-type (odd) {
	background-color: #F5FAFC;
}

form { 
display: flex; 
flex-flow: column nowrap; 
}    

input, textarea { 
margin-bottom: .5em; 
}

@media (min-width: 600px){
form {
width: 60%;
display: grid;
grid-gap: 1em;
grid-template-columns: 6em 1fr;
grid-template-rows: auto;
}
input[type="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: 2 / 3; grid-column: auto; }
#special   { grid-row: auto; grid-column: 1 / 5; }
footer     { grid-row: auto; grid-column: 1 / 5; }

nav ul{
display: flex;
flex-wrap: nowrap;	
justify-content:space-between;	
justify-content: space-around;
}

nav li {
	border-bottom: none;
}

section {
padding-left: 2em;
padding-right: 2em;
}
}

@media (min-width: 1024px){

nav ul{
flex-direction: column;
padding-top: 1em;
}
nav {
text-align: left;
padding-left: 1em;	
}
#wrapper{
	margin: auto;
	width: 80%;
	border: darkblue;
	box-shadow: 5px 5px 5px #828282;
	display: grid;
    grid-template-rows: auto;
    grid-template-columns: 180px auto;
}
nav li {
display: flex;
flex-wrap: nowrap;	
border-bottom: none;
}
header {
	grid-row: 1 / 2; grid-column: 1 / 3;
}
nav {
	grid-row: 2 / 5; grid-column: 1 / 2; 
}
div {
	grid-row: 2 / 3; grid-column: 2 / 3;
}
main{
	grid-row: 3 / 4; grid-column: 2 / 3;
}
footer{
	grid-row: 4 / 5; grid-column: 2 / 3;
}
h1 {padding-bottom: 0;} 
}}