@font-face {
    font-display: swap;
    font-family: "Roboto Slab";
    font-style: normal;
    font-weight: 400;
    src: url("/assets/fonts/roboto-slab-v36.woff2") format("woff2");
}

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

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

@font-face {
    font-display: swap;
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 500;
    src: url("/assets/fonts/ibm-plex-sans-v23-500.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "IBM Plex Sans";
    font-style: italic;
    font-weight: 500;
    src: url("/assets/fonts/ibm-plex-sans-v23-500italic.woff2") format("woff2");
}

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

@font-face {
    font-display: swap;
    font-family: "IBM Plex Mono";
    font-style: italic;
    font-weight: 400;
    src: url("/assets/fonts/ibm-plex-mono-v20-italic.woff2") format("woff2");
}

:root {
    --base03: light-dark(#002b36, #fdf6e3);
    --base02: light-dark(#073642, #eee8d5);
    --base01: light-dark(#586e75, #93a1a1);
    --base00: light-dark(#657b83, #839496);
    --base0: light-dark(#839496, #657b83);
    --base1: light-dark(#93a1a1, #586e75);
    --base2: light-dark(#eee8d5, #073642);
    --base3: light-dark(#fdf6e3, #002b36);
    --yellow: #b58900;
    --orange: #cb4b16;
    --red: #dc322f;
    --magenta: #d33682;
    --violet: #6c71c4;
    --blue: #268bd2;
    --cyan: #2aa198;
    --green: #859900;

    --font-headings: "Roboto Slab", serif;
    --font-body: "IBM Plex Sans", sans-serif;
    --font-code: "IBM Plex Mono", monospace;
}

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

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

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

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

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

.light {
    color: var(--base1);
}

:root {
    font-family: var(--font-body);
    color: var(--base01);
    color-scheme: only light;
}

body {
    background: var(--base3);
    margin: 0 auto;
    padding-inline: 1rem;
    max-width: 80ch;
}

nav {
    border: 2px solid currentColor;
    margin-block: 1rem;

    > ul {
        display: flex;
        list-style-type: none;
        margin: 0;
        padding: 0 0.5ch;
    }

    .fill {
        flex-grow: 1;
    }

    a {
        display: flex;
        align-items: center;
        gap: 0.75ch;
        padding: 1ch;
    }

    .back-arrow {
        display: inline-block;
        vertical-align: middle;
        border-inline-end: 0.75ch solid currentColor;
        border-top: 0.75ch solid transparent;
        border-bottom: 0.75ch solid transparent;
    }
}

menu {
    display: flex;
    padding: 0;
    gap: 1ch;
    list-style-type: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-headings);
    font-weight: 400;
    color: var(--base02);
    margin-block: 0.5em;
}

pre,
code {
    font-family: var(--font-code);
}

:not(pre) > code {
    background: var(--base2);
    color: var(--base03);
    padding: 0.1em 0.2em;
    border-radius: 0.25em;
}

p,
ul {
    margin-block: 0.6em;
}

strong {
    font-weight: 500;
}

a {
    color: var(--blue);
}

li {
    line-height: 1.6;
}

details {
    border: 1px solid var(--base00);

    > summary {
        padding: 1ch;
    }

    > p {
        padding-inline: 1ch;
        margin-top: 0;
    }
}

footer {
    color: var(--base0);
    border-top: 1px solid var(--base0);
    margin-top: 1rem;
    padding-block: 1rem;
}

.ce-banner {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    gap: 0.2rem;
    color-scheme: only dark;
    background-color: var(--base3);
    color: var(--base01);

    > * {
        margin-block: 0;
    }

    h1 {
        line-height: 1.1;
    }

    ul {
        display: block;
        list-style-type: none;
        padding: 0;
    }

    li {
        display: inline-block;
    }

    a {
        color: var(--base02);
    }
}