/* Variables */
:root {
    --overlay-bg: #8882;
    --overlay-border: #8884;
}

html {
    box-sizing: border-box;
    font-size: clamp(100%, 2vw, 150%);
    margin: auto;
    max-width: 72ch;
    body {
        margin: 0 1rem;
        header nav {
            margin: 1.5rem -0.5rem;
            menu {
                align-items: center;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                list-style-type: none;
                padding-left: 0;
                a {
                    border-bottom: medium solid;
                    font-weight: bold;
                    margin: 0 0.5rem;
                    text-decoration: none;
                }
                a:hover { border: none }
            }
        }
        main {
            a { text-decoration: none }
            a:hover { text-decoration: underline }
            a[role=doc-noteref] { color: GrayText }
            a.category {
                color: GrayText;
                font-family: monospace;
                font-size: 0.8rem;
                text-decoration: underline;
            }
            h1, h2, h3, h4, h5, h6 {
                margin-bottom: 0;
                a { color: CanvasText }
                a:hover { text-decoration: none }
            }
            p, ol, details { margin: 1ex 0 }
            p, details {
                hyphens: auto;
                line-height: 1.4rem;
                text-align: justify;
            }
            li p { margin: 0 }
            blockquote, div.note, div.rightquote {
                margin: 1ex -1rem;
                padding: 1ex 1rem;
                h1, h2, h3, h4, h5, h6 { margin-top: 0 }
                p { margin: 0 }
            }
            blockquote {
                background: ButtonFace;
                border-left: solid 0.25rem color-mix(in oklch,
                    ButtonFace 90%, CanvasText 10%);
                padding-left: 0.75rem;
            }
            div.note {
                background: color-mix(in oklch, Highlight 15%, Canvas 85%);
                border-left: solid 0.25rem color-mix(in oklch,
                    Highlight 90%, CanvasText 10%);
                padding-left: 0.75rem;
            }
            div.rightquote {
                background: ButtonFace;
                border-right: solid 0.25rem color-mix(in oklch,
                    ButtonFace 90%, CanvasText 10%);
                padding-right: 0.75rem;
                p { text-align: right }
            }
            code, pre {
                background-color: ButtonFace;
                color: ButtonText;
                font-size: inherit;
            }
            pre {
                margin: 1ex 0;
                overflow: auto;
                padding: 1ex 1ch;
                code.builtin.constant, code.number { color: VisitedText };
                code.comment, code.operator, code.tag.chars { color: GrayText };
                code.comment { font-style: italic }
                code.keyword:not(.soft) { font-weight: bold };
                code.string { color: LinkText };
            }
            img {
                display: block;
                margin: auto;
                max-width: 100%;
            }
            figure figcaption { text-align: center }
            table {
                border-bottom: 0.15em solid;
                border-collapse: collapse;
                border-top: 0.15em solid;
                line-height: 1em;
                margin-bottom: 1.5em;
                margin-left: auto;
                margin-right: auto;
                text-align: center;
                tr:first-of-type > th { border-bottom: 0.08em solid }
                tr, th, td { padding: 0.5em }
            }
            ul.categories {
                display: inline;
                list-style-type: none;
                padding: 0;
                li { display: inline }
            }

            section[role=doc-endnotes], div.meta, div.sign {
                color: GrayText;
                font-size: 0.8rem;
            }
            section[role=doc-endnotes] {
                hr {
                    border: none;
                    border-bottom: thin solid GrayText;
                }
                ol { padding-left: 1rem };
                a[role=doc-backlink] { color: CanvasText }
            }
            div.meta {
                align-items: baseline;
                display: flex;
                flex-wrap: wrap;
            }
            div.sign {
                margin-left: auto;
                p { margin: 0 }
            }
            .fead {
                column-gap: 1ch;
                display: flex;
                flex-wrap: wrap;
                margin-bottom: 0;
                row-gap: 1ex;
                article {
                    background: ButtonFace;
                    color: ButtonText;
                    display: flex;
                    flex-direction: column;
                    flex: 1 1 24ch;
                    padding: 1ex 1ch;
                    h3 {
                        margin: 0;
                        a:hover { text-decoration: underline }
                    }
                    p { margin-bottom: 0 }
                }
            }
        }
        footer {
            color: GrayText;
            font-size: 0.8rem;
            margin-top: 1.5rem;
            margin-bottom: 2rem;
            a { color: GrayText }
            no-wrap { white-space: nowrap }
        }
    }
}

div.comment {
    background-color: ButtonFace;
    clear: both;
    margin: 1ex 0;
    overflow: hidden;
    padding: 0 1rem;
}