@charset "utf-8";

@import url("/fonts/fonts.css");

@keyframes backdrop-scroll-xy {
    0% {
        background-position-x: 0;
        background-position-y: 0;
    }
    100% {
        background-position-x: 960px;
        background-position-y: 960px;
    }
}

:root {
    --line-height: 1.5;

    --text-color: light-dark(#000000, #ffffff);
    --accent-color: light-dark(#94238f, #ffbaf9);
    --link-color: light-dark(#062fab, #ffe431);

    --border-style: solid;
    --border-width: 2px;
    --border-radius: 3px;

    --border-highlight: light-dark(#ffffff, #816355);
    --border-shade: light-dark(#777777, #391706);
    --border-color:
        var(--border-highlight)
        var(--border-shade)
        var(--border-shade)
        var(--border-highlight);
    --inset-border-color:
        var(--border-shade)
        var(--border-highlight)
        var(--border-highlight)
        var(--border-shade);

    --default-cursor: url("/images/cursors/default.svg"), default;
    --pointer-cursor: url("/images/cursors/pointer.svg") 0 5, pointer;

    --foreground-image: url("/images/foreground/light.png");
    --foreground-fallback: light-dark(#dedede, #623a27);
    --active-button-color: light-dark(#e8e8e8, #6f422e);

    --backdrop-image: "";
    --backdrop-fallback: #ff00ff;

    --backdrop-animation: none;
    --backdrop-scroll-xy: backdrop-scroll-xy 45.254s infinite linear;

    --page-shadow: 0.5rem 0.5rem 1px #000000af;

    --icon-size: 32px;
    --icon-offset: -32px;
    --icon-spacing: calc(var(--icon-size) + 1rem);

    line-height: var(--line-height);
    font-family: var(--serif);
    font-size: 1.167em;
    color-scheme: light dark;
    color: var(--text-color);
    cursor: var(--default-cursor);
    background-color: var(--backdrop-fallback);
    background-image: var(--backdrop-image);
    accent-color: var(--accent-color);
    animation: var(--backdrop-animation);

    @media (prefers-reduced-motion) {
        animation: none;
    }

    @media (prefers-color-scheme: dark) {
        --foreground-image: url("/images/foreground/dark.png");
    }
}

*, *::before, *::after {
    image-rendering: pixelated;
}

::selection {
    color: light-dark(#ffffff, #000000);
    background: var(--accent-color);
}

body {
    --page-width: 36rem;

    display: flex;
    flex-direction: column;
    align-items: center;
    min-block-size: 100vb;

    & > * {
        max-inline-size: 100%;
    }

    &.home {
        --page-width: 13rem;

        justify-content: center;
    }
}

.warning {
    display: flex;
    justify-content: center;
    align-items: center;
    inline-size: 100%;
    min-block-size: 100vb;
    color: #ffffff;
    background: linear-gradient(to bottom, #320100, #710500);

    & section {
        max-inline-size: var(--page-width);
        padding-inline: 1.5rem;
    }

    & h1 {
        font-family: var(--serif);
        font-size: 2em;
        color: inherit;
    }
}

#page {
    inline-size: var(--page-width);
    margin-block: 1rem;
    border-style: var(--border-style);
    border-width: var(--border-width);
    border-color: var(--border-color);
    border-radius: var(--border-radius);
    background-image: var(--foreground-image);
    background-color: var(--foreground-fallback);
    box-shadow: var(--page-shadow);

    & > * {
        position: relative;
        padding-block: 0.75rem;
        padding-inline: 1.5rem;
    }
    & * {
        max-inline-size: 100%;
    }
}

:is(header, main)::after {
    position: absolute;
    inset-block-end: calc(var(--border-width) * -1);
    inset-inline-start: 0;
    inset-inline-end: 0;
    display: block;
    border-style: var(--border-style);
    border-width: var(--border-width);
    border-color: var(--inset-border-color);
    content: "";
}

body.home header {
    text-align: center;
}

header p {
    margin: 0;
}

.breadcrumbs a, .navigation a {
    text-decoration: none;
    font-family: var(--mono);

    &:hover {
        text-decoration: underline;
    }
}

.breadcrumbs {
    & ul {
        display: flex;
        flex-wrap: wrap;
        gap: 0 0.5rem;
        padding: 0;
        margin: 0;
    }

    & li {
        list-style: none;
    }

    & a::after {
        content: "/" / "";
    }
}

#title {
    margin-block: 0 0.2rem;
    font-size: 1.5em;
}

main {
    & > *:first-child {
        margin-block-start: 0;
    }
    & > *:last-child {
        margin-block-end: 0;
    }
}

hr {
    border-style: var(--border-style);
    border-width: var(--border-width);
    border-color: var(--inset-border-color);
    border-radius: var(--border-radius);
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.25;
    font-family: var(--sans);
    color: var(--accent-color);
}

h2, hgroup:has(> h2) {
    margin-block-start: 1.75rem;
}

h3, hgroup:has(> h3) {
    margin-block-start: 1.375rem;
}

hgroup {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0 0.5rem;
    margin-block: 1rem;

    & > :is(h1, h2, h3, h4, h5, h6) {
        margin: 0;
    }
}

.heading-anchor {
    /*
     * The heading may have a smaller font size than the anchor, making it
     * taller than it should be. This makes it so the anchor doesn't occupy any
     * additional space.
     */
    margin-block: -0.625em;
    font-size: 1.25em;

    text-decoration: none;
    font-family: var(--sans);
    color: #9d7b6c;

    &:focus, *:hover > & {
        color: var(--link-color);
    }

    &:hover {
        text-decoration: underline;
    }

    @media (prefers-color-scheme: light) {
        color: #919191;
    }
}

.subtitle {
    margin-block-start: -1rem;
}

a {
    color: var(--link-color);
    cursor: var(--pointer-cursor);
}

a:hover {
    text-decoration: none;
}

del {
    text-decoration-color: #7f0000;
    text-decoration-thickness: var(--border-width);
}

ul, ol {
    padding-inline-start: 1.5rem; /* For consistency with blockquotes. */
}

ul {
    list-style: square;
}

li::marker {
    color: var(--accent-color);
}

ol li::marker {
    font-style: italic;
    font-weight: bold;
}

dt {
    color: var(--accent-color);
}

dd {
    position: relative;
    margin-block: 0.25rem 0.75rem;
    padding-inline-start: 1.5rem /* For consistency with lists. */;

    &:last-child {
        margin-block-end: 0;
    }

    &::before {
        position: absolute;
        inset-block-start: 0.125rem;
        inset-block-end: 0.125rem;
        inset-inline-start: calc(0.5rem - var(--border-width));
        display: block;
        border-style: var(--border-style);
        border-width: var(--border-width);
        border-color: var(--inset-border-color);
        border-radius: var(--border-radius);
        content: "";
    }

    & > *:first-child {
        margin-block-start: 0;
    }
    & > *:last-child {
        margin-block-end: 0;
    }
}

pre, code {
    font-size: 0.95em;
    font-family: var(--mono);

    /* Hugo nests shit into these. I don't know why it does that. */
    & * {
        padding: 0 !important;
        font-size: inherit;
        border: none;
    }
}

pre {
    padding-inline: 0.5rem;
    border-style: var(--border-style);
    border-width: var(--border-width);
    border-color: var(--inset-border-color);
    border-radius: var(--border-radius);
}

blockquote {
    position: relative;
    padding-inline-start: 1.5rem; /* For consistency with lists. */

    &::before {
        position: absolute;
        inset-block-start: -0.33rem;
        inset-inline-start: 0;
        content: "“";
        content: "“" / "";
        font-size: 2em;
        font-weight: bold;
        color: var(--accent-color);
    }

    & > *:first-child {
        margin-block-start: 0;
    }
    & > *:last-child {
        margin-block-end: 0;
    }
}

main img {
    /*
     * When the image is used with display: inline, the container needs
     * line-height: 0 to prevent excessive spacing. That, however, breaks the
     * alt text, and this fixes it back.
     *
     * Don't bother trying vertical-align: middle - it breaks link underlines.
     */
    line-height: 1;
}

figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    inline-size: fit-content;
    margin-inline: auto;

    & picture {
        line-height: 0;
    }
}

.table-wrapper {
    overflow: auto;
}

table {
    border-spacing: 0;
}

td, th {
    padding-block: 0.125rem;
    padding-inline: 0.5rem;
    border-style: solid;
    border-width: var(--border-width);
    border-color: var(--inset-border-color);
}

td {
    vertical-align: top;
}

summary {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    inline-size: fit-content;
    padding-inline-end: 0.5rem;
    cursor: var(--pointer-cursor);
    border-style: var(--border-style);
    border-width: var(--border-width);
    border-color: var(--border-color);
    border-radius: var(--border-radius);
    background: var(--foreground-fallback);

    /* WebKit doesn't yet apply list-style or ::marker to <summary> elements. */
    &::-webkit-details-marker {
        display: none;
    }

    &::before {
        display: block;
        block-size: var(--icon-size);
        inline-size: var(--icon-size);
        content: "";
        background-image: url("/images/icons/pages.png");
        background-position-y: calc(var(--icon-offset) * 4);
    }

    &:hover {
        background: var(--active-button-color);

        &::before {
            background-position-x: calc(var(--icon-offset) * 1);
        }
    }
    &:active {
        border-color: var(--inset-border-color);
    }

    details[open] > & {
        margin-block-end: 0.5rem;
        border-color: var(--inset-border-color);

        &::before {
            background-position-y: calc(var(--icon-offset) * 5);
        }
    }

    & + * {
        margin-block-start: 0;
    }
}

.rating {
    margin-block: 1rem;

    & .given {
        line-height: 1.25;
        font-size: 2em;
        color: var(--accent-color);
        text-shadow: 1px 1px 1px #000000af;
    }

    & .explanation {
        display: block;
        font-size: 0.75em;
    }
}

.navigation ul {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
}

.navigation li {
    --node-spacing: 0.375rem;
    --node-font-size: 1.125em;

    position: relative;
    padding-inline-start: var(--icon-spacing);

    /*
     * WebKit doesn't put lists with list-style: none into the accessibility
     * tree because they don't look like lists to sighted users. We respect its
     * wishes and don't touch those. Navigation lists, however, do look like
     * lists, so we gently push WebKit into acknowledging it.
     *
     * Note that navigation lists can appear outside of a <nav> parent when
     * they're used for decorative purposes, such as on the bookmarks page, so
     * don't rely on the <nav> detection. Also don't rely on the visible
     * ::before detection because it only considers ones with a non-empty,
     * non-all-whitespace content.
     *
     * See WebKit's source code for more details:
     * https://github.com/WebKit/WebKit/blob/112d07ea900f527cb07836d9373c08d020f66398/Source/WebCore/accessibility/AccessibilityList.cpp#L137-L144
     */
    list-style: "";

    &::before {
        position: absolute;
        inset-inline-start: 0;
        display: block;
        block-size: var(--icon-size);
        inline-size: var(--icon-size);
        content: "";
        background-image: url("/images/icons/pages.png");

        /* Close your eyes and pretend you can understand this. */
        inset-block-start: calc(
            var(--node-spacing)
            + var(--node-font-size) * var(--line-height) / 2
            - var(--icon-size) / 2
        );
    }
    &:hover::before {
        background-position-x: calc(var(--icon-offset) * 1);
    }
}

.navigation li {
    & > p {
        margin: 0;
    }

    &.file::before {
        background-position-y: calc(var(--icon-offset) * 1);
    }
    &.folder::before {
        background-position-y: calc(var(--icon-offset) * 2);
    }
    &.profile::before {
        background-position-y: calc(var(--icon-offset) * 3);
    }
    &.media::before {
        background-position-y: calc(var(--icon-offset) * 6);
    }
    &.link::before {
        background-position-y: calc(var(--icon-offset) * 7);
    }
}


/* All of this black magic is needed so the icon is also clickable. */
.navigation a {
    position: relative;
    display: block;
    z-index: 1;
    box-sizing: content-box;
    padding-block: var(--node-spacing);
    padding-inline-start: var(--icon-spacing);
    margin-inline-start: calc(-1 * var(--icon-spacing));
    font-size: var(--node-font-size);
}

.licensing {
    font-size: 0.75em;
}