:root {
    --light-text-rgb: 0, 0, 0;
    --light-text: rgb(var(--light-text-rgb));
    --light-background: white;
    --light-deep-background: rgb(240, 240, 240);

    --dark-text-rgb: 231, 231, 231;
    --dark-text: rgb(var(--dark-text-rgb));
    --dark-background: rgb(40, 40, 40);
    --dark-deep-background: rgb(24, 24, 24);
}

@media (prefers-color-scheme: light) {
    :root {
        --text-rgb: var(--light-text-rgb);
        --text: var(--light-text);
        --background: var(--light-background);
        --deep-background: var(--light-deep-background);
    }
}

@media not (prefers-color-scheme: light) {
    :root {
        --text-rgb: var(--dark-text-rgb);
        --text: var(--dark-text);
        --background: var(--dark-background);
        --deep-background: var(--dark-deep-background);
    }

    a:link {
        color: rgb(134, 181, 255);
    }

    a:visited {
        color: rgb(195, 163, 255);
    }

    a:hover {
        color: rgb(207, 234, 255);
    }

    a:active {
        color: rgb(164, 187, 255);
    }
}

select {
    background-color: var(--deep-background);
    border-color: var(--deep-background);
    color: inherit;
}

body {
    color: var(--text);
    background: var(--background);

    font-family: sans-serif;
    font-size: 12pt;
}

.codeblock {
    background: var(--deep-background);
    padding: 0.25em;
    border: 0.5em solid var(--deep-background);
    border-radius: 0.5em;

    font-size: 11pt;
}

.codeblock,
.code-font,
code,
textarea {
    font-family: 'JetBrains Mono';
    font-variant-ligatures: no-contextual;
    font-weight: normal;
}

code {
    background-color: var(--deep-background);
    border: 0.2em solid var(--deep-background);
    border-radius: 0.2em;
}
