body, html {
    font-family: 'Atkinson Hyperlegible', sans-serif;
    background: #222;
    color: #ddd;
    line-height: 1.5;
}
pre, code {
    font-family: 'Inconsolata', monospace;
}
a {
    color: #3CA2A2;
}
h1, h2 {
  line-height: 1.3;
}
h1 a {
  text-decoration: none;   
}
nav {
    width: 100%;
    background: black;
    border-top: 1px solid #555;
    border-bottom: 1px solid #555;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #444;
}

nav ul li {
    float: left;
}
nav ul li a {
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    color: whitesmoke;
}

nav ul li a:hover {
    background-color: #111;
}


.headerbottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
}
#contentwrap {
    max-width: 740px;
    margin-left: auto;
    margin-right: auto;
}
.fixednav {
    position: fixed;
    top: 0;
}
.menutext {
    display: none;
}
.menucheck {
    display: none;
}

.github-icon {
    mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIC4zYTEyIDEyIDAgMCAwLTMuOCAyMy4zOGMuNi4xMi44My0uMjYuODMtLjU3TDkgMjEuMDdjLTMuMzQuNzItNC4wNC0xLjYxLTQuMDQtMS42MS0uNTUtMS4zOS0xLjM0LTEuNzYtMS4zNC0xLjc2LTEuMDgtLjc0LjA5LS43My4wOS0uNzMgMS4yLjA5IDEuODMgMS4yNCAxLjgzIDEuMjQgMS4wNyAxLjgzIDIuODEgMS4zIDMuNSAxIC4xLS43OC40Mi0xLjMxLjc2LTEuNjEtMi42Ny0uMy01LjQ3LTEuMzMtNS40Ny01LjkzIDAtMS4zMS40Ny0yLjM4IDEuMjQtMy4yMi0uMTQtLjMtLjU0LTEuNTIuMS0zLjE4IDAgMCAxLS4zMiAzLjMgMS4yM2ExMS41IDExLjUgMCAwIDEgNiAwYzIuMjgtMS41NSAzLjI5LTEuMjMgMy4yOS0xLjIzLjY0IDEuNjYuMjQgMi44OC4xMiAzLjE4YTQuNjUgNC42NSAwIDAgMSAxLjIzIDMuMjJjMCA0LjYxLTIuOCA1LjYzLTUuNDggNS45Mi40Mi4zNi44MSAxLjEuODEgMi4yMmwtLjAxIDMuMjljMCAuMzEuMi42OS44Mi41N0ExMiAxMiAwIDAgMCAxMiAuMyIvPjwvc3ZnPg==');
    mask-size: cover;
    width: 20px;
    height: 20px;
    background: white;
    display: inline-block;
    text-indent:-9999px;
}
.patreon-icon {
    mask: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE1LjM4Ni41MjRjLTQuNzY0IDAtOC42NCAzLjg3Ni04LjY0IDguNjQgMCA0Ljc1IDMuODc2IDguNjEzIDguNjQgOC42MTMgNC43NSAwIDguNjE0LTMuODY0IDguNjE0LTguNjEzQzI0IDQuNCAyMC4xMzYuNTI0IDE1LjM4Ni41MjRNLjAwMyAyMy41MzdoNC4yMlYuNTI0SC4wMDMiLz48L3N2Zz4=');
    mask-size: cover;
    width: 20px;
    height: 20px;
    background: white;
    display: inline-block;
    text-indent: -9999px;
}
.fancybox {
    display: block;
    width: 200px;
    height: 200px;
    background: black;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.screenshot {
    margin: 2px;
    display: inline-block;
}
.fancybox img {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}
.landingfill {
    position: relative;
    height: 100vh;
    width: 100%;
    background-size: cover;
}
.landingfill > figure {
    animation: imageAnimation 30s linear infinite 0s;
    backface-visibility: hidden;
    background-size: cover;
    color: transparent;
    height: 100%;
    left: 0px;
    opacity: 0;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 0;
    padding: 0;
    margin: 0;
}
.landingfill > figure:nth-child(1) { background-image: url(/assets/images/slideshow1.jpeg); }
.landingfill > figure:nth-child(2) { background-image: url(/assets/images/slideshow2.jpeg); animation-delay: 6s; }
.landingfill > figure:nth-child(3) { background-image: url(/assets/images/slideshow3.jpeg); animation-delay: 12s; }
.landingfill > figure:nth-child(4) { background-image: url(/assets/images/slideshow4.jpeg); animation-delay: 18s; }
.landingfill > figure:nth-child(5) { background-image: url(/assets/images/slideshow5.jpeg); animation-delay: 24s; }

@keyframes 
imageAnimation {  
 0% { animation-timing-function: ease-in; opacity: 0; }
 8% { animation-timing-function: ease-out; opacity: 1; }
 17% { opacity: 1 }
 25% { opacity: 0 }
 100% { opacity: 0 }
}
.landingpage {
    height: 100vh;
}
.headerfill {
    position: relative;
    height: 200px;
    width: 100%;
    background-image: url(/assets/images/header.jpeg);
    background-size: cover;
}
article {
    border-bottom: 1px solid #555;
    margin-bottom: 4px;
}
.pagination {
    width: 100%;
    text-align: center;
}
.current_page {
    font-weight: bold;
}
.next_page, .prev_page, .different_page {
    text-decoration: none;
}
@media screen and (max-width: 520px) {
    nav ul li {
        float: none;
        display: none;
    }
    nav {
        max-height: 48px;
    }
    nav ul {
        position: relative;
        z-index: 900;
    }
    .landingfill {
        height: 200px;
        background-image: url(/assets/images/header.jpeg);
    }
    .landingfill > figure {
        display: none;
    }
    .landingpage {
        height: auto;
    }
    .github-icon {
        background: none;
        mask: none;
        -webkit-mask-image: none;
        width: auto; height: auto;
        text-indent: 0;
    }
    .patreon-icon {
        background: none;
        mask: none;
        -webkit-mask-image: none;
        width: auto; height: auto;
        text-indent: 0;
    }
    .menutext {
        display: block;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        color: whitesmoke;
    }
    .menucheck:checked ~ li {
        display: block;
    }
    .fixednav {
        position: relative;
    }
    .responsivepad {
        display: none;
    }
}