@font-face {
    font-family: "IBM VGA 9x16";
    src: url(../fonts/WebPlus_IBM_VGA_9x16.woff) format("woff");
    font-weight: normal;
    font-style: normal;
}

/* color scheme */
:root {
    --design-max-width: 1200px;
    --design-sidebar-width: 200px;

    --bg-color: #111;
    --bg-color-2: #333;
    --txt-color: #eee;
    --link-nonvisited: #C4C8F0;
    --link-visited: #E4D0F4;
    
    --quotes: #79C4BF;
}
@media (prefers-color-scheme: light) {
    :root {
        --bg-color: #eee;
        --bg-color-2: #ccc;
        --txt-color: #000;
        --link-nonvisited: #0C1048;
        --link-visited: #380860;
    }
}
@media (prefers-color-scheme: dark) {
    .svgicon {
        filter: invert(100%);
    }

    img.needsbg {
        background-color: #888;
    }
}

/* globals */
html {
    box-sizing: border-box;
    font-size: 100%;
}
*, *::before, *::after {
    box-sizing: inherit;
}
* {
    margin: 0;
}

body {
    margin: 0 auto;
    max-width: var(--design-max-width);
    font-family:
        -apple-system, BlinkMacSystemFont,
        "Segoe UI",
        "Liberation Sans",
        sans-serif;

    background-color: var(--bg-color);
    color: var(--txt-color);
}
code,kbd,pre,samp {
    font-size: 16px;
    font-family: "IBM VGA 9x16";
}

a {
    text-decoration: underline dashed;
    color: var(--link-nonvisited);
}
a:visited {
    color: var(--link-visited);
}
a:hover {
    text-decoration: underline;
}
img {
    width: 100%;
    object-fit: scale-down;
}

.nobr {
    white-space: nowrap;
}
p:has(.nopad) {
    margin-bottom: 0em !important;
}
.smallcaps {
    font-variant-caps: all-small-caps;
}
.tabnum {
    font-variant-numeric: tabular-nums;
}

/* embedded code (monospace) */
code {
    background-color: #5A5475;
    color: #F8F8F2;
    padding: 2px;
    border-radius: 4px;
}
pre code {
    background-color: unset;
    color: unset;
    padding: unset;
    border-radius: unset;
}
.highlight {
    margin-bottom: 1rem;
    padding: 4px;
    border-radius: 8px;
    border: 1px solid #888;
    line-height: 1.1em;
    max-width: fit-content;
    overflow-x: auto;
}
.highlight pre {
    margin-right: 10em;
}

/* actual blog posts */
main header {
    margin: 1.5rem 0;
}
main header h1 {
    font-size: 2.3rem;
}
main header a,
main header a:visited {
    text-decoration: none;
    color: var(--txt-color);
}
main header a:hover {
    text-decoration: underline 1px;
}
main header .article_date {
    font-style: italic;
    margin: 8px;
}

main .md_content {
    line-height: 1.3em;
}
main .md_content p,
main .md_content div,
main .md_content ol,
main .md_content ul {
    margin-bottom: 1em;
}
main .md_content ol ol,
main .md_content ol ul,
main .md_content ul ol,
main .md_content ul ul {
    margin-bottom: 0;
}
main .md_content p:has(+ol),
main .md_content p:has(+ul) {
    margin-bottom: 0.4em;
}
main .md_content h1,
main .md_content h2,
main .md_content h3,
main .md_content h4,
main .md_content h5,
main .md_content h6 {
    font-weight: 500;
    margin-bottom: 1rem;
}
main .md_content h1 {
    font-size: 2rem;
    line-height: 1.3em;
}
main .md_content h2 {
    font-size: 1.5rem;
    line-height: 1.3em;
}
main .md_content h3 {
    font-size: 1.25rem;
    line-height: 1.3em;
}
main .md_content h4 {
    font-size: 1.125rem;
    line-height: 1.3em;
}
main .md_content h5,
main .md_content h6 {
    font-size: 1rem;
    line-height: 1.3em;
}

main .md_content blockquote {
    border-radius: 0.2rem;
    border-inline-start: 0.25rem solid var(--quotes);
    padding-inline-start: 0.5rem;
    background-color: var(--bg-color-2);
}

main .aside_q,
main .aside_a {
    display: flex;
    text-align: justify;
    background-color: var(--bg-color-2);
    border-radius: 10px;
    padding: 8px;
}
main .aside_a *:last-child {
    margin-bottom: 0;
}
main .aside_q::before {
    content: "0x1";

    display: flex;
    justify-content: center;
    align-items: center;

    border: 1px dashed var(--txt-color);
    min-width: 3lh;
    height: 3lh;
    border-radius: calc(3lh / 2);

    margin-right: 1lh;
}
main .aside_a::after {
    content: "𝟘x𝔽";

    display: flex;
    justify-content: center;
    align-items: center;

    border: 4px double var(--txt-color);
    min-width: 3lh;
    height: 3lh;
    border-radius: calc(3lh / 2);

    margin-left: 1lh;
}

