:root {
    color-scheme: light dark;
    scroll-behavior: smooth;

    --width: 50em;
    --space: 1rem;
    --bg: light-dark(#DFDFDF, #222222);
    --article-bg: light-dark( lch(from var(--bg) calc(l * 1.05) c h), lch(from var(--bg) calc(l * 0.75) c h));
    --text: light-dark(#333333, #EEEEEE);
    --pre-bg: light-dark( lch(from var(--article-bg) calc(l * 1.1) c h), lch(from var(--article-bg) calc(l * 0.5) c h));

    --pre-text: light-dark(#003366, #99FFCC);
    --col1: light-dark(#336699, #6699CC);
    --col2: lch(from var(--col1) calc(l * 1.1) c h);
    --col3: lch(from var(--col2) calc(l * 1.1) c h);
    --highlight-bg: light-dark(lemonchiffon, #222222);
    --highlight-bg-hover: light-dark(#7F7, #000);
    --menu-text: light-dark(white, black);
}

* {
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: var(--bg);
    color: var(--text);
}

header {
    grid-area: head;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: var(--width);

    img {
        height: calc(var(--space) * 5);
    }

}

article {
    scroll-margin-top: calc(var(--space) * 2.5);
    margin-bottom: var(--space);
    padding: var(--space) calc(var(--space) * 2);
    border: thin solid transparent;
    border-radius: calc(var(--space) / 2);
    background-color: var(--article-bg);
    max-width: var(--width);

    &:target {
        border-color: var(--col1);
        background-color: var(--highlight-bg);
    }

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

h1 {
    color: var(--col1);

    a {
        color: inherit;
    }
}

h2 {
    color: var(--col2);
}

h3 {
    color: var(--col3);
}

ul {
    margin-left: var(--space);
}

nav {
    position: sticky;
    top: calc(var(--space) / 2);
    z-index: 1000;
    border-radius: calc(var(--space) / 4);
    overflow: clip;
    grid-area: nav;
    width: 100%;
    max-width: var(--width);

    menu {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        padding: 0;
        list-style: none;
        background-color: var(--col1);

        a {
            color: var(--menu-text);
        }
    }

}

dfn {
    opacity: 0.7;
    font-style: normal;
    font-weight: bold;

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

dt {
    font-weight: bold;
}

pre, copyable-pre {
    background-color: var(--pre-bg);
    color: var(--pre-text);
    padding: var(--space);
    border-radius: calc( var(--space) / 2);
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word; 
    border: thin dashed var(--col1);
    display: block;
}

code {
    background-color: var(--pre-bg);
    color: var(--pre-text);
    padding: calc(var(--space) * 0.1) calc(var(--space) * 0.3);
    border-radius: calc(var(--space) * 0.3);
    font-family: "Courier New", Courier, monospace;
}

summary {
    cursor: help;
    text-decoration: underline dotted;
}