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

header {color : #FFFFFF; 
        background-color : #002171; 
         background-position: right; 
    
        text-align: center;
        }

header a{text-decoration: none;}

header a:link {color: #FFFFFF; }

header a:visited {color: #FFFFFF; }

header a:hover {color: #90C7E3;}

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

nav a { text-decoration: none;
        font-weight: bold; 
        
        
}

nav ul { list-style-type: none;
        padding-left: 0px; 
        
        }

nav li {border-bottom: solid 1px; border-color: #002171; 
}

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

nav a:visited {color: #344873;}

nav a:hover {color: #A52a2a; transition: 3s ease-in;}



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

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

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

main ul {list-style-image: url(marker.gif); 
        marker: none; 
        margin: 0; 
        padding-left: 2; 
        font-size: 1.2em;}

dt { color : #002171;}
* { box-sizing: border-box;}

main { padding-top: 1px; 

        padding-right: 20px; 
        padding-bottom: 20px; 
        padding-left: 30px; 
        display: block;
        background-color: #ffffff;
        overflow: auto;}

video, embed { float: right; padding-left: 20px; }

#wrapper { background-image: linear-gradient(#FFFFFF, #90C7E3);  
        margin-right: auto;  
        background-color: #90C7E3; 
}

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

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

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

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

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

section { 
        padding-left: 2em; 
        padding-right: 2em;
        
}

table{
        border: solid 2px #3399cc;
        border-collapse: collapse;
        
}
tr:nth-of-type(odd){
        background-color: #f5fafc;
}
td, th {
        padding: 0.5em;
        border: solid 2px #3399cc;
}
td {
        text-align: center;
}
.text{
        text-align: left;
}

@supports ( display: flex) {
        form { display: flex;
                flex-flow: column nowrap;
                
              }
        input, textarea { margin-bottom: .5em; }

        input[type="submit"] { grid-column: 8 / 2;
                width: 100%; }
      }


        @media (min-width: 600px){
                form{width: 60%;
                grid-template-columns: 6em 1fr;
                grid-template-rows: auto;
                }

                input[type="submit"] { grid-column: 8 / 2;
                        width: 9em; }

                nav ul {
                        display: flex;
                        flex-direction: row;
                        flex-wrap: nowrap;
                        justify-content: space-around;
                        padding-left: 0px;
                }

                nav li{
                        border-bottom: none;
                }
                .content main {   display: grid;
                        grid-template-rows: auto auto 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)
{
        form{width: 60%;
                grid-template-columns: 6em 1fr;
                grid-template-rows: auto;
                }

                input[type="submit"] { grid-column: 8 / 2;
                        width: 9em; }

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

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

        #wrapper{ display: grid;
                grid-template-rows: none;
                grid-template-columns: none;
                margin: auto;
                width: 90%;
                border: 1px; border-color: #002171;
                box-shadow: #002171;
                

        }
                
             
                header { grid-row: 1 / 1; grid-column: 1 / 3;}
                nav{grid-row: 2 / 5; grid-column: 1 / 1;}
                div {grid-row: 2 / 3; grid-column: 2 / 2;}
                main{grid-row: 3 / 4; grid-column: 2 / 2;}
                table{ grid-row: 4 / 4; grid-column: 2 / 2;}
                footer     { grid-row: 4 / 4; grid-column: 2 / 2; }

}