/* Styling the entire scrollbar */
::-webkit-scrollbar {
    width: 6px;
    /* Width of the scrollbar */
    height: 6px;
    /* Height of the horizontal scrollbar */
}

/* Styling the track (the background area) */
::-webkit-scrollbar-track {
    background-color: color-black;
    /* Light gray track */
    border-radius: 10px;
    /* Rounded corners for the track */
}

/* Styling the thumb (the draggable part of the scrollbar) */
::-webkit-scrollbar-thumb {
    background-color: #2d3748;
    /* Darker color for the thumb */
    border-radius: 10px;
}

/* Hover effect on the thumb */
::-webkit-scrollbar-thumb:hover {
    background-color: color-gray-900;
    /* Darker thumb when hovering */
}

/* Optional: Customize the scrollbar for the horizontal scrollbar */
::-webkit-scrollbar-horizontal {
    height: 10px;
    /* Customize the height of the horizontal scrollbar */
}

/* Optional: Customize the scrollbar for the vertical scrollbar */
::-webkit-scrollbar-vertical {
    width: 5px;
    /* Customize the width of the vertical scrollbar */
}


h1 {
    text-transform: uppercase;
    background: linear-gradient(45deg,
            #ff5252,
            #ff9800,
            #00e676,
            #40c4ff,
            #ff5252);
    -webkit-background-clip: text;
    background-size: 300% 300%;
    -webkit-text-fill-color: transparent;
    animation: rainbow-text 5s linear infinite;
}

@keyframes rainbow-text {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    } }