/* For WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 12px;
    /* Width of the scrollbar */
}

::-webkit-scrollbar-track {
    background: transparent;
    /* No background for the track */
}

/* Style the scrollbar thumb */
::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    /* Scrollbar thumb color */
    border-radius: 10px;
    /* Curved scrollbar thumb */
    border: none;
    /* No border to avoid edges */
}

/* On hover, change the scrollbar thumb color */
::-webkit-scrollbar-thumb:hover {
    opacity: .7;
}

/* Completely remove the top and bottom scrollbar arrows (buttons) */
::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
    /* Ensures the buttons are hidden */
}

/* For Firefox */
* {
    scrollbar-width: thin;
    /* Thin scrollbar */
    scrollbar-color: var(--primary-color) transparent;
    /* Scrollbar thumb color, no track color */
}

/* Example content styling */
body {
    margin: 0;
    padding: 0;
    height: 100vh;
    /* overflow-y: scroll; */
    /* Always show scrollbar */
}