/* Deep-space scrollbars */

html {
    scrollbar-width: thin;
    scrollbar-color: rgba(90, 159, 212, 0.42) rgba(4, 8, 18, 0.92);
}

html::-webkit-scrollbar {
    width: 11px;
}

html::-webkit-scrollbar-track {
    background: rgba(4, 8, 18, 0.92);
    border-left: 1px solid rgba(90, 159, 212, 0.08);
}

html::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(126, 179, 240, 0.5), rgba(70, 120, 190, 0.38));
    border-radius: 999px;
    border: 2px solid rgba(4, 8, 18, 0.92);
    box-shadow: 0 0 10px rgba(90, 159, 212, 0.2);
}

html::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(168, 212, 255, 0.62), rgba(90, 159, 212, 0.48));
    box-shadow: 0 0 14px rgba(90, 159, 212, 0.32);
}

.year-nav {
    scrollbar-width: thin;
    scrollbar-color: rgba(90, 159, 212, 0.35) transparent;
}

.year-nav::-webkit-scrollbar {
    height: 5px;
}

.year-nav::-webkit-scrollbar-track {
    background: transparent;
}

.year-nav::-webkit-scrollbar-thumb {
    background: rgba(90, 159, 212, 0.35);
    border-radius: 999px;
}

.year-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(126, 179, 240, 0.5);
}

.modal-backdrop {
    scrollbar-width: thin;
    scrollbar-color: rgba(90, 159, 212, 0.42) rgba(2, 4, 14, 0.95);
}

.modal-backdrop::-webkit-scrollbar {
    width: 10px;
}

.modal-backdrop::-webkit-scrollbar-track {
    background: rgba(2, 4, 14, 0.95);
}

.modal-backdrop::-webkit-scrollbar-thumb {
    background: rgba(90, 159, 212, 0.4);
    border-radius: 999px;
    border: 2px solid rgba(2, 4, 14, 0.95);
}