@font-face {
    font-family: "Berkeley Mono";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("BerkeleyMono-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Berkeley Mono";
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url("BerkeleyMono-Bold.woff2") format("woff2");
}

@font-face {
    font-family: "Berkeley Mono";
    font-weight: 400;
    font-style: oblique;
    font-display: swap;
    src: url("BerkeleyMono-Oblique.woff2") format("woff2");
}

@font-face {
    font-family: "Berkeley Mono";
    font-weight: 700;
    font-style: oblique;
    font-display: swap;
    src: url("BerkeleyMono-Bold-Oblique.woff2") format("woff2");
}

:root {
    --bg-main: #ffffff;
    --fg-main: #000000;
    --fg-dim: #595959;
    --fg-alt: #193668;
    --green-faint: #2a5045;
    --yellow-faint: #624416;
    --blue: #3548cf;
    --magenta: #6c71c4;

    --left-margin: 4ch;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-main: #000000;
        --fg-main: #ffffff;
        --fg-dim: #989898;
        --fg-alt: #c6daff;
        --green-faint: #88ca9f;
        --yellow-faint: #d2b580;
        --blue: #2fafff;
        --magenta: #feacd0;
    }
}

@media (min-width: 0) and (max-width: 719px) {
    body {
        line-height: 1.8rem;
        padding-bottom: 1.8rem;
    }
    figure {
        margin: 1.8rem 0;
        pre {
            padding: 1.8rem 0;
        }
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin: 1.8rem var(--left-margin);
    }
    p {
        margin: 1.8rem var(--left-margin);
    }
    ul {
        margin: 1.8rem var(--left-margin);
    }
    ol {
        margin: 1.8rem var(--left-margin);
    }
    hr {
        line-height: 1.8rem;
    }
}

@media (min-width: 720px) {
    body {
        line-height: 1.5rem;
        padding-bottom: 1.5rem;
    }
    figure {
        margin: 1.5rem 0;
        pre {
            padding: 1.5rem 0;
        }
    }
    h1,
    h2,
    h3 {
        margin: 1.5rem var(--left-margin);
    }
    p {
        margin: 1.5rem var(--left-margin);
    }
    ul {
        margin: 1.5rem var(--left-margin);
    }
    hr {
        line-height: 1.5rem;
    }
}

h1,
h2,
h3,
hr,
li,
p,
ul {
    max-width: 62ch;
}

html {
    font:
        100% "Berkeley Mono",
        ui-monospace,
        SFMono-Regular,
        "SF Mono",
        Menlo,
        Consolas,
        "Liberation Mono",
        monospace;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    background: var(--bg-main);
    color: var(--fg-main);
    margin: 0;
}

h1,
h2,
h3 {
    font:
        bold 1rem "Berkeley Mono",
        ui-monospace,
        SFMono-Regular,
        "SF Mono",
        Menlo,
        Consolas,
        "Liberation Mono",
        monospace;
}

h1 {
    color: var(--fg-main);
}

h2 {
    color: var(--yellow-faint);
}

h3 {
    color: var(--fg-alt);
}

code {
    font-family: "Berkeley Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

h1:before {
    content: "# ";
    margin-left: -2ch;
}

h2:before {
    content: "## ";
    margin-left: -3ch;
}

h3:before {
    content: "### ";
    margin-left: -4ch;
}

figure {
    &.highlight {
        pre {
            padding-left: var(--left-margin);
            overflow-x: auto;
        }
    }
}

pre {
    margin: 0;
}

p {
    code {
        color: var(--fg-dim);
    }
    code:before,
    code:after {
        content: "`";
    }
}

ul {
    list-style: none;
    padding: 0;

    li {
        &:before {
            color: var(--fg-dim);
            content: "- ";
            margin-left: -2ch;
        }
    }
}

blockquote {
    margin: 0;
    color: var(--green-faint);
}

a {
    color: var(--blue);
    text-decoration: underline;

    &:visited {
        color: var(--magenta);
    }

    &:hover {
        background: var(--blue);
        color: var(--bg-main);
        text-decoration: underline;
    }

    &:focus {
        outline: 2px solid var(--blue);
        outline-offset: 2px;
    }

    &:focus:not(:focus-visible) {
        outline: none;
    }

    &:focus-visible {
        outline: 2px solid var(--blue);
        outline-offset: 2px;
    }
}

hr {
    margin: 0 var(--left-margin);
    text-align: center;
    border: 0;

    &:before {
        color: var(--fg-dim);
        content: "* * *";
    }
}