@charset "utf-8";

@font-face {
    font-family: 'Hack-Regular';
    src: url('fonts/Hack-Regular.ttf');
}

:root {
    /* boxes and headings: */
    --box1-comment: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAABiAQMAAAAsisI4AAAABlBMVEUTRFZQUHoF54zLAAAAAXRSTlMAQObYZgAAADRJREFUKM9jYCAaMB8AY3TK/g8G9f+//Z///4EUAwMyBRbEqgGr0bQHOHw0pCg6hsvAxzQA7+WCycmpv9AAAAAASUVORK5CYII=) 32 16 round;
    --box1-heading: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAABiAQMAAAAsisI4AAAABlBMVEXoFlZmsP/bK+TbAAAAAXRSTlMAQObYZgAAADRJREFUKM9jYCAaMB8AY3TK/g8G9f+//Z///4EUAwMyBRbEqgGr0bQHOHw0pCg6hsvAxzQA7+WCycmpv9AAAAAASUVORK5CYII=) 32 16 round;
    --box2-comment: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAABiAQMAAAAsisI4AAAABlBMVEURalVQUHokaxNLAAAAAXRSTlMAQObYZgAAAClJREFUKM9jYCAaMB8AYyKo///t//z/j50i3hTaA+LdMnipgQ0XOsc0AMGuePGoxt1xAAAAAElFTkSuQmCC) 32 16 round;
    --box2-heading: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAABiAQMAAAAsisI4AAAABlBMVEXzCVZmsP9QihbQAAAAAXRSTlMAQObYZgAAAClJREFUKM9jYCAaMB8AYyKo///t//z/j50i3hTaA+LdMnipgQ0XOsc0AMGuePGoxt1xAAAAAElFTkSuQmCC) 32 16 round;
    --box3-comment: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAABiAQMAAAAsisI4AAAABlBMVEUAAABQUHrDsFIJAAAAAXRSTlMAQObYZgAAADpJREFUKM9jYCAaMB8AY/wUOw+Q+v+ff87//0BK/gcyZfkBSDEfMHhA0BSIZTQHRPlokFMDFi4DEdMALNd5Y+3TLEYAAAAASUVORK5CYII) 32 16 round;
    --box3-heading: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAABiAQMAAAAsisI4AAAABlBMVEUAAABmsP8g+k9oAAAAAXRSTlMAQObYZgAAADpJREFUKM9jYCAaMB8AY/wUOw+Q+v+ff87//0BK/gcyZfkBSDEfMHhA0BSIZTQHRPlokFMDFi4DEdMALNd5Y+3TLEYAAAAASUVORK5CYII=) 32 16 round;
    /* base16 colors: */
    --color-black: #00002a;
    --color-blue: #66b0ff;
    --color-cyan: #0ef0f0;
    --color-cyan1: #32a6a6;
    --color-gray1: #30305a;
    --color-gray2: #20204a;
    --color-gray: #50507a;
    --color-green1: #3da651;
    --color-green: #59f176;
    --color-magenta: #fc4cb8;
    --color-orange: #fc8d28;
    --color-red1: #b32e2e;
    --color-red: #ff4242;
    --color-white1: #d0d0fa;
    --color-white: #f5f5ff;
    --color-yellow: #f3e877;
    /* extra colors: */
    --color-pink: #f10596;
    --color-purple: #f003ef;
    /* syntax colors: */
    --color-active: #0ef0f0;
    --color-bar: #30305a;
    --color-bg: #00002a;
    --color-bg1: #20204a;
    --color-code: #f5f5ff;
    --color-comment: #50507a;
    --color-em: #fc4cb8;
    --color-fg: #d0d0fa;
    --color-heading: #66b0ff;
    --color-link: #32a6a6;
}

html {
    color-scheme: only dark;
}

* {
    border: none;
    font-family: Hack, Hack-Regular, monospace;
    font-size: 16px;
    margin: 0px;
    padding: 0px;
    text-align: left;
    text-decoration: none;
    -webkit-text-size-adjust: 100%;
}

body, header, main, footer {
    display: block;
}

/*/* body ::*/
body {
    background-color: var(--color-bg);
    color: var(--color-fg);
    font-style: none;
    font-weight: normal;
    min-width: 440px;
    padding-left: 1ch;
    padding-right: 1ch;
}

/*/* footer ::*/
footer {
    color: var(--color-comment);
    text-align: right;
}

/*/* header, header nav ::*/
header {
    color: var(--color-heading);
    overflow: hidden;
}

header nav {
    float: right;
    display: table;
    font-weight: bold;
    text-align: right;
    clear: right;
}

