:root {
    --bg2: light-dark(#d77a61, #272e3c);
    --bg1: light-dark(#d8b4a0, #2e3542);
    --bg0: light-dark(#eff1f3, #31394c);
    --fg0: light-dark(#000, #e0e0e0);
    --fg1: light-dark(#31394c, #e0e0e0);
    --l01: light-dark(#333333, #bfbfbf);
    --l02: light-dark(#5a5a5a, #ffffff);
    --l03: light-dark(#161616, #d5d5d5);
}

[data-theme="light"] {
    color-scheme: light !important;
}

[data-theme="dark"] {
    color-scheme: dark !important;
}

#mainicon {
    width: 64px;
}

* {
    box-sizing: border-box;
    font-family: IBM Plex Sans, sans-serif;
}

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

    &:hover {
        color: var(--l02);
    }

    &:active {
        color: var(--l03);
    }
}

html {
    overflow-y: auto;
}

body {
    background-color: var(--bg0);
}

.main-flow {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: row;
    gap: 0;
    justify-content: center;
}

.info-pane {
    min-height: 100%;
    width: 16rem;
    background-color: var(--bg1);
}

.info-header {
    background-color: var(--bg2);
    height: 8rem;
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: flex-end;
    padding: 0.2rem 1rem 0.2rem 0.2rem;
    font-size: 1.5rem;
}

.toggle-mode {
    font-size: 1rem;
    color: var(--l01);
    text-decoration: underline;

    &:hover {
        color: var(--l02);
    }

    &:active {
        color: var(--l03);
    }
}

.info-content-mobile,
.toggle-mode-mobile {
    display: none;
}

.info-content-main {
    display: flex;
    flex-direction: column;

    .info-content-category {
        display: flex;
        flex-direction: column;

        >* {
            text-align: right;
            margin: 0 1rem 0.5rem auto;
        }

        >.info-content-category-header {
            font-weight: 500;
            margin: 1rem auto 1rem 1rem;
        }
    }
}

.pane-divider {
    display: none;
    width: 2px;
    min-width: 2px;
    max-width: 2px;
    height: 100%;
    background-color: var(--bg2);
}

.offset-spacer {
    flex: 1 1;
    max-width: 16rem;
    min-width: 0;
}

.main-pane {
    width: 100%;
    max-width: 48rem;
    background-color: var(--bg0);
    padding: 1rem;
    font-size: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0rem;
    * { font-family: PT Serif, serif; }
    pre, code {
        font-family: monospace;
        * {
            font-family: monospace;
        }
    }
    hr {
        width:100%;
    }
    p,
    blockquote,
    i,
    b,
    em,
    ul {
        line-height: calc(1ex / 0.30);
        min-height: calc(1ex / 0.30);
        margin: 0 0 calc(1ex / 0.30) 0;
    }

    h1,h2,h3,h4,h5,h6 {
        line-height: calc(1ex / 0.36);
        min-height: calc(1ex / 0.36);
        margin: calc(1ex / 0.36) 0 calc(1ex / 0.36) 0;
    }

    .authors-notes {
        font-size: 0.95rem;
    }

    blockquote {
        padding-left: 2rem;
        border-left: 4px solid var(--l01);

        p {
            margin: 0;
        }
    }

    hr {
        margin-bottom: calc(1ex / 0.30);
    }
}

@media (width <=960px) {
    body {
        font-size: clamp(1rem, 1.848vw + 0.522rem, 2rem);
        line-height: clamp(1.5rem, 2.032vw + 0.974rem, 2.6rem);
    }

    .main-flow {
        flex-direction: column;
        justify-content: unset;
    }

    .offset-spacer {
        display: none;
    }

    .info-pane {
        height: fit-content;
        margin-top: 0rem;
        padding: 0.75rem 0 0 0;
        width: 100%;
        min-height: 0%;

        .info-header {
            height: fit-content;
            padding: 0.25rem 0.5rem;

        }
    }

    .info-header {
        flex-direction: row;
    }

    .info-content .info-content-mobile {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        padding: 0.25rem 0.5rem;
    }

    .info-content-main {
        display: none;
    }

    .main-pane {
        margin: 0 auto auto auto;
    }

    .toggle-mode-mobile {
        display: inline-flex;
        margin-left: 0;
        margin-right: auto;
    }
    #mainicon {
        width: 32px;
        margin: auto;
    }
    #iconcontainer {
        display: flex;
        gap: 0.5rem;
    }
}