*{
	box-sizing: border-box;
}

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

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

h2{
	font-family: Georgia, serif;
	color: #1976D2;
}

nav{
	font-weight: bold;
	text-align: center;
	background-color: white;
}

nav a{
	text-decoration: none;
}

body {
	font-family: Veranda, Arial, san-serif;
	color: #666666;
	background-color: white;
	margin: 0;

}

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

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

footer{
	font-size: .7em;
	font-style: italic;
	text-align: center;
	padding: 1em;
	background-color: white;
}

#wrapper {
	background-color: white;
}

#homehero {
	background-image: url(images/coast.jpg);
	height: 300px;
	background-size: cover;
	background-repeat: no-repeat;
}

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

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

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

/* This is the CSS for the hero image */

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

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

nav li{
	padding: .5em 1em .5em 1em;
	width: 100%;
	border-bottom: solid 1px #344873;
}

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

nav a:visited{
  color: #344873;
}

nav a:hover{
  color: #A52A2A;
}

nav a:active{
  color: #000000;
}

#mobile{
	display: inline;
}
#not-mobile{
	display: none;
}

@media only screen and (min-width: 600px){
/*The CSS will work ONLY IF the screen size is greater than 600px */
	h1{font-size: 2em;
		letter-spacing: .25em;
	}
	nav ul{
		flex-flow: row nowrap;
		justify-content: space-around;
		padding-right: 2em;
	}
	nav li{
		width: 12em;
		border-bottom: none;
	}
}


@media only screen and (min-width: 1024px){
/*The CSS will work ONLY IF the screen size is greater than 1024px */
	nav ul{
		max-width: 1024px;
		margin: 0 auto;
	}
	main{
		max-width: 900px;
		margin: 0 auto;
		padding: 20px;
		width: 80%;
		background-color: white;
	}
}