:root {
    --section-separator: 2em;
    --font-text: 'Space Mono';
    --font-headings: sitefont;
}

@font-face {
    font-family: 'sitefont';
    src: url('/font/DejaVuSansMono.woff2');
    font-display: block;
}

@font-face {
    font-family: 'sitefont';
    src: url('/font/DejaVuSansMono-Bold.woff2');
    font-weight: bold;
    font-display: block;
}

@keyframes bouncy-anim {
    0% {
        transform: translate(0px, 0px);
    }

    50% {
        transform: translate(0px, 4px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}


.fade-in-anim {
    animation-name: fadein 1s ease-in;
}

@keyframes fadein {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


/* Hide filter SVGs used for fonts and such. */
.hidden {
    opacity: 0;
    position: absolute;
    left: -9999px;
    top: 0;
    height: 0;
    width: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.banner-block {
    display: inline-block;
}

.navbar {
    display: flex;
    flex-direction: column;
    font-size: 1.25em;
    text-align: left;
}

header h1 {
    margin-bottom: 0.15em;
}

header {
    text-align: left;
    margin-bottom: var(--section-separator);
}


.datelist {
    list-style-type: none;
    padding-inline-start: 0;
}

@media screen and (min-width: 35em) {
    .navbar {
        flex-direction: row;
        text-align: center;
        margin-left: 0;
    }

    .navbar>a {
        padding: 0em .75em;
    }

    header {
        text-align: center;
    }

    .datelist {
        padding-inline-start: 2rem;
    }
}

@media screen and (min-width: 100em) {
    html {
        font-size: calc(0.5em + 0.5vw);
    }

    body {
        min-width: 50%;
    }
}

.right-text {
    text-align: right;
}

html {
    font-family: var(--font-text), sitefont, monospace;
    margin: 0 auto;
    padding: 0 8px;
}

body {
    background: var(--base);
    color: var(--text);
    width: 60em;
    max-width: 100%;
    margin: auto;
}

footer {
    text-align: center;
}

footer img {
    width: 1em;
    height: 1em;
}

main h1 {
    font-size: 1.5em;
}

main h2 {
    font-size: 1.25em;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: var(--font-headings), monospace;
    color: var(--text-heading);
    filter: url(#fuzz);
}

main section {
    margin-bottom: var(--section-separator);
}

a {
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    filter: url(#fuzz);
    color: var(--anchor-default);
    font-family: var(--font-headings), monospace;
}

.highlight-box {
    color: var(--base);
    padding: 0.1em 0.25em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background: var(--highlight);
    filter: url(#fuzz);
}

.banner-block > h1 > a:focus-visible {
    outline: 4px dashed var(--highlight);
    outline-offset: 0.35rem;
 }

.highlight-box h1 {
    color: var(--base);
}

.highlight {
    color: var(--highlight)
}

a:hover,
a:focus {
    animation: 0.75s linear infinite bouncy-anim;
    filter: url(#fuzz-live);
}

button {
    font-family: sitefont, monospace;
    font-weight: bold;
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--color-primary);
    color: var(--base);
    /*text-align: center;*/
    border-radius: 8px;
    margin: 0.25rem;
    filter: url(#fuzz);
    outline-offset: 2px;
}

/*
button:focus {
    outline: 4px dashed var(--highlight);
    outline-offset: 2px;
}
*/

*:focus-visible {
   outline: 4px dashed var(--highlight);
}

button:hover {
    outline: 4px dashed var(--highlight);
    animation: 0.75s linear infinite bouncy-anim;
}

button:active {
    outline: 4px dashed var(--highlight);
    animation: 0.75s linear infinite bouncy-anim;
    background-color: var(--color-quaternary);

}

button:disabled {
    outline: none;
    animation: none;
    background-color: var(--color-primary);
    opacity: 0.5;
}