*
	{
		box-sizing:border-box;
	}

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

header
	{
		background-color:#002171;
		background-repeat:no-repeat;
		background-position:right;
		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;
	}

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

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

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

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

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

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

nav a:visited
	{
		color:#344873;
	}

nav a:hover
	{
		color:#a52a2a;
	}

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

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

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

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

#wrapper
	{
		margin-right:auto;
		margin-left:auto;
		background-color:#90c7e3;
		background-image:linear-gradient(#ffffff, #90c7e3);
	}

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

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

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

main dp
	{
		color:#002171;
		font-weight:bold;
	}

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

#contact
	{
		font-size:90%;
	}

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

@media (min-width: 600px)
{
    nav ul
    {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-around;
    }
    
    nav li
    {
        border-bottom: none;
    }
    
    style
    {
        margin-right: 2em;
        margin-left: 2em;
    }
    
    .flow
    {
        display: flex;
        flex-direction: row;
    }
    
    section
    {
        flex: 1;
    }
}

@media (min-width: 1024px)
{
    #wrapper
    {
        margin:auto;
        width: 80%;
        border: 1px solid darkblue;
        text-shadow: 3px 0 0 0 darkblue;
    }
    
    nav
    {
        text-align: left;
        padding-left: 1em;
    }
    
    @supports (display: grid)
    {
        nav ul
        {
            flex-direction: column;
            padding-top: 1em;
        }
        
        #wrapper
        {
            display: grid;
            grid-template-columns: 180px;
            grid-template-areas: 
                "header header"
                "nav hero"
                ". main"
                ". footer";
        }
        
        header
        {
            grid-area: header;
        }
        
        nav
        {
          grid-area: nav;  
        }
        
        .hero
        {
            grid-area: hero;
        }
        
        main
        {
            grid-area: main;
        }
        
        footer
        {
            grid-area: footer;
        }
        
        
    }
}