:root {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

    --fg: black;
    --bg: white;
    --link: #1a0dab;
    --link-hover: color-mix(in srgb, var(--link) 80%, var(--bg) 20%);
    --box: color-mix(in srgb, var(--fg) 10%, var(--bg) 90%);
    --box-hover: color-mix(in srgb, var(--fg) 20%, var(--bg) 80%);
}

@media (prefers-color-scheme: dark) {
    :root {
        --fg: #dadada;
        --bg: #222;
        --link: #8ab4f8;
    }

    img[src^="/assets/img/ico/"][src$=".svg"] {
        filter: invert();
    }
}

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

* {
    box-sizing: border-box;
}


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

a:hover {
    color: var(--link-hover);

    text-decoration: dashed underline;
}

h1>a,
h1>a:hover {
    color: var(--fg);
    text-decoration: none;
}

blockquote {
    all: unset;
    display: block;
    margin: 1em;
    padding-inline-start: 0.5em;
    border-inline-start: 0.5em solid var(--box-hover);

    &:has(+cite) {
        margin-block-end: 0.5em;
    }

    &+cite {
        display: block;
        margin-block-end: 1em;
        font-size: 0.8em;
        text-align: right;

        &::before {
            content: "— ";
        }
    }
}

#lang {
    position: fixed;
    top: 1em;
    right: 1em;

    margin: 0;

    & img {
        height: 2.5em;
        width: 2.5em;
    }
}