html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

table {
  max-width: 100%;
}

.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(123, 44, 191, 0.55) rgba(17, 24, 39, 0.08);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(17, 24, 39, 0.08);
}

::-webkit-scrollbar-thumb {
  background: rgba(123, 44, 191, 0.55);
  border-radius: 999px;
  border: 2px solid rgba(17, 24, 39, 0.08);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 184, 148, 0.55);
}

html.dark * {
  scrollbar-color: rgba(123, 44, 191, 0.6) rgba(15, 23, 42, 0.9);
}

html.dark ::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.9);
}

html.dark ::-webkit-scrollbar-thumb {
  background: rgba(123, 44, 191, 0.6);
  border: 2px solid rgba(15, 23, 42, 0.9);
}

html.dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 184, 148, 0.65);
}

@media (max-width: 360px) {
  body {
    font-size: 14px;
  }
  .btn-hopper {
    letter-spacing: 0.08em;
  }
  .section-title {
    font-size: 1.05rem !important;
  }
}