:root {
    --brand: #d0a3e2;
    --brand-light: #f4e8f8;
    --brand-mid: #b3a7b7;
    --brand-dark: #4d4351;
    --polka-bg-image: radial-gradient(rgb(255, 255, 255) 30%, transparent 30%),
    radial-gradient(rgb(255, 255, 255) 30%, transparent 30%),
    radial-gradient(rgb(0, 0, 0) 30%, transparent 30%),
    radial-gradient(rgb(0, 0, 0) 30%, transparent 30%);
    --polka-bg-position: 0px 0px, 124px 124px, -12.4px 12.4px, 111.6px 136.4px;
    --polka-bg-size: 248px 248px;
    --polka-bg-color: rgb(60, 60, 60);

    --font-base: 350 1em/1.5 "RecursiveVariable", sans-serif;
    --font-head: 500 0.9em/1.5 "RecursiveVariable", sans-serif;
    --font-code: 350 0.9em/1.4 "RecursiveVariable", monospace;
    --font-var-base: "MONO" 0, "CASL" 1, "CRSV" 1, "slnt" -5;
    --font-var-longform: "MONO" 0, "CASL" 0, "CRSV" 0, "slnt" 0;
    --font-var-emph: "MONO" 0, "CASL" 1, "CRSV" 1, "slnt" -15;
    --font-var-bold: "MONO" 0, "CASL" 1, "CRSV" 1, "slnt" 0;
    --font-var-head: "MONO" 0, "CASL" 1, "CRSV" 0, "slnt" 0;
    --font-var-code: "MONO" 1, "CASL" 1, "CRSV" 1, "slnt" -5;

    --border: ridge 4px #cecece;

    accent-color: var(--brand);
}

* {
    box-sizing: border-box;
}

html {
    scrollbar-color: var(--brand) Canvas;
    background-size: var(--polka-bg-size);
    background-color: var(--brand);
    background-image: var(--polka-bg-image);
    background-position: var(--polka-bg-position);
    font: var(--font-base);
    font-variation-settings: var(--font-var-base);
}

:focus-visible {
    outline-color: var(--brand);
}

::selection {
    background-color: var(--brand);
}

::marker, :is(::-webkit-calendar-picker-indicator, ::-webkit-clear-button, ::-webkit-inner-spin-button, ::-webkit-outer-spin-button ) {
    color: var(--brand);
}

body {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: auto;
    min-block-size: 100vh;
}

a {
    text-decoration: none;
    font: var(--font-head);
    font-variation-settings: var(--font-var-head);

    &:link {
        color: var(--brand);
    }

    &:visited {
        color: var(--brand-dark);
    }
}

.button {
    color: inherit !important;
    background-color: #cecece;
    height: 2em;
    padding: 1rem;
    display: flex;
    justify-content: center;
    width: fit-content;
    align-items: center;
    border: outset 2px;
    text-decoration: none;
    border-color: #dedede #000 #000 #dedede;
    font: var(--font-base);
}

.eightyeight {
    img {
        image-rendering: pixelated;
    }
    img& {
        border: none;
    }
    .button& {
        padding: 0 !important;
        font-size: 70%;
    }
    height: 31px;
    width: 88px;
    aspect-ratio: 88/31;
    max-inline-size: unset;
}

span.spoiler {
    background-color: black;
    color: transparent;
    cursor: help;
    user-select: none;
    transition: background 0.3s ease 0.2s, color 0.2s, ease 0.25s;

    &:hover,
    &:focus {
        background-color: hsl(283, 52%, 90%);
        color: inherit;
    }
}

