/* hide nav if mainplayer's controls are hidden. but show the nav when the user scrolled down at all times. */
body:has(section.player .media-player .controls.hidden) nav {
    opacity: 0;
}

/* always show nav on hover */
nav:hover {
    opacity: 1 !important;
}

/* keep mainplayer's controls visible while hovering the nav */
body:has(nav:hover) section.player .media-player .controls,
body:has(nav:hover) section.player .media-player .media-nav-wrapper {
    opacity: 1 !important;
}

nav.visible,
nav.visible::before {
    opacity: 1 !important;
}

nav.visible .logo-small {
    opacity: 1;
    pointer-events: all;
}

nav {
    z-index: 3;
    color: var(--lightgrey);
    position: fixed;
    padding: max(calc(var(--padding) / 1.5), var(--minPaddingY)) calc(var(--padding)/1);
    pointer-events: none;
    transition: opacity var(--fadeTransition);
    height: 1em;
    box-sizing: content-box;
    display: flex;
    width: calc(100% - var(--padding)* 2);
    justify-content: space-between;
}

nav::before {
    opacity: 0;
    width: 100%;
    height: 100%;
    content: "";
    left: 0;
    top: 0;
    position: absolute;
    transition: opacity var(--fadeTransition);
    /* thx to https://non-boring-gradients.netlify.app/ */
    background: linear-gradient(180deg, rgb(0% 0% 0%) 0%, rgb(0% 0% 0% / 0.999755859375) 6.25%, rgb(0% 0% 0% / 0.998046875) 12.5%, rgb(0% 0% 0% / 0.993408203125) 18.75%, rgb(0% 0% 0% / 0.984375) 25%, rgb(0% 0% 0% / 0.969482421875) 31.25%, rgb(0% 0% 0% / 0.947265625) 37.5%, rgb(0% 0% 0% / 0.916259765625) 43.75%, rgb(0% 0% 0% / 0.875) 50%, rgb(0% 0% 0% / 0.822021484375) 56.25%, rgb(0% 0% 0% / 0.755859375) 62.5%, rgb(0% 0% 0% / 0.675048828125) 68.75%, rgb(0% 0% 0% / 0.578125) 75%, rgb(0% 0% 0% / 0.463623046875) 81.25%, rgb(0% 0% 0% / 0.330078125) 87.5%, rgb(0% 0% 0% / 0.176025390625) 93.75%, rgb(0% 0% 0% / 0) 100%);
    z-index: -1;
}

nav ul {
    display: flex;
    justify-content: flex-end;
    gap: 0 calc(var(--padding)/1);
    align-items: center;
    pointer-events: all;
    margin-top: -1em;
}

nav li {
    /* transition: color var(--linkTransition); */
    cursor: pointer;
    padding: var(--linkPadding) var(--linkPadding);
    margin: calc(var(--linkPadding) * -1) calc(var(--linkPadding) * -1);
    text-shadow: var(--textShadow);
}

nav .logo-small {
    position: relative;
    height: 100px;
    width: 100px;
    margin-left: -50px;
    margin-top: -45px;
    padding: 0;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--fadeTransition);
}

nav .logo-small svg {
    width: 65%;
    height: 65%;
    scale: 1;
    object-fit: contain;
    position: absolute;
    z-index: -1;
}

@media (hover: hover) {
    nav li:hover {
        color: white;
    }
}

@media screen and (max-width: 600px) {
    .logo-small {
        display: none !important;
    }

    nav ul {
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
        gap: 0 calc(var(--padding)/2)
    }
}