/* TOOLS */

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

/* TODO: Get rid of all floats (left and right) and replace with flex */
/* TODO: Replace all ems and colors with vars */
/* TODO: Just greatly simplify all of this by combining whatever we can */
/* TODO: Redesign the banner. Make a more dramatic border */
/* TODO: Fix the menu on mobile. Geez, its awful! */
/* TODO: Look at how to make the about page a bit more fantastical. RPG char sheet, MMORPG stat block, looter/shooter character screen, ARPG screen */


/* TAG DEFAULTS */

body {
    font-family: 'Josefin Sans', sans-serif;
    background: url("images/zwartevilt.png");
    color: #eee;
}

img {
    display: block;
}

h1 {
    font-size: 3em;
}

h2 {
    font-size: 2.5em;
}

h3 {
    font-size: 2em;
}

h4 {
    font-size: 1.5em;
}

h5 {
    font-size: 1.25em;
}

a:link,
a:visited,
a:hover,
a:focus,
a:active {
    color: #eee;
}

a:hover {
    color: #aaa;
}

blockquote {
    quotes: "\0022""\0022""\0022""\0022";
}

blockquote:before {
    color: #eee;
    content: open-quote;
    font-size: 1em;
    line-height: 0.1em;
}

blockquote:after {
    color: #eee;
    content: close-quote;
    font-size: 1em;
    line-height: 0.1em;
}

blockquote p {
    display: inline;
}


/* HEADER */

header .names h1 {
    float: right;
}

header .names h1:first-child {
    float: left;
}

header .navigation .social {
    background: url("images/zwartevilt.png");
    position: absolute;
    top: 0;
    right: 0;
}

header .navigation .social li {
    float: left;
    margin: 0 0 0 32px;
    height: 64px;
    text-align: center;
    line-height: 64px;
}

header .navigation .social li:first-child {
    margin: 0;
}

header .navigation .social img {
    height: 64px;
}

header .navigation .social .facebook img {
    padding: 8px;
    height: 48px;
}

header .navigation .social .linkedin img {
    padding: 8px;
    height: 48px;
}

header .navigation .social .github img {
    padding: 8px;
    height: 48px;
}

header .navigation {
    position: relative;
}

header .navigation picture img {
    width: 100%;
    height: 256px;
    object-fit: cover;
}

header .navigation nav {
    position: absolute;
    bottom: 0;
    left: 0;
}

header .navigation nav a {
    background: url("images/closedTab.png");
    display: inline-block;
    margin: 0 2em 0 0;
    height: 48px;
    width: 96px;
    line-height: 48px;
    text-align: center;
}

header .navigation nav a.open {
    background: url("images/openTab.png");
}

header .navigation .border {
    display: block;
    height: 3px;
    width: 100%;
    background: url("images/borderSliver.png")
}

@media (max-width: 640px) {
    header .names {
        text-align: center;
    }
    header .names h1 {
        float: initial;
    }
    header .names h1:first-child {
        float: initial;
    }
    header .navigation .social {
        text-align: center;
        position: initial;
        top: initial;
        right: initial;
    }
    header .navigation picture {
        display: none;
    }
    header .navigation .social li {
        display: inline-block;
        float: none;
    }
    header .navigation nav {
        position: initial;
        bottom: initial;
        left: initial;
    }
    header .navigation nav a {
        margin: 0 auto;
        width: initial;
        display: block;
        background: none;
    }
    header .navigation nav a.open {
        background: no-repeat center;
        background-size: 100% 5px;
        background-image: none;
        background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0));
        background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0));
    }
}

@media (max-width: 380px) {
    header .names h1 {
        font-size: 2.5em;
    }
    header .navigation .social li {
        margin: 0;
    }
}


/* MAIN */

main {
    margin: 1em 0;
}


/* FOOTER */

footer section {
    display: block;
    width: 100%;
    height: 2em;
    line-height: 2em;
    text-align: center;
}

footer section .copyright,
footer section a {
    display: inline-block;
}

footer section * {
    margin: 0 0 0 2em;
}

footer section *:first-child {
    margin: 0;
}

@media (max-width: 380px) {
    footer section a,
    footer section * {
        display: block;
        margin: 0;
    }
}