main {
    --scrollbar-color-thumb: rgba(25, 25, 25, 0.29);
    --scrollbar-color-track: transparent;
    --scrollbar-width: thin;
    --scrollbar-width-legacy: 30px;
}

/* Modern browsers with `scrollbar-*` support */
@supports (scrollbar-width: auto) {
    main {
        scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
        scrollbar-width: var(--scrollbar-width);
        scrollbar-arrow-color: transparent;
    }
}

/* Legacy browsers with `::-webkit-scrollbar-*` support */
@supports selector(::-webkit-scrollbar) {

    main::-webkit-scrollbar-thumb {
        background: var(--scrollbar-color-thumb);
    }
    main::-webkit-scrollbar-track {
        background: var(--scrollbar-color-track);
    }
    main::-webkit-scrollbar {
        max-width: var(--scrollbar-width-legacy);
        max-height: var(--scrollbar-width-legacy);
    }
}

main::-webkit-scrollbar-thumb {
    background: transparent;
}
main::-webkit-scrollbar-track {
    background: transparent;
}
main:hover::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color-thumb);
}
main:hover::-webkit-scrollbar-track {
    background: var(--scrollbar-color-track);
}

main:hover {
    --fix: ; /* This custom property invalidates styles on hover, thereby enforcing a style recomputation. This is needed to work around a bug in Safari. */
}