*   {box-sizing: border-box;}


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

header {background-color: #002171;
	color: #ffffff;
	text-align: center;
	}

header a {text-decoration:none;}
header a:link {color: white;}
header a:visited {color: white;}
header a:hover    {color: #90c7e3;}

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

	}

nav ul {list-style-type: none;
        margin: 0;
        padding-left: 0;
        font-size: 1.2em;
}
nav li { border-bottom: 1px solid darkblue;}
nav a 	{text-decoration: none;
	}
nav a:link {color:#5C7FA3;}
nav a:visited {color: #322873;}
nav a:hover {color:#a52a2a;}

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


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

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

dt 	{color: #002171;}

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

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

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

#contact {font-size: 90%;}

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

#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;
   
	}

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

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

          }
            header { grid-area: header;}
            nav {grid-area: nav; }
        .hero { grid-area: hero;}
        footer {grid-area: footer;}
      
}