figcaption {
        display: none;
}

@font-face {
        font-family: "Noto Sans Mono";
        src: url('/font/noto-sans-mono.woff2'), format('woff2');
}

@font-face {
        font-family: "Noto Sans";
        src: url('/font/noto-sans.woff2'), format('woff2');
}

:root {
        --dz:  0em;
        --dxs: 0.25em;
        --ds:  0.5em;
        --dm:  0.75em;
        --dl:  1.25em;
        --dxl: 2em;
        --dxxl: 3.25em;

        --oracleWidth: 18;
        --tileSize: 100;
}

body {
        background-color: var(--bg1);
        color: var(--fg2);
        font-family: 'Noto Sans', sans-serif;
        font-size: 12px;
        line-height: 120%;
        margin-left:auto;
        margin-right:auto;
        text-align: left;
}

code, #eightball {
        font-family: 'Noto Sans Mono', monospace;
        margin-left:auto;
        margin-right:auto;
        width: calc(var(--oracleWidth) * 1ch);
}

#eightball {
        text-align: center;
        margin-top: var(--dm);
        margin-bottom: var(--dl);
}

input {
        display: block;
        margin-left: auto;
        margin-right: auto;
        border: dashed;
        cursor: pointer;
        background-color: var(--bg2);
        color: var(--hl2);
        border-color: var(--hl2);
        margin-top: var(--ds);
        margin-bottom: var(--ds);
}

input:hover {
        color: var(--hl1);
        border-color: var(--hl1);
}

img {
        max-width: 100%;
        max-height: 100%;
}

a:link {
        color: var(--hl2);
}

a:visited {
        color: var(--hl1);
}

a:hover {
        color: var(--hl1);
}

em {
        text-decoration: underline;
}

#headCell {
        background-color: var(--hl3);
        border: 1px solid var(--hl4);
        color: var(--fg2);
        border-radius: var(--dm);
        padding: var(--dz);
        text-align:center;
}

h1 {
        color: var(--fg1);
        font-size: 35px;
        margin: var(--ds);
        font-family: "Noto Sans Mono";
}

h2 {
        margin-top: var(--dl);
        margin-bottom: var(--dm);
}

table td, table td * {
        vertical-align: top;
}

blockquote {
        font-style: italic;
        margin-top: var(--ds);
        margin-bottom: var(--ds);
}

.grid {
        margin: auto;
        margin-top: var(--dxl);
        margin-bottom: var(--dl);
}

.main {
        padding: var(--dxxl);
        padding-top: var(--dz);
        padding-bottom: var(--dm);
}

.left {
        background-color: var(--bg2);
        border: 1px solid var(--hl4);
        border-radius: 0 0 var(--dm) var(--dm);
        margin-bottom: var(--ds);
}

.left p, .left ul {
        margin: var(--dz);
}

.left nav {
        padding-left: var(--dm);
}

.applet {
        font-family: 'Noto Sans Mono', monospace;
        padding: var(--dm);
}

.right {
        width: 600px;
        background-color: var(--bg2);
        color: var(--bg);
        border: 1px solid var(--hl4);
        border-radius: 0 0 var(--dm) var(--dm);
        margin-left:auto;
        margin-right:auto;
}

.right p, .right figure, .right ul {
        margin: var(--dz);
        margin-bottom: var(--dm);
        margin-top: var(--dm);
}

.right figure {
        margin: var(--dl);
        margin-left: auto;
        margin-right: auto;
}

.right pre {
        padding-left: var(--dl);
}


.banner {
        background-color: var(--hl3);
        border: 1px solid var(--hl4);
        border-bottom-width: 0px;
        border-radius: var(--dm) var(--dm) 0 0;
        color: var(--fg2);
        padding: var(--dxs);
        padding-left: var(--ds);
}

.banner p {
        margin: var(--dz);
}

.banner a {
        color: var(--fg1);
}

.cont {
        text-align: right;
}

.footer {
        text-align: right;
}

#background {
        position: fixed;
        z-index: -1;
        top: 0px;
        left: 0px;
        width: 100vw;
        height: 100vh;
        background-image: var(--bg-img);
}

.tile {
        min-width: calc(var(--tileSize) * 1px);
        min-height: calc(var(--tileSize) * 1px);
        position: absolute;
        background-image: var(--bg-img);
}

.flipTile {
        transform: scale(-1, 1);
}

#shibbles {
        position: fixed;
        pointer-events: none;
        top: 0px;
        left: 0px;
        width: 100vw;
        height: 100vh;
}