.nav-hotspot {
    --dot-bg: rgba(80, 80, 80, 0.6);
    --dot-border: rgba(50, 50, 50, 0.7);

    border-radius: 50%;
    background: var(--dot-bg);
    border: 0.15rem solid var(--dot-border);
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.3);
    user-select: none;
    transition: background-color 0.2s, box-shadow 0.2s;
}

.nav-hotspot:hover {
    background-color: rgba(100, 100, 100, 0.7);
    box-shadow: 0 0.1rem 0.6rem rgba(0, 0, 0, 0.4);
}

.nav-hotspot:active {
    background-color: rgba(60, 60, 60, 0.7);
    box-shadow: 0 0.05rem 0.2rem rgba(0, 0, 0, 0.3);
}