header nav + nav, header pre ~ nav {
    border-top: solid;
    border-image: var(--box2-comment);
    border-width: 2ch;
    color: var(--color-comment);
    border-color: var(--color-comment);
}

header.center nav {
    float: none;
    text-align: center;
    display: block;
}

header nav :not(:first-child) {
    border-left: solid;
    border-image: var(--box2-comment);
    border-color: var(--color-comment);
    border-width: 2ch 1ch;
    padding-left: 1ch;
}

header nav :not(:last-child)::after {
    content: " ";
}

header pre {
    display: inline-block;
}

/*/* main, main nav ::*/
main nav {
    float: right;
    font-weight: bold;
    margin-left: 1ch;
}

main nav, div.box, div.code {
    border-style: solid;
    border-image: var(--box2-comment);
    border-color: var(--color-comment);
    border-width: 2ch 1ch;
    display: table;
    padding-left: 1ch;
    padding-right: 1ch;
    vertical-align: top;
}

main nav a, main nav .active {
    display: table;
}

main nav hr, div.box hr, div.code hr {
    margin-left: -1ch;
    margin-right: -1ch;
}

main nav div, div.box div, div.code div {
    margin-left: 2ch;
}

/*/* links ::*/
a {
    color: var(--color-link);
}

a:hover, .active {
    color: var(--color-active);
}

/*/* figure, figure img ::*/
figure {
    display: inline-table;
    margin-right: 1ch;
    vertical-align: top;
    width: 204px;
}

figure img {
    display: table;
    max-width: 200px;
}

figure.large {
    width: 404px;
}

figure.large img {
    max-width: 400px;
}

img {
    border: 2px solid transparent;
    max-width: 100%;
    height: auto;
}

a:hover img, .active img {
    border: 2px solid var(--color-active);
}

/*/* headings, hr ::*/
h1, h2, h3, h4, h5, h6 {
    border-color: var(--color-heading);
    color: var(--color-heading);
    display: table;
    font-weight: bold;
}

h1, h2, h3 {
    border-bottom: solid;
    border-width: 2ch;
}

h1 {
    border-image: var(--box1-heading);
}

h2 {
    border-image: var(--box2-heading);
}

h3 {
    border-image: var(--box3-heading);
}

h4, h5, h6 {
    border: none;
}

hr {
    clear: both;
    border-bottom: solid;
    border-image: var(--box2-comment);
    border-width: 2ch;
    color: var(--color-comment);
    border-color: var(--color-comment);
}

hr.hr1 {
    border-image: var(--box1-comment);
}

hr.hr2 {
    border-image: var(--box2-comment);
}

hr.hr3 {
    border-image: var(--box3-comment);
}

/*/* lists ::*/
ol, ul {
    margin-left: 0;
    padding-left: 2ch;
}

ul {
    list-style-type: none;
    text-indent: -2ch;

}

ul li:before {
    font-weight: bold;
    content: "- ";
}

/*/* div classes ::*/
div.col {
    display: inline-table;
}

div.col nav {
    float: none;
}

div.code {
    color: var(--color-code);
}

div.code pre {
    white-space: pre-wrap;
}

div.box.inline, div.code.inline {
    display: inline-table;
}

div.box h1, nav h1 {
    background-color: var(--color-bg);
    border: none;
    color: var(--color-comment);
    display: inline-table;
    font-weight: bold;
    position: relative;
}

div.box h1:first-child, nav h1:first-child {
    top: -2.2ch;
}

div.box h1:first-child + *, nav h1:first-child + * {
    margin-top: -2ch;
}


/*/* margins ::*/
header, main, p, div.box, div.code, div.col nav, .google-maps, .margin {
    margin-bottom: 2ch;
}

figure {
    margin-bottom: 1.5ch;
}

figure + :not(figure) {
    margin-top: .5ch;
}

p + div.box, p + div.code {
    margin-top: -2ch;
}

.nomargin, p.nomargin, div.box.nomargin, div.code.nomargin, :last-child {
    margin-bottom: 0ch;
}

/*/* margins (v2) ::*/
/*main, footer, .margin, p, h1, h2, h3, h4, h5, h6 {*/
    /*margin-top: 2ch;*/
/*}*/

/*figure {*/
    /*margin-bottom: 1.5ch;*/
/*}*/

/*figure + :not(figure) {*/
    /*margin-top: .5ch;*/
/*}*/

/*main nav + *, *:first-child, .nomargin + *,*/
/*h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {*/
    /*margin-top: 0ch;*/
/*}*/

