body {
    font-family: 'Space Mono', monospace;
    background-color: #131313 !important;
    background-image: url('../static/images/overlay.png') !important;
    background-attachment: fixed !important;
    background-blend-mode: multiply !important;
    background-size: auto !important;
}

html {
    cursor: url('images/cursor-default.svg') 13 4, auto !important
}

a, button {
    cursor: url('images/cursor-pointer.svg') 13 4, auto !important;
}

input[type="range"] {
    cursor: url('images/cursor-pointer.svg') 13 4, auto !important;
}

.special {
    cursor: url('images/cursor-rock.svg') 13 4, auto !important;
}

.material-icons {
    user-select: none;
    font-feature-settings: 'liga' 1;
    vertical-align: middle;
}
/* Ensure text overlay doesn't overflow */
#bottom-player {
    overflow: visible;
}

#player-volume {
    accent-color: #e5e5e5;
    width: 16px;
    height: 100px;
    margin: 0;
    -webkit-appearance: slider-vertical;
    appearance: slider-vertical;
}

#player-volume-wrap {
    position: relative;
    isolation: isolate;
}

.player-volume-popover {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 5px);
    width: 42px;
    height: 124px;
    padding: 8px 6px;
    border-radius: 8px;
    background: rgba(10, 10, 10, 0.95);
    border: 1px solid #2a2a2a;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.45);
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: auto;
    transform: translate(-50%, 6px);
    transition: opacity 120ms ease 140ms, transform 120ms ease 140ms, visibility 0s linear 260ms;
}

#player-volume-wrap:hover .player-volume-popover,
#player-volume-wrap:focus-within .player-volume-popover {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: 0s, 0s, 0s;
}