main {
    aspect-ratio: 4 / 3;
    background-color: #ffffff;
    block-size: clamp(768px, 75dvh, calc(100dvh - 25ch - 2em));
    border: var(--border);
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: 2ch;
    margin: 1em;

    em {
        font-variation-settings: var(--font-var-emph);
    }

    b {
        font-variation-settings: var(--font-var-bold);
    }

    p, h1, h2, h3, h4, h5, h6 {
        margin: unset;
    }

    hr {
        inline-size: 50%;
        float: none;
        margin-top: 1em;
        margin-bottom: 1em;
    }

    p + p {
        margin-top: 1em;
    }

    img {
        align-self: center;
        border: var(--border);
        max-inline-size: 25%;
    }

    video {
        align-self: center;
        border: var(--border);
        max-inline-size: 75%;
    }

    header {
        align-self: center;
        margin: 0 0 1em;

        nav {
            display: flex;
            flex-wrap: wrap;
            gap: 1ch;
            justify-content: center;
        }

        img {
            border: none;
            max-inline-size: unset;
            max-block-size: 6em;
        }
    }

    aside.gallery {
        margin-top: 1em;
        display: flex;
        gap: 1em;
    }

    .center-box {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 1em;
    }

    .gallery {
        section {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1em;
            header {
                margin: 0.5em 0 -0.5em;
                padding: 0.5em 0;
                text-align: center;
                flex: 1 1 100dvw;
                background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #d0a3e2 25%, #d0a3e2 75%, rgba(255, 255, 255, 0) 100%);
            }
        }
        article.thumbnail {
            a {
                display: flex;
                flex-direction: column;
                align-items: center;
                text-align: center;
                text-decoration: none;
                line-height: 1.25;
                color: #000;
                border: outset 4px;
                max-inline-size: 256px;
                background-color: #cecece;
                border-color: #dedede #000 #000 #dedede;
                &[data-rating="Questionable"] {
                    background-color: #fefece;
                }
                &[data-rating="Explicit"] {
                    background-color: #fecece;
                }
                &[data-rating="Everyone"] {
                    background-color: #cefece;
                }
            }
            img {
                max-inline-size: 100%;
                max-block-size: 100%;
                border: none;
            }
            span {
                margin: 0.25em 0;
            }
        }
    }

    article {
        header {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 1em;
            width: 100%;
        }
        &.artwork {
            display: flex;
            flex-direction: column;
            align-items: center;
            a {
                max-inline-size: 75dvw;
                max-block-size: 50dvh;
            }
            img,video {
                max-inline-size: 100%;
                max-block-size: 100%;
            }
            div {
                font-variation-settings: var(--font-var-longform);
            }
        }
    }

    section.alternaterows:nth-of-type(2n) {
        text-align: right;
    }

    table {
        background-color: var(--brand-light);
        border: 1px solid #ccc;
        border-collapse: collapse;
        margin: 0;
        padding: 0;
        width: 100%;
        table-layout: fixed;
        caption {
            margin: .5em 0 .75em;
        }
        tr {
            border: 1px solid var(--brand);
            padding: 0.5em;
        }
        th {
            padding: 0.5em;
            text-align: center;
            font-size: .85em;
            letter-spacing: .1em;
            text-transform: uppercase;
        }
        td {
        padding: 0.5em;
        text-align: center;
        }
    }

    @media screen and (max-width: 600px) {
        header {
            img {
                max-inline-size: 100%;
            }
        }
        img, video {
            max-inline-size: 100%;
            max-block-size: 25dvh;
        }
        table {
            border: 0;
            background: unset;
            thead {
                border: none;
                clip: rect(0 0 0 0);
                height: 1px;
                margin: -1px;
                overflow: hidden;
                padding: 0;
                position: absolute;
                width: 1px;
            }
            tr {
                border-bottom: 3px solid var(--brand);
                display: block;
                margin-bottom: 0.5em;
                background: var(--brand-light);
            }
            td {
                &:first-of-type {
                    font-weight: bold;
                    text-align: left;
                }
                border-bottom: 1px solid var(--brand);
                display: block;
                text-align: right;
                &::before {
                    content: attr(data-label);
                    float: left;
                    font-weight: bold;
                    text-transform: uppercase;
                }
                &:last-child {
                    border-bottom: 0;
                }
            }
        }
    }

    @media (max-width: 1280px) {
        block-size: calc(90dvh - 4ch - 2em);
        inline-size: calc(100dvw - 4ch - 2em);
    }
}

#koring-index, .critterlist {
    section {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
        width: 100%;
        gap: 0.5em;
    }
}

#koring table {
    border: var(--border);
}

pre, code {
    font: var(--font-code) !important;
    font-variation-settings: var(--font-var-code) !important;
}

footer {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0.5em;
    margin-bottom: 1em;
    justify-content: center;

    #buttons {
        display: flex;
        flex-direction: row;
        gap: 0.5em;
        flex-wrap: wrap;
        justify-content: center;
    }

    #buildinfo {
        align-self: center;
        font-size: 0.7em;
        padding: 1em;
        background: white;
        border: var(--border);
    }
}