/* Style the entire scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 16px;
}

/* Style the scrollbar track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Style the scrollbar thumb */
::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 8px;
}

/* Style the scrollbar thumb on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Dark mode variations */
/* Style the entire scrollbar in dark mode */
body.dark-mode ::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

/* Style the scrollbar track in dark mode */
body.dark-mode ::-webkit-scrollbar-track {
    background: #121212; /* Matching dark background to the page */
}

/* Style the scrollbar thumb in dark mode */
body.dark-mode ::-webkit-scrollbar-thumb {
    background: #969696;
    border-radius: 8px;
}

/* Style the scrollbar thumb on hover in dark mode */
body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #555555; /* Slightly lighter dark for hover effect */
}