#particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

#particles::before,
#particles::after {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: repeat;
    background-size: 220px 220px;
    opacity: 0.38;
}

#particles::before {
    background-image:
        radial-gradient(circle at 15% 30%, rgba(255, 105, 180, 0.9) 0 2px, transparent 3px),
        radial-gradient(circle at 70% 80%, rgba(255, 20, 147, 0.85) 0 2px, transparent 3px),
        radial-gradient(circle at 45% 50%, rgba(155, 89, 182, 0.75) 0 1px, transparent 2px);
    animation: float-up 18s linear infinite;
}

#particles::after {
    background-image:
        radial-gradient(circle at 20% 80%, rgba(255, 105, 180, 0.6) 0 1px, transparent 2px),
        radial-gradient(circle at 80% 20%, rgba(0, 255, 255, 0.55) 0 1px, transparent 2px);
    animation: float-up 28s linear infinite reverse;
}

@keyframes float-up {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-220px);
    }
}