.flex {
    display: flex;
}

.border {
    border: 1px solid red;
    margin: 3px;
}

.justify-center {
    justify-content: center;
}

.items-center {
    align-items: center;
}

.bg-black {
    background-color: black;
    color: white;
}

.invert {
    filter: invert(1);
}

.bg-grey {
    background-color: #121212;
}

.rounded {
    border-radius: 7px;
}

.m-2 {
    margin: 5px;
}

.m-1 {
    margin: 5px;
}

.p-1 {
    padding: 10px;
}

.archivo-black-regular {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-weight: bold;
}

/* Scrollbar Starting...................  */


/* Works on Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #121212;
    /* dark background */
}

::-webkit-scrollbar-thumb {
    background: #444;
    /* scrollbar color */
    border-radius: 8px;
}

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

/* Firefox support */
* {
    scrollbar-width: thin;
    scrollbar-color: #444 #121212;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #555, #222);
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
}


/* Scrollbar Ending...................  */