@layer base {
  html,
  body {
    margin: 0;
    padding: 0;
  }
  body {
    overscroll-behavior: none;
  }
  main > :first-child {
    margin-top: 0 !important;
  }
  main > :last-child {
    margin-bottom: 0 !important;
  }
}

::-webkit-scrollbar {
  display: none;
}

@keyframes spinArrows {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.hero-arrows-spinning {
  animation: spinArrows 12s linear infinite !important;
  transform-origin: center center !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero-arrows-spinning {
    animation: none !important;
  }
}