* {box-sizing: border-box;}

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

#wrapper    {background-image: linear-gradient(to bottom, #ffffff, #90c7e3);
            background-color: 90c7e3;}

header {background-color: #002171;
        color: #FFFFFF;
        height: 120px;
        text-align: center;
        padding-top: 30px;
        padding-left: 3em}


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

header a:visited {text-decoration: none; 
                    color: #FFFFFF;}

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

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

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

nav a:link {text-decoration: none; 
            color: #5c7fa3;}

nav a:visited {color: #344873;}

nav a:hover {color: #a52a2a;}

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

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

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

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

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

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

dt {color: #002171;}

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

#contact {font-size: 90%;}

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

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

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

@media (min-width: 600px) {

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

    nav li {border-bottom: none;}

    section {padding-left: 2em;
            padding-right: 2em;}
    
.content main { display: grid;
                grid-template-rows: auto;
                grid-template-columns: 1fr 1fr 1fr;}
h2         { grid-row: 1 / 2; grid-column: 1 / 5; }
section    { grid-row: 2 / 3; grid-column: auto; }
#special   { grid-row: auto; grid-column: 1 / 5; }
footer     { grid-row: auto; grid-column: 1 / 5; }

}

@media (min-width: 1024px) {

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

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

   #wrapper {margin: auto;
                width: 80%;
                border: 1px solid #000033;
                box-shadow: 3px 3px 3px #333333;
                display: grid;
                grid-template-rows: auto;
                grid-template-columns: 190px auto;}

header {grid-row: 1 / 2; grid-column: 1 / 3;}
nav { grid-row: 2 / 5; grid-column: 1 / 2; }
div { grid-row: 2 / 3; grid-column: 2 / 3; }
main { grid-row: 3 / 4; grid-column: 2 / 3; }
footer{ grid-row: 4 / 5; grid-column: 2 / 3; }

}