/* External stylesheet: Pacific.css */


* { box-sizing: border-box; }

body {
background-color: #90C7E3;
color:#666666;
font: Verdana, Arial, sans-serif;
font-family: Arial, Verdana, sans-serif;
Margin: 0;
}

header {
background-color: #002171;
color: #FFFFFF;
font: Georgia, Serif;
padding: 1em;
}

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

header a:link{
color:#FFFFFF;}

header a:visited{
color: #FFFFFF;}

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


main {
padding-left: 1em;
padding-right: 1em;
padding-bottom: 0;
padding-top: 0;

}

h1 {
text-align: center;
font-size: 1.5em;

}

nav {
font-size: 1.2em;
}

h2 {
color: #1976D2;
font: Georgia, Serif;}

h3 {

font: Georgia, Serif;}

dt {
color: #002171;
font-weight: bold;}

.resort {
color: #1976D2;
font-size: 1.2em;}

footer {
font-size: 0.7em;
font-style: italic;
text-align: center;
padding: 1em;
background-color: #FFFFFF;
}

section {
	padding-left: .5em;
	padding-right: .5em;
}

#wrapper {
min-width: 960px;
max-width: 2048px;
background-color: #90c7e3;
background-color: #FFFFFF;
}

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

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

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

nav a {
text-decoration: none; }

nav ul {
	list-style-type: none;
	padding-left: 1em;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding-left: 0;
}

nav li {
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	padding-left: 1em;
	padding-right: 1em;
	width: 100%;
	border-bottom: 1px solid;
}




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

nav: a:visited {color: #344873; }

nav: a:hover {color: #A52A2A; }


#mobile {
	display: inline;
}

#desktop {
	display: none;
}

@media (min-width: 600px) {
	nav ul{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
	}
	
	form {                                     /* configure form as two column grid */
		display: grid;
		grid-template-columns: 10em 1fr;
		grid-gap: 1em;
		width: 60%;
	}
	
	nav li{
	border-bottom: none;
	width: 12em;}
	section {
		padding-left: 2em;
		padding-right: 2em;
	}
	#mobile {
		display:none;
	}
	#desktop {
	display: inline;}
	
	#homehero, #yurthero, #trailhero {
	background-size: 100% 100%;}
}

@media (min-width: 1200px) {
	body { 
	background:linear-gradient(to bottom,
	#FFFFFF 20%,
	#90C7E3 60%,
	#FFFFFF 100%);
	}
	nav ul {
		padding-left: 10%;
		padding-right: 10%;
	}
	#wrapper {
		width: 80%;
		margin: auto;
	}
	
	/* Style submit button */
	form input[type="submit"] {
		grid-column: 2;
		width:9em;
	}
	
	#reshero {
		background-size: 100% 100%
}

table {
	border: 1px solid #3399CC;
	width: 90%;
	border-collapse: collapse;
	margin: 0 auto;                   /* Centers table */
}
	
th, td {
	padding: 5px;
	border: 1px solid #3399CC;
}

td {
	text-align: center;
}

.text {
	text-align: left;
}

tr:nth-of-type(even) {                          /* Uses the psuedo clas to alternate colors between even rows */
	background-color: #DFEDF8;
}

form {
	display: flex;
	flex-direction: column;
	padding-left: 1em; width: 80%; 
}

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

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