:root {
    color-scheme: light dark;
    --text-size-sm: 0.9rem;
    --text-size-md: 1rem;
    --text-size-lg: 1.13rem;
    --text-size-xl: 1.27rem;
    --text-size-2xl: 1.42rem;
    --text-size-3xl: 1.6rem;
    --text-size-4xl: 1.9rem;
    --font-family-system-ui: system-ui, sans-serif;
    --font-family-mono: "Nimbus Mono PS", "Courier New", monospace;

    --highlight-bg-color: rgba(0, 0, 0, 0.04);
    --bg-color: white;
    --text-color: rgba(0, 0, 0, 0.95);
    --link-color: rgb(180, 0, 0);
    --code-bg-color: #eeeeee;
    --inline-code-bg-color: #dddddd;
    --inline-code-text-color: black;
    --shadow-color: rgba(144, 144, 144, 0.87);
    --border-color: rgba(0, 0, 0, 0.2);

    --dark-highlight-bg-color: rgba(255, 255, 255, 0.05);
    --dark-bg-color: rgb(20, 20, 20);
    --dark-text-color: rgba(255, 255, 225, 0.95);
    --dark-link-color: rgba(255, 160, 80, 0.95);
    --dark-code-bg-color: #222222;
    --dark-inline-code-bg-color: #999999;
    --dark-inline-code-text-color: black;
    --dark-shadow-color: rgb(10, 10, 10);
    --dark-border-color: rgba(255, 255, 225, 0.3);
}

html {
    font-size: 1.25rem;
}

body {
    line-height: 1.65;
    margin: 3rem;
    margin-left: 3.5rem;
    margin-top: 2rem;
    background-color: light-dark(var(--bg-color), var(--dark-bg-color));
    color: light-dark(var(--text-color), var(--dark-text-color));
}

body,
p,
table,
td,
ul,
ol,
li,
nav {
    font-family: var(--font-family-mono);
    font-size: var(--text-size-md);
}

nav > p {
    margin-block-end: 0.5rem;
    margin-block-start: 0.5rem;
    padding: 0 0.5rem;
}

h1,
h2,
h3,
h4,
h5 {
    font-weight: bold;
    line-height: 1.15;
    letter-spacing: 0.08rem;
    margin-top: 3rem;
}

h1 {
    font-size: var(--text-size-3xl);
}

h1.title {
    margin-top: 0;
    margin-bottom: 1rem;
    padding-bottom: 0;
    font-size: var(--text-size-4xl);
}

h2 {
    font-size: var(--text-size-2xl);
}

h3 {
    font-size: var(--text-size-xl);
}

h4 {
    font-size: var(--text-size-lg);
}

small {
    font-size: var(--text-size-sm);
}

a:link {
    text-decoration-color: light-dark(
        var(--link-color),
        var(--dark-link-color)
    );
    text-underline-offset: 0.14rem;
    color: light-dark(var(--text-color), var(--dark-text-color));
    text-decoration-style: dotted;
}

a:link:hover {
    color: light-dark(var(--link-color), var(--dark-link-color));
    text-decoration-style: solid;
}

a:visited {
    color: light-dark(var(--text-color), var(--dark-text-color));
    text-decoration-color: light-dark(
        var(--link-color),
        var(--dark-link-color)
    );
}

a:visited:hover {
    color: light-dark(var(--link-color), var(--dark-link-color));
}

p:has(a.highlight),
details:has(a.highlight) > summary {
    background-color: light-dark(
        var(--highlight-bg-color),
        var(--dark-highlight-bg-color)
    );
}

code {
    font-family: var(--font-family-mono);
}

p code {
    background-color: light-dark(
        var(--inline-code-bg-color),
        var(--dark-inline-code-bg-color)
    );
    color: light-dark(
        var(--inline-code-text-color),
        var(--dark-inline-code-text-color)
    );
    white-space: nowrap;
    padding: 1px 0.4rem;
}

pre code {
    background-color: light-dark(
        var(--code-bg-color),
        var(--dark-code-bg-color)
    );
}

pre:has(code) {
    background-color: light-dark(
        var(--code-bg-color),
        var(--dark-code-bg-color)
    );
    max-width: 85vw;
    overflow-x: auto;
    padding: 1rem;
}

