
*{box-sizing:border-box;}

body{background-image:url("sky.jpg");
		background-repeat:no-repeat;
		background-size:100%;
		color: #666666;
		font-family: Arial, Helvetica, sans-serif;}

#wrapper{background-image:linear-gradient(to bottom, #420d09, #8d021f);
		background-repeat:no-repeat;
		background-color:#90c7e3;}

header {background-color: #4e0707;
		color:#FFFFFF;
		text-align:center;}
		
header a{text-decoration:none;}

h1 {margin-bottom:0;
	margin-top:0;
	font-family:Georgia, Times-New-Roman, serif;
	letter-spacing:.25em;
	padding-top:.5em;
	padding-bottom:.5em;}

nav{padding:0;
	font-weight:bold;
	font-size:120%;
	text-align:center;}
	
nav a{text-decoration: none;}	

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;}

#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;}
	
td,th {padding:.5em; 
		border:2px solid #3399cc;}
		
td {text-align:center}

.text {text-align:left}

tr:nth-of-type(odd) {background-color:#f5fafc;}

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 1px #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 {background-color:#ffffff;
		font-size:75%; 
		font-style:italic;
		text-align:center; 
		font-family:Georgia, Times-New-Roman, serif;
		padding:2em}
		
form{display: flex;
		flex-flow:column nowrap;}

input, textarea {margin-bottom:.5em;}


    @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-columns: 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-direction:column;
			padding-top:1em;}
			
	nav{text-align:left;
		padding-left:1.5em}
		
	#wrapper {margin:auto;
				width:80%;
				border: 1px solid #000033;
				box-shadow: 3px 3px 3px #333333;
				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;}
	
	
}