*{box-sizing:border-box;}

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

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

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


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

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-size: 120%;
		font-weight: bold;
		padding:0;
		text-align:center;
	}
nav a{text-decoration: none;
	  transition:color 3s ease-out;
			}
nav ul{list-style-type: none;
				margin:0;
				padding-left: 0;
				font-size:1.2em;
			}
nav a:link{color:#5c7fa3;}
nav a:visited{color:#344873;}
nav a:hover{color:#a52a2a;}

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

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


#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;}
					
table{border:2px solid #3399cc;
	border-collapse:collapse;}/*creates the border on the table*/
	
td,th{padding:.5em;
border:2px solid#3399cc;}/*creats lines for each row/column*/

td{text-align:center;}
.text{text-align:left;}

tr:nth-of-type(odd){background-color:#f5fafc;}/*gives light blue background color to every other column*/

h2{color: #1976d8;
	font-family: Georgia,"Times New Roman",serif;
	text-shadow: 3px 3px 3px #cccccc;}

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

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

dt{color: #002171;}

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

#contact{font-size: 90%;}

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

form{display:flex;
	flex-direction: column;
	flex-wrap:no-wrap;
}

input, textarea{margin-bottom:0.5em;}

iframe{
	float:right;
	padding:left 20px;}


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

		.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;}
		
		form{display:grid;
			grid-gap:1em;
			grid-template-column:6em 1fr;
			grid-template-rows:auto;
			width:60%}
		
		input[type="submit"] {grid-column:2/3;
								width: 9em;}
			

}




@media (min-width:1024px){
		nav ul{display:flex;
					flex-flow:column;
					padding-top: 1em;
					}

		nav {text-align: left;
				padding-left: 1.5em;
				}
		#wrapper{
				margin:auto;
				width:80%;
				border:1px solid #333333;
				box-shadow: 3px 3px 3px;
				display:grid;
				grid-template-rows: auto;
				grid-template-columns: 190px auto;
		}
		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}
		/* grid template for the page of the website*/
		.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:auto; grid-column:1/5;}
	footer{grid-row: auto; grid-column: 1/5;}


}