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

.flex {
  display: flex;
}

.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-1{
    margin: 5px;
}

.p-1 {
    padding: 10px;
}

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

::-webkit-scrollbar-track {
  background: #222; /* Track color (dark black) */
  border-radius: 10px; /* Optional: rounded track corners */
}

::-webkit-scrollbar-thumb {
  background-color: #444; /* Thumb color (dark gray) */
  border-radius: 10px; /* Optional: rounded thumb corners */
  border: 3px solid #222; /* Adds padding-like effect with track color */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #666; /* Lighter gray on hover for thumb */
}

::-webkit-scrollbar-thumb:active {
  background-color: #888; /* Even lighter gray when thumb is active (clicked) */
}