:root {
  --scrollbar-width: 30px; /* Width of the scrollbar */
  --scrollbar-track-color: #333; /* Dark grey background for the scrollbar track */
  --scrollbar-thumb-color: #ffd700; /* Yellow color for the scrollbar thumb */
  --scrollbar-thumb-hover-color: #ffc107; /* Lighter yellow on hover */
  --scrollbar-border-radius: 10px; /* Rounded corners for the scrollbar thumb */
}

/* For WebKit browsers */
::-webkit-scrollbar {
  width: var(--scrollbar-width); /* Adjust width here */
  height: var(--scrollbar-width); /* For horizontal scrollbars */
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track-color);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-color);
  border-radius: var(--scrollbar-border-radius);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover-color);
}

/* For Firefox */
html {
  scrollbar-width: thin; /* For Firefox, this will be 'auto' or 'thin' */
  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color); /* thumb color and track color */
}