#topnav {
    font-size: var(--text-size-lg);
    margin-bottom: 3rem;
    justify-content: space-between;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: light-dark(
        var(--border-color),
        var(--dark-border-color)
    );

    a:link,
    a:visited {
        text-decoration: none;
    }

    a:hover,
    a:active {
        text-decoration: underline;
        text-decoration-color: light-dark(
            var(--link-color),
            var(--dark-link-color)
        );
        text-underline-offset: 0.14rem;
        color: light-dark(var(--link-color), var(--dark-link-color));
    }

    #logotext {
        display: block;
        white-space: nowrap;
        text-overflow: clip;
    }
}

#breadcrumb {
    font-size: var(--text-size-sm);
    margin-bottom: 2rem;

    a:link {
        text-decoration: none;
    }

    a:link:hover {
        text-decoration: underline;
        color: light-dark(var(--link-color), var(--dark-link-color));
        text-decoration-style: solid;
    }
}

#sidebar {
    background-color: light-dark(var(--bg-color), var(--dark-bg-color));

    .content > p {
        padding-left: 1rem;
    }

    details {
        margin-top: 1rem;
        summary,
        p {
            padding-left: 1rem;
            margin-block-end: 0.5rem;
            margin-block-start: 0.5rem;
        }
        p {
            margin-left: 1rem;
        }
    }

    details > details {
        margin-left: 1rem;
    }

    summary {
        cursor: pointer;
    }
}

#sidebar-toggle {
    display: none;
}

#theme-toggle {
    font-size: var(--text-size-3xl);
    position: fixed;
    bottom: 0;
    left: 0.6rem;
    cursor: pointer;
    opacity: 0.8;
}

#theme-toggle:hover {
    opacity: 1;
}

#series-footer {
    margin-top: 4rem;
    border-top: 1px solid
        light-dark(var(--border-color), var(--dark-border-color));
}

blockquote {
    background-color: light-dark(
        var(--highlight-bg-color),
        var(--dark-highlight-bg-color)
    );
    padding: 1rem 0.5rem 1rem 2rem;
    margin: 2rem 0 2rem 1rem;
    border-left: 2px solid light-dark(var(--link-color), var(--dark-link-color));

    p:first-child {
        margin-block-start: 0px;
    }

    p:last-child {
        margin-block-end: 0px;
    }
}

hr {
    border-color: light-dark(var(--border-color), var(--dark-border-color));
    border-width: 0 0 1px 0;
}

@media (max-width: 799px) {
    #sidebar {
        width: 0vw;
        max-width: 500px;
        height: 0vh;
        overflow-y: auto;
        position: fixed;
        top: -2vh;
        left: -2vw;
        opacity: 0;
        transition:
            top 0.3s ease,
            left 0.3s ease,
            height 0.3s ease,
            width 0.3s ease,
            opacity 0.3s ease;

        .content {
            margin: 4rem 1rem;
        }
    }

    #sidebar-toggle-label {
        position: fixed;
        top: 0.6rem;
        left: 0.6rem;
        font-size: var(--text-size-lg);
        cursor: pointer;
        transition:
            top 0.3s ease,
            left 0.3s ease,
            transform 0.3s ease;
        z-index: 1;
        opacity: 0.85;
    }

    #sidebar-toggle-label:hover,
    #sidebar-toggle-label:active {
        opacity: 1;
    }

    #sidebar-toggle:checked ~ #sidebar-toggle-label {
        top: 1.6rem;
        left: 2rem;
        transform: rotate(90deg);
    }

    #sidebar-toggle:checked ~ #sidebar {
        top: 2vh;
        left: 2vw;
        width: 80vw;
        height: 96vh;
        opacity: 1;
        box-shadow: 8px 8px 16px 16px
            light-dark(var(--shadow-color), var(--dark-shadow-color));
    }

    #sidebar-toggle:checked ~ #theme-toggle {
        display: none;
    }
}

@media (min-width: 481px) {
    html {
        font-size: 1.125rem;
    }
    body {
        margin: 4rem;
        margin-top: 2rem;
    }
    #sidebar-toggle-label {
        top: 0.8rem;
        left: 0.8rem;
    }
    #theme-toggle {
        top: 0.6rem;
        right: 1rem;
        bottom: auto;
        left: auto;
    }
}

@media (min-width: 800px) {
    body {
        margin: 2rem 3rem 2rem 0;
        display: flex;
    }
    main {
        width: 75vw;
    }
    #sidebar {
        width: 25vw;
        margin-right: 2rem;
        border-right: 1px solid
            light-dark(var(--border-color), var(--dark-border-color));

        .content {
            margin: 0 1rem 3rem 0;
            opacity: 0.9;
        }
    }

    #sidebar:hover .content {
        opacity: 1;
    }

    #sidebar-toggle-label {
        display: none;
    }
}