body {
    font-family: Calibri;
    font-size: 14pt;
    padding: 0;
    margin: 0;
}

div.outer-container {

}

div.header-outer-container {
/*    border: 1px solid red; */
    background: hsl(0, 0%, 5%);
    width: 100%;
    padding: 0;
    margin: 0;
}

div.footer-outer-container {
/*    border: 1px solid red;*/
    background: hsl(0, 0%, 5%);
    width: 100%;
    padding: 0;
    margin: 0;
}



div.header-inner-container {

/*    max-width: 900px;*/
    padding: 1em 2em;
    margin: 0 auto;
}

div.footer-inner-container {
/*    max-width: 900px; */
    padding: 1em 2em;
    margin: 0 auto;
}

div.inner-container {
    padding: 1em 2em;
    margin: 0 auto;
}


div.header-inner-container, div.footer-inner-container, div.inner-container 
{
    /*
    border: 1px solid red;
        */
    max-width: 1000px;
}


header {

}
div.header {
    min-height: 40px;
    padding-top: 20px;
}

h1 {
    font-size: 2.5em;
}

/* colors and branding section */

div.header, div.footer {
    background: hsl(0, 0%, 5%);
}

header, footer, header div.header-nav a {
    color: hsl(0, 0%, 95%);
}

main h1, main h2, main h3 {
    color: hsl(195, 55%, 45%);
}

main a {
    color: hsl(200, 50%, 50%);
}

dfn {
    color: hsl(140, 55%, 45%);
}

header div.site-name a {
    color: hsl(0, 0%, 95%);
}

/* /colors and branding section */

dfn {
    font-weight: bold;
    font-size: 1.4em;
}





div.header a, header div.header-nav a {
    text-decoration: none;
}


header div.site-name {

    display: inline;
    float: left;

    padding-top:  0.2em;
    padding-left: 3em;
}


header div.site-name a {
    text-decoration: none;

    font-size: 18pt;
}



br.clear-left {
    line-height:0;
    clear: left;
}

br.clear-right {
    line-height:0;
    clear: right;
}

div.footer {
    padding: 1em 2em;
}

footer div.site-name {
    font-size: 12pt;
}

header div.header-nav {
    font-size: 16pt;
/*
    right: 1em;
    top: 0em;
    */

    display: inline;
    
    float: right;

    padding-top:  0.2em;
    padding-right: 1em;
    
}

nav a {
    padding-left: 15px;
}


div.header-links {
    display: inline;
    float: right;
}

div.nav-icon {
    display: inline;
    float: right;
    /*width: 30px;*/
    cursor: pointer;
}

div.nav-icon div.nav-icon-line {
   width: 30px;
   height: 5px;
   margin-top: 5px;
   
   background:hsl(0, 0%, 98%);

}






/* less wide screens and mobile */
    div.nav-icon {
        display: inline;
    }

    a.close-nav {
        display: block;
    }

    div.header-links {
        display: none;
    }

/* /less wide screens and mobile */

       /* nav opened mobile styles */

        div.header-links.opened {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            background: hsl(0, 0%, 2%);
            padding-bottom: 100px;
            display: block;
        }

        div.header-links.opened a {
            font-size: 20pt;
        }

        div.header-links.opened a {
            padding-top: 10px;
            padding-bottom: 10px;
            display: block;
            float: none;
        }

       /* /nav opened mobile styles */



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

    div.nav-icon {
        display: none;
    }

    a.close-nav {
        display: none;
    }

    div.header-links {
        display: inline;
    }

}

main img {
    max-width: 100%;
}

main a {
    text-decoration: none;
    color: hsl(200, 70%, 50%);
}

main a:hover {
    text-decoration: none;
    color: hsl(200, 70%, 70%);
}

figure figcaption {
    padding: 0.5em 0.5em;
    font-size: 11pt;
    line-height: 1.5;
}