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

table{
border:solid;
border-color: #3399CC;
border-width: 2px;
border-collapse: collapse;
}

table td, th{
padding: 0.5em;
border:solid;
border-color: #3399CC;
border-width: 2px;
}

table td{
text-align: center;  
}

tr:nth-of-type(odd){
background-color: #F5FAFC;
}


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

.text{
text-align: left; 
}

.resort{
font-weight: bold;
color: #1976D2;
}

#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 body{
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;}

}