/*
* Color palette generated @ coolors.co:
*
* f9f9df - cornsilk
* 064393 - medium electric blue
* 2f0567 - deep violet
* badede - powder blue
* d8e9d7 - gainsboro
*
*/
body {
    height: 100%;
    max-width: 100%;
    margin: 0;
    font-family: "Verdana, Geneva, sans-serif";
    font: 1.2em/1.62 sans-serif;
    background-color: #F9F9DF;
    color: #444;
}

html {
    height: 100%;
}

h1,h2,h3 {
    line-height: 1.2;
}

input, textarea {
    font-family: "Verdana, Geneva, sans-serif";
    font: 1.2em/1.62 sans-serif;
    padding-left: 0.25em;
}

a:link, a:active, a:visited {
    text-decoration: none;
    color: #064393;
}

a:hover {
    text-decoration: underline;
}

p.anchor {
    position: relative;
}

a.anchor {
    position: absolute;
    top: -4.25em;
}

.responsive {
    max-width: 100%;
    height: auto;
}

.category-icon {
    color: #064393;
}

.category-icon.article.icon-pg {
    content:url(../icons/article-icon-pg-64x64.png);
    position: relative;
    width: 1.25em;
    left: 0;
    top: 0.25em;
}

/* The hero image */
.hero-image {
    /* Use "linear-gradient" to add a darken background effect to the image. This will make the text easier to read */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../photos/phoenix-night.jpg");
    
    /* Set a specific height */
    height: 35%;

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.hero-text {
    text-align: center;
    position: absolute;
    width: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #F9F9DF;
}

header, footer {
    color: #F9F9DF;
    height: 3.5em;
}

header {
    position: relative;
    top: -3.5em;
    background-color: rgba(6, 43, 93, 0.5);
    margin-bottom: -2.5em;
}

header.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    background: #064393;
}

footer {
    position: fixed;
    background: #064393;
    bottom: 0;
    width: 100%;
    line-height: 2.5em;
}

footer div {
    margin-top: 0.2em;
}

div#my-nav-links {
    display: none;
    position: relative;
    right: -60%;
    width: 40%;
    background-color: rgba(6, 43, 93, 0.75);
}

div#my-nav-links a {
    text-decoration: none;
    display: block;
    padding: 0.5em;
    color: #badede;
    font-weight: bold;
    font-size: 1.5em;
}

div#my-nav-links a:hover {
    text-decoration: none;
    color: #F9F9DF;
}

div.outer-content {
    margin: 1em auto;
    max-width: 40em;
    margin-bottom: 3em;
}

div.inner-content {
    margin: 1em;
}

div.content-shim {
    height: 1em;
}

.btn-common {
    margin: 0.35em;
    font-size: 2em;
}

a#home-btn, a#github-btn {
    text-decoration: none;
    color: #F9F9DF;
}

span#hamburger-btn-span {
    float: right;
    font-size: 2em;
    margin: 0;
    margin-right: 0.5em;
    margin-top: 0.15em;
}

span#github-btn-span2 {
    margin-left: 0.5em;
    font-family: "Verdana, Geneva, sans-serif";
    font: 1.2em/1.62 sans-serif;
    font-size: initial;
}

span#scroll-to-top-btn-span {
    float: right;
    font-size: 2em;
    margin: 0;
    margin-right: 0.5em;
    margin-top: 0.25em;
}

i#hamburger-btn, i#scroll-to-top-btn {
    text-decoration: none;
    color: #F9F9DF;
    cursor: pointer;
}

/* Color classes */

.color-cornsilk {
    color: #f9f9df;
}

.color-medium-electric-blue {
    color: #064393;
}

.color-deep-violet {
    color: #2f0567;
}

.color-powder-blue {
    color: #badede;
}

.color-gainsboro {
    color: #d8e9d7;
}

@media only screen and (max-width: 480px) {
    body {
        font: 0.9em/1.62 sans-serif;
    }
}

@media only screen and (max-width: 360px) {
    body {
        font: 0.8em/1.62 sans-serif;
    }
}

@media only screen and (max-width: 320px) {
    body {
        font: 0.7em/1.62 sans-serif;
    }
}

@media print{
    body {
        max-width: none;
        background-color: white;
    }

    header, footer {
        display: none;
    }

    div.hero-image {
        display: none;
    }
}