*{box-sizing: border-box;}

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;}

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

h1 {
margin-bottom: 0;
margin-top: 0;
font-family: Georgia, "Times New Roman", serif;
letter-spacing: 0.25em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}

main{
background-color: #FFFFFF;
display: block;
padding: 1px 30px 20px;
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);
}

nav {
font-weight: bold;
padding: 0;
font-size:120%;
text-align: center;
}

nav ul {
list-style-type: none;
margin: 0;
padding-left:0;    
font-size: 1.2em;
}

nav ul a{
text-decoration: none;
}

nav li{
border-bottom:solid;
border-width: 1px;
border-color: #00008B;
}

nav ul a:link{color: #5C7FA3;}
nav ul a:visited{color: #344873;}
nav ul a:hover{color: #A52A2A;}




dt {
color: #002171;
}

.resort {
color: #1976D2;
}

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

.resort{
font-weight: bold;
}

#contact{
font-size: 90%; 
}

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

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

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

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

@media (min-width: 600px){
    
nav ul{
display: flex;
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; }
}

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

nav{
text-align: left;
padding: 1em;
}

#wrapper{
margin:auto;
width:80%;
border:solid;
border-color: #00008B;
border-width: 1px;
box-shadow:3px 3px 3px #00008B;

display: grid;
grid-template-columns:180px,auto;
grid-template-rows: 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;}

}