body {
    margin: 0;
    min-height: 100vh;
}

#nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0px 0px 10px black;
    background: #0000FF10;
}

#nav__label {
    display: none;
}

#nav ul {
    margin: 0;
    padding: 0;
}

#nav__ddl {
    display: flex;
}

.nav__item {
    padding: 10px 0;
    text-align: center;
    list-style: none;
}

.nav__cat {
    position: relative;
    flex-grow: 1;
}

#nav a:hover {
    opacity: 0.7;
}

.nav__menu {
    position: absolute;
    inset: 0;
    transform: translate(0, -100%);
    transition: transform 0.5s ease-out, opacity 0.25s;
    opacity: 0;
    pointer-events: none;
}

.nav__menu::before {
    content: "\00A0";
    display: block;
    padding: 10px 0;
    visibility: hidden;
}

.nav__cat:hover .nav__menu,
.nav__cat:focus-within .nav__menu {
    display: block;
    transform: translate(0, 0);
    opacity: 1;
    pointer-events: all;
}

.nav__item:not(.nav__cat) {
    background: #0000000A;
    &:hover {
        background: #0000001A;
    }
    &:last-child {
        border-radius: 0 0 10px 10px;
    }
}

#page-container {
    display: grid;
    min-height: 100vh;
    grid-template-rows: 1fr auto;
    grid-template-columns: 1fr auto;
}

#main {
    padding: 100px 0 50px 100px;
    font-size: 1.25em;
}

#sidebar {
    padding: 100px 100px 50px 0;
}

#footer {
    position: relative;
    bottom: 0;
    display: flex;
    grid-column: 1 / 3;
    color: whitesmoke;
    background-color: black;
}

#footer a {
    color: whitesmoke;
}

#footer a:hover {
    color: white;
}

#footer__spacer {
    flex: 1;
}

.footer__row {
    padding: 60px;

}

.footer__row a {
    display: block;
}

.hide {
    display: none;
}

.large {
    width: min(var(--width) * 1px, 100%);
    height: auto;
    aspect-ratio: calc(var(--width) / var(--height));
}

@media screen and (orientation:portrait) {
    body:has(#nav__input:checked) {
        height: 100vh;
    }

    #nav {
        height: 100%;
        z-index: 1;
        pointer-events: none;
        color: whitesmoke;
        box-shadow: none;
        filter: drop-shadow(0 0 10px);
        overflow: hidden;
        background: transparent;
    }

    #nav a {
        color: whitesmoke;
    }

    #nav a:hover {
        color: white;
    }

    #nav__label {
        display: block;
        width: 100%;
        height: 100%;
    }

    #nav__input:checked+#nav__label {
        pointer-events: all;
    }

    #nav__bars {
        position: absolute;
        pointer-events: all;
        z-index: 1;
        right: 5vh;
        bottom: 5vh;
        width: 5vh;
        height: 5vh;
    }

    .nav__bar {
        display: block;
        width: 100%;
        height: .5vh;
        position: absolute;
        left: 0;
        background: #000;
        transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    }

    #nav__bar1 {
        transform: translate(0, 0) rotate(0);
    }

    #nav__bar2 {
        transform: translate(0, 400%);
    }

    #nav__bar3 {
        transform: translate(0, 800%) rotate(0);
    }

    #nav__input:checked+#nav__label #nav__bar1 {
        transform: translate(0, 400%) rotate(135deg);
    }

    #nav__input:checked+#nav__label #nav__bar2 {
        transform: translate(50%, 400%);
        opacity: 0;
    }

    #nav__input:checked+#nav__label #nav__bar3 {
        transform: translate(0, 400%) rotate(-135deg);
    }

    ul#nav__ddl {
        display: block;
        position: absolute;
        top: 0;
        width: 90%;
        pointer-events: all;
        background: unset;
        transition: transform 0.5s ease-out, opacity 0.25s;
        box-shadow: none;
        overflow: scroll;
        padding: 10vw 5vw 0;
        opacity: 0;
        transform: translate(100%, 0);
        font-size: large;
    }

    #nav__input:checked~#nav__ddl {
        opacity: 1;
        transform: translate(0, 0);
    }

    .nav__cat {
        position: static;
        margin-bottom: 25px;
        padding: 0;
        border-radius: 25px;
        background: black;
        opacity: 1;
        overflow: hidden;
    }

    .nav__item-text {
        display: block;
        width: calc(100% - 20px);
        height: 25px;
        padding: 10px;
    }

    .nav__item-label {
        position: absolute;
        height: 10vw;
        width: 10vw;
        right: 0;
    }

    .nav__menu {
        position: static;
        display: grid !important;
        opacity: 1;
        filter: unset;
        transition: grid-template-rows 0.5s ease-out;
        transform: unset !important;
        grid-template-rows: 0fr;
    }

    .nav__menu>* {
        padding: 0;
        overflow: hidden;
    }

    .nav__menu::before {
        content: unset;
    }

    .nav__cat-checkbox:checked~.nav__menu {
        grid-template-rows: 1fr;
        pointer-events: all;
    }
    .nav__cat-label {
        position: relative;
    }

    .nav__cat-label::after {
        position: absolute;
        content: "◀";
        color: white;
        top: 22.5px;
        right: 22.5px;
        line-height: 0;
    }

    .nav__cat-label:has(.nav__cat-checkbox:checked)::after {
        content: "▼";
    }


    #main {
        padding: 5vw 10vw 5vw;
        font-size: 16px;
    }

    #main input {
        font-size: 16px;
    }

    #sidebar {
        display: none;
    }
}