#ScrollBar {
    display: flex; 
    flex-direction: column; 
    justify-content: start;
    align-items: end;
    width: 15px;
    height: 275px; 
    overflow-y: none; 
    scrollbar-width: none;
    position: fixed; 
    top: 50%; 
    transform: translateY(-50%);
    clip-path: inset(0 0 0 0);
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    mask-image: linear-gradient(0deg, rgba(0,0,0,0) 5%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
    left: 98.5%; 
    z-index: 10;
}

#ScrollBar div {
    display: flex; 
    flex-direction: column; 
    justify-content: start;
    align-items: end; 
    gap: 5px; 
    width: 100%; 
    height: min-content; 
    position: absolute;
    transition: transform 0.5s ease; 
}

@media (max-width: 1024px) {
    #ScrollBar {
        width: 15px;
        left: 95.5%;
    }
}