@font-face {
    font-family: "JetBrains mono";
    src: url(/static/assets/fonts/JetBrains_Mono/JetBrainsMono-VariableFont_wght.ttf);
}

@font-face {
    font-family: "JetBrains mono italics";
    src: url(/static/assets/fonts/JetBrains_Mono/JetBrainsMono-Italic-VariableFont_wght.ttf);
}

:root {
    --color-scheme: light dark;

    color-scheme: var(--color-scheme);

    --color-accent: light-dark(oklch(0.4735 0.111 156.51), oklch(0.8927 0.1761 101.19)) ;
    --color-text  : light-dark(oklch(0 0 0), oklch(1 0 0));
    --color-gray  : light-dark(oklch(.4 0 0), oklch(.7 0 0));
    --color-bg    : light-dark(oklch(1 0 0), oklch(0 0 0));

    background-color: var(--color-bg);
    color: var(--color-text);
}

body {
    width: fit-content;
    margin: auto;
}

pre {
    font-family: "JetBrains mono";
    font-variant-ligatures:common-ligatures;
    font-weight: 400;

    & h1, h2, h3, h4, h5, h6, p, header, footer, li, ul {
        display: inline;
        font-size: 1em;
        margin: 0;
        padding: 0;
    }

    & ul {
        list-style: none;
    }
}

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

b, h1 {
    font-weight: 900;

    & a {
        text-decoration: none;
    }
}

footer, .gray {
    color: var(--color-gray);

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

i {
    font-family: "JetBrains mono italics";
    font-style: normal;
}

nav {
    display: inline;
}

/* snippet from https://webaim.org/techniques/css/invisiblecontent/ */
.screen-reader-only {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}

.themeswitcher {
    position: fixed;
    right: 2em;
    bottom: 0;
    color: var(--color-gray);
}

input[type="radio"].custom-radio {
    display: none;
}

input[type="radio"].custom-radio + label {
    cursor: pointer;

    &::before {
        content: "( ) ";
    }
}

input[type="radio"].custom-radio:checked + label::before {
    content: "(x) ";
}

@media print{
    :root {
    --color-accent: #000;
    --color-text  : #000;
    --color-bg    : #fff;
    }
}
/* Mobile size */
@media (max-width:1120px) {
    .themeswitcher {
        position: relative;
        right: inherit;
        bottom: inherit;
    }
}
@media (max-width:700px) {
    :root {
        font-size: .75em;
    }

    body {
        margin: auto
    }
}

@media (max-width:500px) {
    :root {
        font-size: .5em;
    }
}