.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 browsers (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 10px;
}

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

::-webkit-scrollbar-thumb {
  background: #444;        /* Thumb color */
  border-radius: 10px;
  border: 2px solid #121212; /* Optional: space around thumb */
}

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

/* For Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #444 #121212; /* thumb color | track color */
}