#bar-parent {
    --active-sidebar-width: max(25vw, 15em);
    --active-bottombar-height: max(min(75vw, 40vh), 15em);
    --sidebar-width: var(--active-sidebar-width);
    --bottombar-height: var(--active-bottombar-height);
    --hider-handle-size: 10px;
    --animation-time: 1s;
}
#bar-parent[hide-sidebar] {
    --sidebar-width: 0px;
}
#bar-parent[hide-bottombar] {
    --bottombar-height: 0px;
}
#bar-parent {
    position: relative;
}
#sidebar-content {
    transition: width var(--animation-time) ease-in-out, margin-bottom var(--animation-time) ease-in-out;
    width: calc(100% - var(--sidebar-width) - var(--hider-handle-size));
    margin-bottom: calc(var(--bottombar-height) + var(--hider-handle-size));
    position: relative;
}
#sidebar-container {
    position: fixed;
    top: var(--nav-height);
    bottom: 0;
    right: 0;
    border-top: 3pt solid var(--bs-primary);
    border-bottom: 3pt solid var(--bs-primary-2);
    width: var(--active-sidebar-width);
    transition: right var(--animation-time) ease-in-out, width var(--animation-time) ease-in-out;
}
#bar-parent[hide-sidebar] #sidebar-container {
    right: calc(var(--active-sidebar-width) * -1);
}
#bottombar-container {
    position: fixed;
    left: var(--nav-width);
    right: calc(var(--sidebar-width) + var(--hider-handle-size));
    bottom: 0;
    border-bottom: 3pt solid var(--bs-primary-2);
    height: var(--active-bottombar-height);
    transition: bottom var(--animation-time) ease-in-out, height var(--animation-time) ease-in-out, right var(--animation-time) ease-in-out;
}
#bar-parent[hide-bottombar] #bottombar-container {
    bottom: calc(var(--active-bottombar-height) * -1);
}
#sidebar-hider {
    position: fixed;
    top: var(--nav-height);
    bottom: 0;
    right: var(--sidebar-width);
    width: var(--hider-handle-size);
    background-color: var(--bs-primary);
    color: var(--bs-primary-3);
    padding: 48.7vh 0;
    transform: scaleY(10) translateY(calc(var(--nav-height) * -0.25));
    cursor: zoom-out;
    transition: right var(--animation-time) ease-in-out;
    z-index: 1;
}
#bar-parent[hide-sidebar] #sidebar-hider {
    cursor: zoom-in;
}
#sidebar-hider::after {
    content: ">";
    mix-blend-mode: multiply !important;
}
#sidebar-link-display {
    position: absolute;
    left: calc(-1 * var(--hider-handle-size) - 1.7em);
    top: 0.5em;
    padding: 0.3em var(--hider-handle-size) 0.3em 0;
    border-radius: 0.5em;
    writing-mode: sideways-lr;
}
#sidebar-link-display code {
    color: white;
    text-shadow: 0 0 2px black;
}
#bar-parent[hide-sidebar] #sidebar-hider::after {
    content: "<";
}
#bottombar-hider {
    position: fixed;
    left: var(--nav-width);
    right: calc(var(--sidebar-width) + var(--hider-handle-size));
    bottom: var(--bottombar-height);
    height: var(--hider-handle-size);
    background-color: var(--bs-primary);
    color: var(--bs-primary-3);
    cursor: zoom-out;
    transition: bottom var(--animation-time) ease-in-out, right var(--animation-time) ease-in-out;
    z-index: 1;
}
#bar-parent[hide-bottombar] #bottombar-hider {
    cursor: zoom-in;
}
#bottombar-link-display {
    position: absolute;
    right: 0.5em;
    bottom: 0.2em;
    padding: 0 0.3em var(--hider-handle-size);
    border-radius: 0.5em;
}
#bottombar-link-display code {
    color: white;
    text-shadow: 0 0 2px black;
}
.logo-holder {
    position: fixed;
    right: 0;
    bottom: 10px;
    width: calc(min(var(--sidebar-width) * 0.75, 200px));
    padding: 0.5em 0.7em;
    border-radius: 1em 0 0 1em;
    opacity: 0.8;
    transition: width var(--animation-time) ease-in, padding var(--animation-time) ease-out, border-radius var(--animation-time) ease-in;
}
#bar-parent[hide-sidebar] #sidebar-container .logo-holder {
    padding: 0;
    border-radius: 0;
    transition-duration: calc(var(--animation-time) / 2);
    transition-timing-function: ease-in;
}
#nav-hider {
    width: 1em;
    height: 1em;
    border-radius: 0 0 1em;
    position: fixed;
    left: var(--nav-width);
    top: var(--nav-height);
    color: white;
    background-color: var(--bs-primary);
    cursor: pointer;
    z-index: 1;
}
#nav-hider:hover {
    background-image: linear-gradient(135deg, var(--bs-primary), var(--bs-primary-3));
    border-radius: 0 0 0.9em;
}
#nav-hider::after {
    display: ruby-text;
    pointer-events: none;
}
body:has(> .navbar[hidden]) #nav-hider::after {
    content: "+"
}
body:has(> .navbar:not([hidden])) #nav-hider::after {
    content: "×"
}
@media (max-width: 991px) {
    #bar-parent {
        --hider-handle-size: 1em;
    }
    #nav-hider {
        width: 2em;
        height: 2em;
        background-color: var(--bs-primary-3);
        opacity: 0.8;
    }
    #nav-hider::after {
        display: unset;
        margin-left: 0.6em;
    }
}
[data-to-bottombar] {
    cursor: pointer;
}
.scroll-right {
    position: absolute;
    right: 0.5em;
    top: 50%;
    color: var(--bs-primary);
    font-size: xx-large;
    cursor: pointer;
}
.scroll-right::before {
    content: '🠊';
}
.scroll-left {
    position: absolute;
    left: 0.5em;
    top: 50%;
    color: var(--bs-primary);
    font-size: xx-large;
    cursor: pointer;
}
.scroll-left::before {
    content: '🠈';
}
@media not (pointer) {
    .scroll-left, .scroll-left {
        display: none;
    }
}

#pos-svg svg {
    min-width: 100vw;
    min-height: 50vh;
    overscroll-behavior-x: contain;
}

.loading {
    display: none;
}

#topics-list .secondary {
    filter: none;
    text-shadow: 1px 1px 2px;
}