nav.bar {
    position: sticky;
    z-index: 99; /* Grrr... */
    top: 0;
    background: linear-gradient(
        to right,
        hsl(from var(--accent) calc(h + 10) calc(s - 10) calc(l - 3)),
        var(--accent)
    );
    border-bottom: 2px solid var(--border-header);
    border-image: linear-gradient(
            to right,
            hsl(
                from var(--border-header) calc(h + 20) calc(s + 10) calc(l + 3)
            ),
            var(--border-header)
        )
        3;

    > ul {
        width: min(calc(var(--max-width) - 0.5rem), 100%);
        margin-left: auto;
        margin-right: auto;
        display: flex;
        column-gap: 0.5rem;
        flex-wrap: wrap;
        font-size: 1.2rem;
        padding-inline: 0;
        margin-block: 0;
        list-style: none;
    }

    li a {
        display: inline-block;
        padding: 0.5rem;
        text-decoration: none;
        color: var(--fg-header);

        &:hover {
            background-color: rgb(0 0 0 / 10%);
            backdrop-filter: hue-rotate(5deg);
            margin-bottom: -2px;
            border-bottom: 2px solid rgb(0 0 0 / 30%);
        }

        &:active {
            background-color: rgb(0 0 0 / 20%);
            backdrop-filter: hue-rotate(10deg);
            margin-bottom: -2px;
            border-bottom: 2px solid rgb(0 0 0 / 50%);
        }

        &.active {
            text-decoration: underline;
        }
    }

    @media (width <=27rem) {
        background: linear-gradient(
            35deg,
            hsl(from var(--accent) calc(h + 10) calc(s - 10) calc(l - 3)),
            var(--accent)
        );

        > ul {
            justify-content: center;
        }
    }
}

#nav-index {
    font-family: var(--font-mono);
    font-weight: 500;
}

@media (width <=27rem) {
    #nav-index,
    #nav-index:hover,
    #nav-index:active {
        border-bottom: 0;
        margin-bottom: 0;
    }
}

.navbreak-show {
    display: none;
}

@media (width <= 21.5rem) {
    .navbreak-show {
        display: initial;
    }
}