/* nav bar */
.tophdr {
    margin: 16px 0;
}
.tophdr > nav > ul {
    display: flex;
    justify-content: space-evenly;
    padding: 0;
    list-style: none;
}
.tophdr > nav > ul li {
    flex: 1;
    text-align: center;
    font-size: 16px;
    font-family: "IBM VGA 9x16";
}
.tophdr > nav > ul li a {
    text-decoration: none;
    color: var(--txt-color);
}
.tophdr > nav > ul li a::before {
    content: "[ ";
}
.tophdr > nav > ul li a::after {
    content: " ]";
}
.tophdr > nav > ul li.active a {
    background-color: var(--txt-color);
    color: var(--bg-color);
}
@media (max-width: 420px) {
    .tophdr > nav > ul {
        flex-direction: column;
    }
}

/* overall layout */
.maindiv {
    display: flex;
}
.maindiv main {
    flex: 1;
    max-width: calc(min(100vw, var(--design-max-width)) - var(--design-sidebar-width));
    padding: 4px;
}
.maindiv .sidebar {
    flex: 0 0 var(--design-sidebar-width);
}
@media (max-width: 768px) {
    .maindiv {
        flex-direction: column;
    }
    .maindiv main {
        max-width: unset;
    }
    .maindiv .sidebar {
        flex: 0 0 auto;
    }
}

/* all posts page */
.archives_hdr {
    font-size: 1.75rem;
    font-weight: 500;
    margin-bottom: 1em;
}
.archives {
    display: grid;
    grid-template-columns: auto auto 16px;
}
.archives a {
    grid-column: 1;
}
.archives span {
    grid-column: 2;
}
.archives div {
    grid-column: 1;
    font-size: smaller;
    font-style: italic;
    margin-left: 20px;
    margin-bottom: 0.8em;
}
@media (max-width: 600px) {
    .archives {
        grid-template-columns: auto;
    }
    .archives span {
        grid-column: 1;
    }
}

/* sidebar links */
.sidebar {
    padding: 4px;
    margin-top: 48px;
}
.sidebar header {
    font-size: 2rem;
    margin-bottom: 0.5em;
}
.sidebar ul {
    list-style: none;
    padding: 0;
}
.sidebar ul li {
    margin-bottom: 0.2em;
}
@media (max-width: 768px) {
    .sidebar {
        margin-top: 24px;
        margin-bottom: 8px;
    }
}

/* footer */
footer {
    font-size: 9px;
    margin-bottom: 2px;
}
footer .buttons {
    line-height: 0;
}
footer .buttons img {
    width: unset;
    object-fit: none;
}

/* specials */
table.ascii {
    width: 100%;
    margin-bottom: 2rem;
    display: grid;

    --table-items-per-row: 8;
    grid-template-columns: repeat(calc(var(--table-items-per-row)*3), 1fr);
    grid-template-rows: 1fr 1fr;
}
table.ascii caption {
    grid-column-start: 0;
    grid-column-end: span calc(var(--table-items-per-row)*3);
    font-size: 2rem;
}
table.ascii thead,
table.ascii thead tr {
    display: contents;
}
table.ascii thead tr th {
    background-color: var(--bg-color-2);
}
table.ascii thead tr th:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: span 1;
}
table.ascii thead tr th:nth-child(2) {
    grid-column-start: 2;
    grid-column-end: span 1;
}
table.ascii thead tr th:nth-child(3) {
    grid-column-start: 3;
    grid-column-end: span 1;
}
table.ascii thead tr th:nth-child(4) {
    grid-column-start: 4;
    grid-column-end: span calc(var(--table-items-per-row)*3 - 3);
    background-color: unset;
}
table.ascii tbody,
table.ascii tbody tr {
    display: contents;
}
table.ascii tbody tr td {
    padding-left: 2px;
    padding-right: 2px;
}
table.ascii tbody tr td.err {
    background-color: #ff000040;
}
table.ascii tbody tr:hover td {
    background-color: var(--bg-color-2);
}
@media (max-width: 1200px) {
    table.ascii {
        --table-items-per-row: 4;
    }
}
@media (max-width: 600px) {
    table.ascii {
        --table-items-per-row: 2;
    }
}
@media (max-width: 400px) {
    table.ascii {
        --table-items-per-row: 1;
    }
    table.ascii thead tr th.hdrhax {
        display: none;
    }
}