/* === Utility Classes === */

/* Border Utility */
.border {
    border: 2px solid red;
}

/* Flex Utilities */
.flex {
    display: flex;
}
.items-center {
    align-items: center;
}
.justify-center {
    justify-content: center;
}
.space-between {
    justify-content: space-between;
}
.gap-2 {
    gap: 8px;
}
.gap-4 {
    gap: 16px;
}

/* Spacing Utilities */
.p-1 {
    padding: 10px;
}
.m-1 {
    margin: 5px;
}

/* Cursor */
.cursor-pointer {
    cursor: pointer;
}

/* Border Radius */
.rounded {
    border-radius: 4px;
}

/* Background & Text Colors */
.bg-black {
    background-color: black;
    color: white;
}
.bg-gray {
    background-color: #1f1f1f;
    color: white;
}

/* Image/Element Filter */
.invert {
    filter: invert(1);
}

/* === Scrollbar Styling === */

/* Firefox Scrollbar */
body {
    scrollbar-width: thin;
    scrollbar-color: #444 #111;
}

/* Webkit Scrollbar (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #111; /* Scrollbar background */
}

::-webkit-scrollbar-thumb {
    background-color: #444; /* Scrollbar handle */
    border-radius: 10px;
    border: 2px solid #111; /* Padding effect */
}

::-webkit-scrollbar-thumb:hover {
    background-color: #666; /* Hover effect */
}