:root {
    --font-text: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
    --font-head: Avenir, Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif;
    --font-mono: "Nimbus Mono PS", "Courier New", monospace;
    --font-code: Menlo, Consolas, "Ubuntu Mono", monospace;

    --margin-small: 0.75lh;
    --margin-tiny: 0.25lh;
    --max-width: 1024px;

    color-scheme: light dark;
    &:has(#color-mode-light:checked) {
        color-scheme: light;
    }
    &:has(#color-mode-dark:checked) {
        color-scheme: dark;
    }

    &:has(#color-mode-light:checked) {
        label[for="color-mode-light"] {
            display: none;
        }

        @media (prefers-color-scheme: light) {
            label[for="color-mode-auto"] {
                display: none;
            }
        }

        @media (prefers-color-scheme: dark) {
            label[for="color-mode-dark"] {
                display: none;
            }
        }
    }

    &:has(#color-mode-dark:checked) {
        label[for="color-mode-dark"] {
            display: none;
        }

        @media (prefers-color-scheme: dark) {
            label[for="color-mode-auto"] {
                display: none;
            }
        }

        @media (prefers-color-scheme: light) {
            label[for="color-mode-light"] {
                display: none;
            }
        }
    }

    &:has(#color-mode-auto:checked) {
        label[for="color-mode-auto"] {
            display: none;
        }

        @media (prefers-color-scheme: light) {
            label[for="color-mode-light"] {
                display: none;
            }
        }

        @media (prefers-color-scheme: dark) {
            label[for="color-mode-dark"] {
                display: none;
            }
        }
    }

    @media (prefers-color-scheme: light) {
        label[for="color-mode-auto"]:after {
            content: "☼";
        }
    }

    @media (prefers-color-scheme: dark) {
        label[for="color-mode-auto"]:after {
            content: "☾";
        }
    }

    --color-text: light-dark(#333, white);
    --color-bg: light-dark(white, #333);
    --color-bg-dot: light-dark(#3333331f, #ffffff3d);
    --color-border: light-dark(#3333331f, #ffffff3d);
    --color-link-hover: light-dark(purple, color-mix(in srgb, white 100%, purple 0%));
    --color-link-visited: light-dark(purple, color-mix(in srgb, white 100%, purple 0%));

    --color-wbw-banner-bg: light-dark(#3fc8f4, #074772);
    --color-wbw-banner-text: light-dark(#030607, white);
    --color-wbw-banner-link: light-dark(#074772, #3fc8f4);

    --color-button-bg: light-dark(#3fc8f4, #074772);
    --color-button-text: light-dark(#030607, white);
}

body {
    font-family: var(--font-text);
    background-image: radial-gradient(circle, var(--color-bg-dot) 1px, transparent 1px);
    background-size: 20px 20px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-head);
}

header[banner] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--margin-small);
}

header[wbw] {
    color: var(--color-wbw-banner-text);
    background-color: var(--color-wbw-banner-bg);
    border-bottom: 0.2lh solid color-mix(in lch shorter hue, var(--color-wbw-banner-bg) 50%, var(--color-bg) 50%);
    a,
    a:hover,
    a:visited {
        color: var(--color-wbw-banner-link);
    }
}

header[main] {
    padding-top: var(--margin-small);
    padding-bottom: var(--margin-small);
    background-color: var(--color-bg);
    filter: drop-shadow(0px 1px 2px var(--color-border));

    section[content] {
        padding-left: var(--margin-small);
        padding-right: var(--margin-small);
    }

    h1 {
        display: flex;
        justify-content: space-between;
    }

    nav > ul {
        > li {
            display: inline-block;
        }

        > li + li {
            &:before {
                content: ">";
                margin-left: 0.25ch;
                margin-right: 0.25ch;
            }
        }
    }

    a {
        color: inherit;
        text-decoration: inherit;
    }
}

ul[color-mode] {
    display: flex;
    font-size: 1em;
    font-weight: 400;
    font-family: var(--font-code);

    input {
        display: none;
    }
}

main,
section[content] {
    max-width: var(--max-width);
    margin-left: calc(max((100lvw - var(--max-width)), 0px) / 2);
}

ul[unmarked] {
    list-style: none;
    padding: 0px;
}

article[block],
li[linkblock] {
    background-color: var(--color-bg);
    margin: var(--margin-small);
    border: 1px solid var(--color-border);
    filter: drop-shadow(0px 2px 2px var(--color-border));
    border-radius: 0.5em;
    color: var(--color-text);
}

article[block] {
    padding: var(--margin-small);
}

li[linkblock] {
    > a {
        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: var(--margin-small);
        text-decoration: none;
        color: inherit;
    }

    &:hover {
        border-color: var(--color-link-hover);
        color: var(--color-link-hover);
    }

    icon {
        align-self: center;
        justify-self: flex-end;
    }

    aside {
        display: flex;
        flex-direction: column;
        text-align: right;
        gap: 0.25ch;
    }
}

@media (max-width: 748px) {
    li[linkblock]:has(tags) {
        > a {
            display: block;

            > aside {
                flex-direction: row;
                gap: 1ch;
            }
        }
    }
}

icon[external-link] {
    font-family: var(--font-text);
    &:after {
        display: block;
        content: "⎋";
        rotate: 90deg;
        width: 1lh;
        height: 1lh;
        line-height: 1em;
    }
}