/*
Basiic font from: https://cinni.net/
*/
@font-face {
    font-family: "Basiic";
    src: url("basiic.ttf") format("truetype");
}
::selection {
    color: var(--c2);
    background: var(--c4);
}
summary::marker {
    /* ⯌  */
  content: "\2BCC\00A0";
}
html {
    width: 100vw;
    height: 100vh;
    cursor: url('cur1.png'), default;
    font-family: 'Basiic', monospace;
    color: var(--c4);
    background: var(--c5);
}
hr {
    border: none;
    border-top: 2px dashed var(--c4);
}
a {
    cursor: url('cur2.png'), pointer;
    color: inherit;
    text-decoration: none;
}
img {
    image-rendering: pixelated;
}
details summary {
    cursor: url('cur2.png'), pointer;
    padding: 5px;
}
body, h1, h2, h3, h4, h5, h6, p, a {
    margin: 0;
}
body {
    margin: 5px auto;
    max-width: 600px;
}
nav, nav div, nav div section {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}
nav {
    padding: 5px;
    background: 
        linear-gradient(to bottom, transparent 2px, var(--c2) 2px, var(--c2) 5px, transparent 5px),
        linear-gradient(to top, var(--c4) 2px, var(--c3) 2px, var(--c3) 5px, var(--c4) 5px);
    border: 2px dashed var(--c5);
}
nav header img {
    margin: 5px 0px;
    width: 100px;
    height: 100px;
}
nav header {
    margin: -5px;
    writing-mode: sideways-lr;
    text-align: center;
    text-decoration: underline dashed;
    color: var(--c2)
}
nav div section {
    max-width: 450px;
    flex-wrap: wrap;
    justify-content: right;
}
nav div section a p:before {
    content:'> '
}
nav div section a p {
    padding: 5px;
    width: 100px;
    height: 20px;
    align-content: center;
    color: var(--c1);
    border-left: 2px dashed var(--c5);
    border-bottom: 2px dashed var(--c5);
}
nav div section a:hover p {
    color: var(--c4);
    background: var(--c1)
}

main h1, footer {
    margin: 5px auto;
    padding: 5px;
    text-align: center;
    color: var(--c4);
    background: var(--c1);
    border: 2px dashed var(--c5);
}
main {
    color: var(--c1);
}
main a {
    color: var(--c2);
}
main article {
    padding: 5px;
    margin-left: 30px;
}
main article h3 {
    margin-left: -20px;
    padding-left: 5px;
    border-left: 2px dashed var(--c2);
}
main table tr th:first-child {
    vertical-align: first;
    text-align: right;
}
main table tr th:last-child {
    vertical-align: first;
    text-align: left;
}
main article div.exit {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
main article div.exit a img {
    margin: 5px;
    image-rendering: pixelated;
}
main article div.exit a img.fix {
    width: 88px;
    height: 31px;
}
main article div.exit a p {
    margin: 5px;
    width: 88px;
    height: 31px;
    font-size: 0.8em;
    font-weight: bold;
    text-align: center;
    align-content: center;
    color: var(--c5);
    background: var(--c2);
    border: 2px dashed var(--c5);
}
main article div.exit a:hover p {
    color: var(--c1);
    background: var(--c4);
}
@media screen and (min-width: 700px) {
    body {
        max-width: 1000px;
        display: flex;
        margin: 5px auto;
        align-items: flex-start;
    }
    nav, nav div, nav div section {
        display: unset;
        flex-direction: unset;
        align-items: unset;
    }
    footer {
        width: fit-content;
        writing-mode: sideways-lr;
    }
}