/*/* text decoration ::*/
b, .bold {
    font-weight: bold;
}

em, .emph {
    color: var(--color-em);
    font-style: italic;
}

i, .ital {
    font-style: italic;
}

strong, .strg {
    color: var(--color-heading);
    font-weight: normal;
}

.comment {
    color: var(--color-comment);
}

.heading {
    color: var(--color-heading);
    font-weight: bold;
}

.warn {
    color: var(--color-yellow);
    font-weight: bold;
}

.error {
    color: var(--color-red);
    font-weight: bold;
}

.prompt, .noselect, div.box h1, nav h1 {
    color: var(--color-comment);
    font-weight: bold;
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}

.red {
    color: var(--color-red);
}
.orange {
    color: var(--color-orange);
}
.yellow {
    color: var(--color-yellow);
}
.green {
    color: var(--color-green);
}
.cyan {
    color: var(--color-cyan);
}
.blue {
    color: var(--color-blue);
}
.pink {
    color: var(--color-pink);
}
.purple {
    color: var(--color-purple);
}

/*/* formatting ::*/
.center {
    text-align: center;
}

.left {
    text-align: center;
}

.center pre, .inline pre, .inline {
    display: inline-block;
}

.float-left {
    display: table;
    margin-right: 1ch;
    float: left;
}

.float-right {
    display: table;
    margin-left: 1ch;
    float: right;
}

/*/* google maps ::*/
.google-maps {
    position: relative;
    padding-bottom: 60%;
    overflow: hidden;
}

.google-maps iframe {
    position: absolute;
    width: 100%;
    height: 100%;
}

/*/* dynamic content ::*/
@media only screen and (max-width: 980px) {
    .wide5, .wide5 * {
        font-size: 14px;
    }
}

@media only screen and (max-width: 880px) {
    .wide4, .wide4 * {
        font-size: 14px;
    }
    .wide5, .wide5 * {
        font-size: 12px;
    }
}


@media only screen and (max-width: 780px) {
    .wide3, .wide3 * {
        font-size: 14px;
    }
    .wide4, .wide4 * {
        font-size: 12px;
    }
    .wide5, .wide5 * {
        font-size: 10px;
    }
}

@media only screen and (max-width: 700px) {
    .wide2, .wide2 * {
        font-size: 14px;
    }
    .wide3, .wide3 * {
        font-size: 12px;
    }
    .wide4, .wide4 * {
        font-size: 10px;
    }
    .wide5, .wide5 * {
        font-size: 8px;
    }
}

@media only screen and (max-width: 620px) {
    .wide, .wide * {
        font-size: 14px;
    }
    .wide2, .wide2 * {
        font-size: 12px;
    }
    .wide3, .wide3 * {
        font-size: 10px;
    }
    .wide4, .wide4 * {
        font-size: 8px;
    }
    .wide5, .wide5 * {
        font-size: 6px;
    }
}

/*/* Safari BS ::*/
@media not all and (min-resolution:.001dpcm) { @media {
    body {
        min-height: 120vh;
    }

    header nav :not(:first-child) {
        border: none;
        border-left: solid;
        border-color: var(--color-comment);
        border-width: .25ch;
        padding-left: 1.4ch;
        margin-left: .4ch;
    }

    h1, h2, h3 {
        border: none;
        border-color: var(--color-heading);
        border-width: .15ch;
        margin-bottom: .85ch;
        padding-bottom: .85ch;
    }

    h1 {
        border-bottom: solid;
    }

    h2 {
        border-bottom: dashed;
    }

    h3 {
        border-bottom: dotted;
    }

    hr, hr.hr1, hr.hr2, hr.hr3 {
        border: none;
        border-bottom: dashed;
        border-width: .3ch;
        margin-bottom: 0.8ch;
        margin-top: 1ch;
    }

    hr.margin {
        margin-bottom: 2.7ch;
    }

    hr.hr1 {
        border-bottom: solid;
    }

    hr.hr2 {
        border-bottom: dashed;
    }

    hr.hr3 {
        border-bottom: dotted;
    }

    main nav hr, div.box hr, div.code hr {
        margin-left: -.6ch;
        margin-right: -.6ch;
    }

    main nav, div.box, div.code {
        border: none;
        border-color: var(--color-comment);
        border-style: dashed;
        border-width: .3ch;
        margin: .8ch .4ch 2.4ch;
        padding: .8ch 1.3ch;
    }

    p + div.box, p + div.code {
        margin-top: -.8ch;
    }

    div.box.nomargin, div.code.nomargin {
        margin-bottom: .4ch;
    }
}}