/* global.css */
html {
  scrollbar-width: thin;
  scrollbar-color: #ffffff80 transparent;
  font-family: Inter, sans-serif;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: none;
}

::-webkit-scrollbar-thumb {
  background-color: #ffffff80;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #ffffff80;
}

body {
  overflow-x: hidden;
  background: radial-gradient(1000px 600px at 50% 0%, #3e7cff1a, #0000 60%), radial-gradient(900px 500px at 50% 100%, #f5c5180f, #0000 60%), #0a0d12;
}

.hearts {
  position: fixed;
  overflow: hidden;
  z-index: 0;
  inset: 0;
}

.hearts-overlay {
  position: fixed;
  z-index: 1;
  pointer-events: none;
  background: #0a0d1273;
  inset: 0;
}

.heart-particle {
  position: absolute;
  bottom: -12%;
  left: var(--left);
  width: var(--size);
  height: var(--size);
  fill: currentColor;
  opacity: 0;
  animation: rise var(--duration) linear infinite;
  animation-delay: var(--delay);
}

@keyframes rise {
  0% {
    transform: translateY(0) translateX(0) rotate(var(--rotate));
    opacity: 0;
  }

  6% {
    opacity: 1;
  }

  94% {
    opacity: 1;
  }

  100% {
    transform: translateY(-125vh) translateX(0) rotate(var(--rotate));
    opacity: 0;
  }
}

main {
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .heart-particle {
    animation: none;
    opacity: 0;
  }
}