*
{
    box-sizing: border-box;
}

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

.wrapper
{
    background-color: #90C7E3;
    background-image: linear-gradient(to bottom, #FFFFFF, #90C7E3);
}

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
{
    text-align: center;
    font-weight: bold;
    padding: 0px;
    font-size: 120%;
}

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

nav a
{
    text-decoration: none;
}

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

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

nav a:visited
{
    color: #344873;
}

nav a:hover
{
    color: #A52A2A;
}

main
{
    background-color: white;

    padding-top: 1px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 30px;

    display: block;

    overflow: auto;
}

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

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

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

dt
{
    color: #002171;
}

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

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

.contact
{
    font-size: 90%;
}

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

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

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

@media screen and (min-width: 600px) 
{

    nav ul
    {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-around;
    }

    nav li
    {
        border-bottom: none;
    }

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

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

@media screen and (min-width: 1024px) 
{
    .wrapper
    {
        margin: auto;
        width: 80%;
        border: 1px solid darkblue;
        box-shadow: 3px 3px 0 darkblue;

        grid-template-columns: 180px;
        grid-template-rows:  auto;
        grid-template-areas: "header header header" "nav hero hero" "nav main main" "nav footer footer";
    }

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

    @supports (display: grid)
    {
        .wrapper
        {
            display: grid;
            grid-template-columns: 180px;
            grid-template-rows: auto;
            grid-template-areas: "header header header" "nav hero hero" "nav main main" "nav footer footer";
        }
        
        nav ul
        {
            flex-direction: column;
            padding-top: 1em;
        }

        .homehero {
            grid-area: hero;
        }

        .yurthero {
            grid-area: hero;
        }

        .trailhero {
            grid-area: hero;
        }

        main {
            grid-area: main;
        }

        footer {
            grid-area: footer;
        }

        header {
            grid-area: header;
        }
    }


}