@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/IBMPlexSans-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/IBMPlexSans-Italic.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/IBMPlexSans-Bold.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/IBMPlexSans-BoldItalic.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Serif";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/IBMPlexSerif-Bold.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2");
}

:root {
    --text-font-sans: "IBM Plex Sans", sans-serif;
    --text-font-serif: "IBM Plex Serif", serif;
    --text-font-mono: "IBM Plex Mono", monospace;
    --text-color: #000;
    --text-highlight: cornflowerblue;
    --table-border: #ddd;
    --table-header-background: #f2f2f2;
    --quote-background: #f2f6fd;
    --code-base00: #1d1f21;
    --code-base01: #282a2e;
    --code-base02: #373b41;
    --code-base03: #969896;
    --code-base04: #b4b7b4;
    --code-base05: #c5c8c6;
    --code-base06: #e0e0e0;
    --code-base07: #fff;
    --code-base08: #cc6666;
    --code-base09: #de935f;
    --code-base0a: #f0c674;
    --code-base0b: #b5bd68;
    --code-base0c: #8abeb7;
    --code-base0d: #81a2be;
    --code-base0e: #b294bb;
    --code-base0f: #a3685a;
}

body {
    color: var(--text-color);
    font-family: var(--text-font-sans);
    font-size: 18px;
    margin: 0 auto;
    padding: 16px 16px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--text-font-serif);
}

code,
kbd,
pre,
samp {
    font-family: var(--text-font-mono);
}

.code-block {
    overflow: hidden;
    margin: 24px 0;
    border-radius: 8px;
    background: var(--code-base00);
}

.code-block__header {
    padding: 8px 16px;
    color: var(--code-base04);
    background: var(--code-base01);
    font-family: var(--text-font-mono);
    font-weight: 700;
}

.code-block .highlight {
    margin: 0;
}

.code-block pre {
    overflow-x: auto;
    margin: 0;
    padding: 16px;
}

.chroma {
    color: var(--code-base05);
    background: var(--code-base00);
}

.chroma .err,
.chroma .gd {
    color: var(--code-base08);
}

.chroma .lntd,
.chroma .lntable {
    border: 0;
}

.chroma .lnt,
.chroma .ln {
    color: var(--code-base03);
}

.chroma .hl {
    background: var(--code-base02);
}

.chroma .k,
.chroma .kc,
.chroma .kd,
.chroma .kn,
.chroma .kp,
.chroma .kr,
.chroma .kt,
.chroma .ow {
    color: var(--code-base0e);
}

.chroma .na,
.chroma .nf,
.chroma .fm {
    color: var(--code-base0d);
}

.chroma .nb,
.chroma .bp,
.chroma .nt {
    color: var(--code-base0c);
}

.chroma .nc,
.chroma .nn {
    color: var(--code-base0a);
}

.chroma .no,
.chroma .nv,
.chroma .vc,
.chroma .vg,
.chroma .vi,
.chroma .vm {
    color: var(--code-base08);
}

.chroma .m,
.chroma .mb,
.chroma .mf,
.chroma .mh,
.chroma .mi,
.chroma .il,
.chroma .mo {
    color: var(--code-base09);
}

.chroma .s,
.chroma .sa,
.chroma .sb,
.chroma .sc,
.chroma .dl,
.chroma .sd,
.chroma .s2,
.chroma .sh,
.chroma .sx,
.chroma .s1,
.chroma .ss {
    color: var(--code-base0b);
}

.chroma .se,
.chroma .si,
.chroma .sr {
    color: var(--code-base0c);
}

.chroma .c,
.chroma .ch,
.chroma .cm,
.chroma .c1,
.chroma .cs,
.chroma .cp,
.chroma .cpf {
    color: var(--code-base03);
    font-style: italic;
}

.chroma .ge {
    font-style: italic;
}

.chroma .gs {
    font-weight: 700;
}

.chroma .gr {
    color: var(--code-base08);
}

