#auroraBackground {

    position: fixed;

    inset: 0;

    overflow: hidden;

    background: radial-gradient(circle at center, #f7fbff, #edf4ff);

}

.aurora {

    position: absolute;

    width: 850px;

    height: 850px;

    border-radius: 50%;

    opacity: .35;

    filter: blur(180px);

    animation: auroraMove 18s ease-in-out infinite alternate;

}

.aurora-1 {

    background: #3b82f6;

    top: -300px;

    left: -250px;

}

.aurora-2 {

    background: #06b6d4;

    right: -250px;

    top: 15%;

    animation-delay: -6s;

}

.aurora-3 {

    background: #7c3aed;

    bottom: -280px;

    left: 25%;

    animation-delay: -12s;

}

@keyframes auroraMove {

    0% {

        transform: translate(0, 0) scale(1);

    }

    50% {

        transform: translate(200px, 120px) scale(1.2);

    }

    100% {

        transform: translate(-180px, -100px) scale(.95);

    }

}