* { box-sizing: border-box; }

body {

background-color: #EAEAEA;

color: #666666;

font-family: Arial, Helvetica, sans-serif;

}

#wrapper {

background-color: #90C7E3;

background-image: linear-gradient(#ffffff, #90C7E3);
}

header {

background-color: #002171;

color: #ffffff;

background-image: url(sunset.jpg);

background-position: right;

background-repeat: no-repeat;

text-align: center;
}

h1 {
  
margin-bottom: 0;
  
margin-top: 0;

font-family: Georgia, "Times New Roman", serif;

letter-spacing: 0.25;

padding-top: 0.5em;

padding-bottom: 0.5em;
}

nav {

font-weight: bold;
 

padding: 0;
  
text-align: center;

font-size: 120%;

}

nav a {

text-decoration: none;

transition: color 3s ease-out;

}

nav li{

border-bottom: 1px solid #00008b;

}

main {
 
padding: 1px 20px 20px;
  
display: block;
 
background: white;
 
padding-left: 30px;

overflow: auto;

}

h2 {

color: #3399cc;
  
font-family: Georgia, "Times New Roman", serif;

text-shadow: 1px 1px 1px #ccc;
}

h3 {

color: #000033;
  
font-family: Georgia, "Times New Roman", serif;
}

dt {
 
color: #000033;
}

.resort {
  
color: #5c7fa3;
  
font-weight: bold;
}

#contact {
font-size: 90%;
}

main ul {
  list-style-image: url(images/marker.gif);
}

footer {
  
font-size: 75%;
  
font-style: italic;
  
font-family: Georgia, "Times New Roman", serif;
  
text-align: center;
  
padding: 20px;




background-color: white;

}

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

background-size: 100% 100%; 

}

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

background-size: 100% 100%;
  


}

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

}


#mobile { display: none; }
#desktop { display: inline; }


nav ul {

list-style: none;

margin: 0;

padding-left: 0;

font-size: 1.2em;

}

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

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


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

header a{

text-decoration: none;

}

header a:link{

color: #FFFFFF;

}

header a:visited{

color: #FFFFFF;
}

header a:hover{

color: #90C7E3;
}

table{

border: 2px solid blue;

border-collapse: collapse;

}

td,

th {

padding: 0.5em;

border: 2px solid #3399cc;
}

td {

text-align: center;

}

.text {

text-align: left;

}

thead:nth-of-type(odd),

tr:nth-of-type(even) {

background-color: #f5fafc;

}

form { 

display: flex; 

flex-flow: column nowrap; 
}    
  
input, textarea { 

margin-bottom: .5em; 
}


video, embed { 

float: right; 

padding-left: 20px;

width: 320px;

height: 240px;
}



/* media queries */


@media (min-width: 600px) {

nav ul{

display: flex;

flex-flow: row 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;

}



form{

width: 60%;

display: grid;

gap: 1em;

grid-template-columns: 6em 1fr;

grid-auto-rows: auto;

}

form button [type="submit"]{
        
grid-column: 2;
        
width: 9em;

}


}

@media (min-width: 1024px){

nav ul{

flex-direction: column;

padding-top: 1em;
}

nav{

align-content: left;

padding-leftZ: 1em;
}

#wrapper {

margin: auto;

width: 80%;

box-shadow: 1px;

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;

}