* {
box-sizing:border-box;}


body {background-color: #eaeaea;
color: #555555;
font-family: "Arial", "Helvetica", sans-serif;

}

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

main {
padding: 1px 20px 20px 30px;
display: block;
background-color: #ffffff;
overflow: auto;
}


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

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

td {
    text-align:center;
}

.text {
    text-align: left;
}

tr:nth-of-type(even) {
 background-color: #f5fafc;
}

header {

background-color: #002171;
color: #FFFFFF;
text-align: center;
text-decoration: none;
}

header a:link {color: #ffffff;}
header a:visited {color: #ffffff;}
header a:hover {color: #90c7e3;}

h1 {
margin-top: 0px;
margin-bottom: 0px;
font-family: 'Georgia', 'Times New Roman', serif;
background-size: contain;
letter-spacing: 0.25em;
text-decoration: none;
padding-top: 0.5em;
padding-bottom: 0.5em;
}


h2 {color: #1976D2;
font-family: Georgia, 'Times New Roman', serif;
text-shadow: 1px 1px #CCCCCC

}

h3 {
font-family: Georgia, 'Times New Roman', serif;
color: #000033;
}

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

a {
text-decoration: none;
}

nav a:link {color:#5c7fa3;}
nav a:visited {color: #344873;}
nav a:hover {color: #a52a2a;}

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

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


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

dt {color: #002171;}

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

.contact {
font-size: 90%;
}



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

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

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

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

}

@media only screen and (min-width: 600px) {

nav ul {
display: flex;
flex-wrap: nowrap;
justify-content:space-around;
}

nav li {
border-bottom: none;
}

.section {
margin-left: 2em;
margin-right:2em;
flex: 1;
}

.flow {
display:flex;
flex-direction: row;
}
}

@media only screen and (min-width: 1024px) {

#wrapper {
margin:auto;
width:80%;
border-style:solid;
border-color: #00008b;
filter: drow-shadow( 3px #00008b);
}

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


@supports (display: grid) {

nav ul {
flex-direction: column;
padding-top:1em;
}

header {
grid-area:header;}

nav {
grid-area:nav;}

main {
grid-area:main;}

footer {
grid-area:footer;}


.hero {grid-area: hero;}

#wrapper {display:grid;
    grid-template-columns: 180px 1fr;
    grid-template-areas:"header header" 
        "nav hero"
        "nav main"
        "nav footer";
    grid-template-rows:100px auto 400px;
}
}
}