/* Navbar and Menu */
#navbar {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: var(--height-navbar);
    background: linear-gradient(to right, var(--color-accent), var(--color-accent-light));
    transition: all .25s;
    z-index: 1;
    align-items: center;
}
#navbar-content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--width-page);
    margin: 0 auto;
    height: 100%;
}
#menu {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    left: 0;
    top: var(--height-navbar);
    width: 100%;
    height: 100lvh;
    padding: var(--padding-default);
    background-color: var(--color-background-transparent);
    backdrop-filter: blur(var(--radius-blur));
    -webkit-backdrop-filter: blur(var(--radius-blur));
    transition: all .25s;
    z-index: 1;
}
#menu-closer {
    opacity: 0;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
#menu-items {
    transition: all .5s ease;
    transform: translateX(-100%);
    position: absolute;
    list-style-type: none;
    width: 100%;
    height: fit-content;
    z-index: 2;
}
#menu-items li {
    margin-bottom: var(--padding-small);
}
#menu-button {
    display: none;
    cursor: pointer;
    font-size: x-large;
}