: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;

    color-scheme: light dark;
    --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);
}

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);
    }

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

main,
section[content] {
    max-width: 1024px;
    margin-left: calc(max((100lvw - 1024px), 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;
        padding: var(--margin-small);
        text-decoration: none;
        color: inherit;
        align-items: center;
        justify-content: space-between;
    }

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

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

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