html{
    background-color: lightgray;
}

body{
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #FCF0DE;
    max-width: 1000px;
    margin: auto;
    padding: 20px;
    padding-bottom: 0px; /*keep footer at page bottom*/
    box-shadow: 1px 1px 10px gray;
    margin-bottom: 50px;
}

body a{
    text-decoration: none;
}

nav{
    background-color: #ED7925;

    /*force nav to edge of body*/
    margin-left: -20px;
    margin-right: -20px;
    margin-top: -20px;

    padding: 10px;
    padding-left: 20px;
    height: 70px;
    border-bottom: 2px solid #b34d05;
}

img#mastheadIcon{
    background-color: #FEC782;
    border-radius: 50%;
    width: 60px;
    height: auto;
    border: 1px solid black;
    padding: 5px;
    float: left;
}

header{
    float: left;
}

header a{
    color: #FEC782;
}

header a:hover{
    color: #375D89;
}

header ul#listLinks{
    padding: 0px;
    padding-left: 15px;
    margin-top: 17px; /*align to masthead icon center*/
}

header ul#listLinks li:first-child a{
    font-size: 1.5em;
    font-weight: bold;
}

header ul#listLinks li, footer ul li{
    text-decoration: none;
    display: inline-block;
    margin-right: 20px;
}

div#jtronDiv{
    /* https://background-tiles.com/overview/white/1020.php */
    background-image: url("../images/pebbles.png");
    background-color: rgba(255,255,255,0.7);
    background-blend-mode: lighten;

    /*push to edge of body*/
    margin-left: -20px;
    margin-right: -20px;

    padding-top: 5px;
    padding-bottom: 10px;
    border-bottom: 1px gray solid;
}

div#jtronDiv h1{
    margin-bottom: 0px; 
    margin-top: 0px;
}

div#jtronDiv h4{
    margin-top: 0px; 
}

div#infoDiv{
    color: #375D89;
    max-width: 60%;
    margin: auto;
    text-align: left;
    margin-top: 15px;
}

div#primaryContent{
    padding: 0px;
    padding-top: 20px;
}

div#primaryContent p:first-of-type{
    margin-top: 0px;
    font-size: 1.5em;
    letter-spacing: 1px;
}

figure#demoFig{
    width: 40%;
    min-width: 250px;
    float: left;
    margin-top: 0px;
    margin-right: 20px;
    margin-left: 0px;
}

figcaption{
    margin-bottom: 0px;
    text-align: center;
}

figure img{
    width: 100%;
}

hr{
    max-width: 50%;
    margin-top: 20px;
    margin-bottom: 30px;
}

code{
    /* background-color: green; */
    color: green;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.2em;
    font-weight: bold;
    white-space: nowrap;
    /* padding: 2px; */
}

footer{
    background-color: #e3e3e3;
    color: gray;
    text-align: center;
    
    /*push to edge of body*/
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: -30px;

    border-top: 1px solid gray;
    padding-bottom: 20px;
}

div#footerContent p{
    margin-top: 0px;
    margin-bottom: 0px;
}

footer img{
    width: 40px;
    height: auto;
}

.invisible{
    visibility: hidden;
}

.hidden{
    display: none;
}

.clearMe{
    clear: both;
}

/*eureka*/
.stickyFooter{
    min-height: calc(80vh - 70px);
    /* background-color: rgba(220, 20, 60, 0.198); */
}

/* at 610px and smaller: revert to this style */
/* above 610px, it doesn't do this */
@media (max-width: 600px) {
    nav{
        background-color: #FEC782;
    }

    img#mastheadIcon{
        background-color: white;
    }

    header a, footer a{
        color: #ED7925;
    }

    header ul#listLinks li{
        display: block;
    }

    header ul#listLinks{
        font-size: .9em;
        margin-top: 5px;
    }

    figure{
        display: none;
    }

    div#primaryContent p:first-of-type{
        font-size: 1.2em;
        letter-spacing: 0px;
    }

}

/* above 525px, it doesn't do this */
@media (max-width: 525px) {
    div#primaryContent p:first-of-type{
        clear: left;
    }
}

/* above 400px, it doesn't do this */
@media (max-width: 400px) {
    nav{
        height: 100px;
    }

    header{
        margin-left: -20px;
    }

    header ul#listLinks{
        font-size: .8em;
        margin-top: 5px;
    }

    img#mastheadIcon{
        /* dwr! don't 'hide' important navigation */
        display: none;
    }
}