/* colors:
            dark text & fill background: #16242c, rgb(22,36,44), hsl(143,85,33)
            light text & fill (pale off-white wave): #f6e7e0, rgb(246,231,224), hsl(13,140,235)
            active link (gold): rgb(230,180,125)
            hover, focus (dark teal):  rgb(0,97,129), #006181
        */
* {
    box-sizing: border-box;
}

body {
    font-family: Arial, Verdana, sans-serif;
    height: 100vh;
    color: #16242c; /* dark */
}

a {
    text-decoration: none;
    color: inherit;
}

    a:active, a:hover, a:focus {
        text-decoration: none;
        color: rgb(230,180,125);
        transition: color ease-in-out .5s;
    }

    a:active, a.selected {
        text-decoration: none;
        color: rgb(230,180,125);
        transition: color ease-in-out .5s;
    }

header {
    background-color: #16242c;
    color: #f6e7e0; /* light */
    height: 15vh;
    padding: 0 1%;
}

    header a:hover, header a:focus {
        color: rgb(0,97,129);
    }

h1 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 2em;
    font-weight: 800;
}

header img {
    height: 2em;
}

nav a:hover, nav a:focus {
    text-decoration: none;
    color: rgb(0,97,129);
    transition: color ease-in-out .5s;
}

footer {
    font-size: smaller;
}

/*************************************** BEGIN SCREEN ***************************************/

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

    .container {
        max-width: 1920px;
    }

    h1 {
        font-size: 3em;
    }

    header img {
        height: 3em;
    }

    nav {
        font-size: 1.65em;
    }
}