*{box-sizing: border-box}

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

#wrapper{
	background-color: #90c7e3;
	box-shadow: 3px 3px 3px #333333;
    background-image: linear-gradient(to bottom, #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-top: 0px;
    letter-spacing: .25em;
    padding-bottom: .5em;
    padding-top: .5em;
	}

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

nav a	{
    text-decoration: none;
    transition: color ease-out 3s;
	}

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

nav a:visited{
    color: #344873;}

nav a:hover{
    color: #a52a2a;}

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

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

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


h2	{font-family: georgia, times new roman, serif;
	color:#1976d2;
	text-shadow: 1px 1px 1px #cccccc;
	}

h3	{font-family: georgia, times new roman, serif;
	color: #000033;
	}

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

footer	
    {font-family: font-family: georgia, times new roman, serif;
	font-size: 75%;
	font-style: oblique;
	text-align: center;
	padding: 2em;
    background-color: #ffffff;
	}

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

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

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

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

dt	{color:#002171;
	font-size: 90%;
	}

@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;
            }
    
    .flow{  
        display:flex;
        flex-direction: row;
        flex: 1;}
        }

@media only screen and (min-width:1024px){
    #wrapper{
        margin:auto;
        width: 80%;
        border: 1px solid #344873;
        box-shadow: 3px #344873;
        }
    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;}
        .hero{  grid-area: hero;}
        main{   grid-area: main;}
        footer{ grid-area: footer;}
        #wrapper{display:grid;
                grid-template-columns: 180px auto;
                grid-template-areas: "header header"
                                       "nav hero"
                                        ". main"
                                        ". footer"
                                        }
        
    }
    
 @media only screen and (min-width:600px){
        video{
            float: right;
            margin: 1em;
        }
    }