Pretty native scrollbars (webkit and mozilla)

pretty-scrollbars.css

/* Pretty scrollbars */
@-moz-document url-prefix() {
  .pretty-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.5) transparent;
  }
}
.pretty-scrollbar {
  -ms-overflow-style: none;
}
.pretty-scrollbar::-webkit-scrollbar {
  width: 0.75rem;
}
.pretty-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.pretty-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5); /* Adjust scrollbar color */
  border-radius: 20px; /* Adjust scrollbar border radius */
  border: 3px solid transparent; /* Add space around the scrollbar */
  background-clip: content-box; /* Clip background to content box, not border box */
}

.pretty-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.7); /* Adjust scrollbar color on hover */
}