.chroma .gh,
.chroma .gu {
    color: var(--code-base0d);
}

.chroma .gi {
    color: var(--code-base0b);
}

.chroma .gl {
    text-decoration: underline;
}

.table-wrapper {
    overflow-x: auto;
    width: 100%;
    margin: 24px 0;
}

.table-wrapper table {
    width: 100%;
    border-collapse: collapse;
}

.table-wrapper thead {
    background: var(--table-header-background);
}

.table-wrapper th,
.table-wrapper td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--table-border);
}

blockquote {
    position: relative;
    margin: 24px 0;
    padding: 16px 16px 16px 40px;
    border-left: 3px solid var(--text-highlight);
    background: var(--quote-background);
    font-style: italic;
}

blockquote::before {
    position: absolute;
    top: 16px;
    left: 14px;
    color: var(--text-highlight);
    content: ">";
}

blockquote > :first-child {
    margin-top: 0;
}

blockquote > :last-child {
    margin-bottom: 0;
    color: var(--text-highlight);
    font-style: normal;
    text-align: left;
}

blockquote > :last-child em {
    font-style: normal;
}

main ul,
main ol,
main dl {
    margin: 24px 0;
}

main ul,
main ol {
    padding-left: 24px;
}

main li::marker {
    color: var(--text-highlight);
}

main li + li {
    margin-top: 8px;
}

main li > ul,
main li > ol {
    margin: 8px 0 0;
}

main li:has(> input[type="checkbox"]) {
    list-style: none;
}

main input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0 8px 0 -24px;
    accent-color: var(--text-highlight);
    opacity: 1;
    vertical-align: -2px;
}

main dt {
    color: var(--text-highlight);
    font-weight: 700;
}

main dl {
    padding: 16px;
    border-left: 3px solid var(--text-highlight);
    background: var(--quote-background);
}

main dd {
    margin: 4px 0 16px 24px;
}

main dd:last-child {
    margin-bottom: 0;
}

.footnotes {
    font-size: 14px;
    opacity: 0.6;
}

footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 48px;
    opacity: 0.6;
}

footer p {
    margin: 0;
}

a {
    color: var(--text-highlight);
}

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

nav a {
    color: var(--text-color);
    text-decoration: none;
}

nav a[aria-current="page"] {
    color: var(--text-highlight);
}

nav {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
}

main > :first-child {
    margin-top: 0;
}

main > h1:first-child {
    margin-bottom: 24px;
}

main > :last-child {
    margin-bottom: 0;
}

main p {
    text-align: justify;
}

.intro-alias {
    font-style: italic;
    opacity: 0.6;
}

.accent {
    color: var(--text-highlight);
}

.article-heading {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 32px;
}

.article-heading__id {
    color: var(--text-highlight);
    font-family: var(--text-font-mono);
    font-size: 14px;
    font-weight: 400;
}

.post-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.post-list h3 {
    display: flex;
    gap: 16px;
    margin: 0;
}

.post-list a,
.post-list a:visited {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    color: var(--text-color);
    text-decoration: none;
}

.post-list span {
    font-family: var(--text-font-mono);
    font-weight: 400;
}

.post-list time {
    white-space: nowrap;
}

.post-list li + li {
    margin-top: 24px;
}

.socials {
    display: flex;
    align-items: center;
    gap: 8px;
}

.socials a {
    color: var(--text-color);
}

.socials .icon {
    display: block;
    width: 20px;
    height: 20px;
}

@media (min-width: 640px) {
    body {
        max-width: 560px;
        padding: 64px 40px;
    }

    nav {
        margin-bottom: 64px;
    }

    main > h1:first-child {
        margin-bottom: 32px;
    }

    footer {
        margin-top: 64px;
    }
}

@media (min-width: 960px) {
    body {
        max-width: 640px;
        padding: 96px 48px;
    }

    nav {
        margin-bottom: 72px;
    }

    main > h1:first-child {
        margin-bottom: 32px;
    }

    footer {
        margin-top: 72px;
    }
}