*
    {box-sizing: border-box;}

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

header 
	{background-color:#002171;
	color:#ffffff;
	background-position:right;
	background-repeat:no-repeat;
	text-align:center;}

header a
    {text-decoration: none;}
    
header a:link
    {color: white;}

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

header a:visited
    {color: white;}

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

nav a
	{text-decoration:none;}

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

nav a:visited
    {color: #344873;}

nav a:hover
    {color: #a52a2a;}

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

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

h1 	
	{margin-bottom:0;
	margin-top:0;
    font-family:georgia, times-new-roman, serif;
    letter-spacing: 0.25em;
    padding: 0.5em 0}

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

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

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

main ul
	{list-style-image: url(images/marker.gif);}
	
dt 	
	{color:#002171;}

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

.contact
	{font-size:90%;}

#wrapper
	{background-color:#90C7E3;
    background-image: linear-gradient(to bottom, #FFFFFF, #90C7E3);}
	
#homehero
	{height:300px;
	background-image: url(images/coast2.jpg);
	background-repeat:no-repeat;
	background-size: 100% 100%;}

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

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

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

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

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

@media (min-width: 1024px)
    {#wrapper
        {margin: auto;
        width: 80%;
        border: solid 1px #002171;
        box-shadow: 3px 3px 15px 3px #002171;}

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

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

    .hero
        {grid-area: hero;}
    
    header
        {grid-area: header;}
        
    nav
        {grid-area: nav;}
        
    main
        {grid-area: main;}
        
    footer
        {grid-area: footer;}
        
    #wrapper
        {display: grid;
        grid-template-columns: 180px auto;
        grid-template:
        "header header"
        "nav hero"
        "nav main"
        "nav footer"
        /180px;}}}