*      {box-sizing: border-box; }
body   {background-color: #EAEAEA;
		color: #666666; 
		font-family: Arial, Helvetica, sans-serif; 
}		
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-top: 0;
		margin-bottom: 0; 
	    font-family: Georgia, "Times New Roman", serif;
		letter-spacing: 0.25em;
		padding-bottom: 0.5em;
		padding-top: 0.5em;
}
nav   { padding: 0;
		text-align: center;
		font-size: 120%;
		font-weight: bold;
}
nav a  { text-decoration: none; 
}
nav li { border: 1px solid #00008B; } 
nav a:link { color: #5C7FA3; }
nav a:visited { color: #344873; }
nav a:hover { color: #A52A2A; }
nav ul { list-style-type: none;
		 margin: 0;
		 padding-left: 0;
		 font-size: 1.2em;

}
main   { background-color: #FFFFFF;
		 padding-top: 1px;
		 padding-right: 20px;
		 padding-bottom: 20px;
		 padding-left: 30px;
		 display: block;
		 overflow: auto;
}
main ul  {list-style-image: url(marker.gif);
}
h2     {color: #1976D2;
		font-family: Georgia, "Times New Roman", serif;
		text-shadow: 1px 1px 1px #CCCCCC;
}
h3	   {color: #000033;
		font-family: Georgia, "Times New Roman", serif;
}		
dt     {color: #002171; 
}
footer {background-color: #FFFFFF;
		font-family: Georgia, "Times New Roman", serif;
		font-size: 75%; 
		font-style: italic;
		text-align: center;
		padding: 2em; 
		clear: both;
}		
.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-repeat: no-repeat;
			background-size: 100% 100%;
}
#yurthero { height: 300px; 
			background-image: url(yurt.jpg);
			background-repeat: no-repeat;
			background-size: 100% 100%;
}
#trailhero { height: 300px; 
			background-image: url(trail.jpg);
			background-repeat: no-repeat;
			background-size: 100% 100%;
}
@media (min-width: 600px) {
			nav ul { display: flex;
			flex-flow: row nowrap;
			justify-content: space-around;}
			main div { padding-left: 2em; padding-right: 2em; }
			nav ul li { border-bottom: none; 
			/* I removed the other borders as well since they still appeared in browser */
			border-top: none;
			border-left: none; 
			border-right: none;}
			.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; }
}
@media (min-width: 1024px) {
			nav ul { display: flex;
			flex-direction: column;
			padding-top: 1em; }
			nav { text-align: left;
			padding-left: 1em; }
			#wrapper { 
			margin: auto; 
			width: 80%; 
			border: #00008B;
			box-shadow: 3px 3px 3px #828282;
			display: grid;
			grid-template-rows: auto;
            grid-template-columns: auto; }
			header {grid-row: 1 / 2; grid-column: 1 / 4; }
			nav { grid-row: 2 / 5; grid-column: 1 / 2; }
			div { grid-row: 2 / 3; grid-column: auto; }
			main { grid-row: 3 / 4; grid-column: 2 / 3; }
			footer { grid-row: auto; grid-column: 2 / 4; }