@keyframes aurora {
    0% {
      background-position:50% 50%,50% 50%
    }
    to {
      background-position:350% 50%,350% 50%
    }
}

.aurora {
    opacity: 0.35;
    background-color: transparent;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 50vh;
    top: -4rem;
    position: absolute;
    z-index: 1;
}

.aurora::after {
    --stripes: repeating-linear-gradient( 100deg, #13171f 0%, #13171f 7%, transparent 10%, transparent 12%, #13171f 16% );
    --rainbow: repeating-linear-gradient( 100deg, #60a5fa 10%, #00b478 16%, #5eead4 22%, #60a5fa 30% );
    
    background-image: var(--stripes),var(--rainbow);
    animation: aurora 90s linear infinite;
    background-size:300%,200%;
    background-position:50% 50%,50% 50%;
    mask-image:radial-gradient(ellipse at 100% 0%,black 40%,transparent 70%);
    pointer-events:none;
    content:"";
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-size:200%,100%;
    mix-blend-mode:difference;
}