@keyframes move {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}

.background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: #000000;
    overflow: hidden;
}

.background span {
    width: 12vmin;
    height: 12vmin;
    border-radius: 12vmin;
    backface-visibility: hidden;
    position: absolute;
    animation: move;
    animation-duration: 28;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


.background span:nth-child(0) {
    color: #eceaea;
    top: 64%;
    left: 57%;
    animation-duration: 44s;
    animation-delay: -157s;
    transform-origin: -19vw -14vh;
    box-shadow: -24vmin 0 3.3813521013792536vmin currentColor;
}
.background span:nth-child(1) {
    color: #b9bb1b;
    top: 6%;
    left: 98%;
    animation-duration: 91s;
    animation-delay: -207s;
    transform-origin: 0vw 17vh;
    box-shadow: 24vmin 0 3.8008159847536347vmin currentColor;
}
.background span:nth-child(2) {
    color: #eceaea;
    top: 30%;
    left: 69%;
    animation-duration: 75s;
    animation-delay: -14s;
    transform-origin: -15vw 11vh;
    box-shadow: -24vmin 0 3.4812831860992164vmin currentColor;
}
.background span:nth-child(3) {
    color: #eceaea;
    top: 8%;
    left: 72%;
    animation-duration: 28s;
    animation-delay: -195s;
    transform-origin: -12vw -5vh;
    box-shadow: 24vmin 0 3.6120383404512193vmin currentColor;
}
.background span:nth-child(4) {
    color: #eceaea;
    top: 19%;
    left: 6%;
    animation-duration: 69s;
    animation-delay: -148s;
    transform-origin: 16vw 8vh;
    box-shadow: -24vmin 0 3.5491491437481186vmin currentColor;
}
.background span:nth-child(5) {
    color: #b9bb1b;
    top: 1%;
    left: 2%;
    animation-duration: 119s;
    animation-delay: -60s;
    transform-origin: 12vw 21vh;
    box-shadow: 24vmin 0 3.0029813478880367vmin currentColor;
}
.background span:nth-child(6) {
    color: #b9bb1b;
    top: 1%;
    left: 94%;
    animation-duration: 71s;
    animation-delay: -147s;
    transform-origin: -5vw -2vh;
    box-shadow: 24vmin 0 3.561592530636151vmin currentColor;
}
.background span:nth-child(7) {
    color: #b9bb1b;
    top: 97%;
    left: 34%;
    animation-duration: 77s;
    animation-delay: -45s;
    transform-origin: -21vw 20vh;
    box-shadow: -24vmin 0 3.332245188864828vmin currentColor;
}
.background span:nth-child(8) {
    color: #b9bb1b;
    top: 66%;
    left: 28%;
    animation-duration: 17s;
    animation-delay: -29s;
    transform-origin: -2vw 2vh;
    box-shadow: -24vmin 0 3.412612744370935vmin currentColor;
}
.background span:nth-child(9) {
    color: #eceaea;
    top: 5%;
    left: 88%;
    animation-duration: 49s;
    animation-delay: -210s;
    transform-origin: 5vw 8vh;
    box-shadow: 24vmin 0 3.0258183737669926vmin currentColor;
}

.form-container {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    border-radius: 15px;
    width: 400px;
    height: fit-content;
    overflow: hidden;
    animation: changebg 5s infinite alternate;
}

@keyframes changebg {
    0% {
        background: rgba(255, 255, 255, 0.1);
    }
    100% {
        background: rgba(255, 255, 255, 0);
    }
}



  
input{
    border: none !important;
    transition: all 0.3s;
}
input:focus{
    outline: none !important;
    box-shadow: 0 0 5px 0 blue !important;
}