html {
    font-family: 'Inter', sans-serif;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
}

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

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

::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

body {
    background:
        radial-gradient(ellipse 1000px 600px at 50% 0%, rgba(62, 124, 255, 0.10), transparent 60%),
        radial-gradient(ellipse 900px 500px at 50% 100%, rgba(245, 197, 24, 0.06), transparent 60%),
        #0A0D12;
    overflow-x: hidden;
}

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

.hearts-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 13, 18, 0.45);
    z-index: 1;
    pointer-events: none;
}

.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;
    }
}