*{
    padding: 0px;
    margin: 0px;
}

body{
    background-color: #0c1b31;
    display: flex;
    justify-content: center;
    height: 100vh;
    align-items: center;
}

.circle1{
    width: 300px;
    height: 300px;
    position: absolute;
    top:0px;
    left: 0px;
    background-image: linear-gradient(45deg,rgb(59, 116, 238),rgb(0, 255, 195));
    clip-path: circle(50% at 20% 20%);
    z-index: -1;
    animation-name: circle1;
    animation-duration: 6s;
    animation-iteration-count: infinite;
 
}

.circle2{
    width: 600px;
    height: 300px;
    position:absolute;
    bottom: 0;
    right:0px;
    z-index: -2;
    background-image: linear-gradient(rgb(255, 0, 128),rgba(59, 116, 238, 0.822));
    clip-path: circle(50% at 90% 90%);
    animation-name: circle2;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    
    
}

.circle3{
    width: 250px;
    height: 250px;
    position:absolute;
    left:250px;
    top: 220px;
    background-image: linear-gradient(rgb(255, 0, 128),rgba(59, 116, 238, 0.822));
    clip-path: circle(50%);
    z-index: -3;
    animation-name: circle2;
    animation-duration: 5s;
    animation-iteration-count: infinite;   
}

.circle4{
    width: 150px;
    height: 150px;
    position:absolute;
    right:250px;
    top: 110px;
    background-image: linear-gradient(rgb(59, 116, 238),rgb(0, 255, 195));
    z-index: -3;
    clip-path: circle(50%);
    animation-name: circle3;
    animation-duration: 8s;
    animation-iteration-count: infinite;   
}

.form{
    background-color: #81ca92;
    width: 30%;
    padding:40px;
    margin:40px;
    text-align: center;
    border-radius: 40px;
    border: 15px solid #10321f;
    box-shadow: -3px 6px 7px;
    font-size: 17px;
}

.input{
    width:80%;
    box-sizing: border-box;
    text-align: center;
    height:30px;
    margin:10px;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0px 3px 2px rgb(31, 27, 27);
    border:none;
}

.input::placeholder{
    font-size: 15px;
    padding: 20px;
}

#submit{
    padding:5px;
    font-size: 15px;
    background-color: #e4b94dfa;
    font-weight: 550;
    border-radius:10px ;
    box-shadow: 0px 3px 4px rgb(31, 27, 27);
    border:none;
    cursor: pointer;
}

#submit:hover{
    filter:brightness(.8);
}


@keyframes circle1 {
    0%{
      background: rgb(59, 116, 238);
    }

    30%{
        background:rgb(255, 0, 128);
    
    }

    60%{
        background:rgb(0, 255, 195);
       }
    70%{
        background:rgb(204, 0, 255);
    }
    100%{
        background: rgb(59, 116, 238);
    }  
}

@keyframes circle2 {
    100%{
      background: rgb(59, 116, 238);
    }

    70%{
     background:rgb(0, 255, 195);
    }

    60%{
        background:rgb(204, 0, 255);
       }
    30%{
        background: rgb(59, 116, 238);
        
    }
    0%{
        background:rgb(255, 0, 128);
       
    } 
}

@keyframes circle3 {
    100%{
      background: rgba(79, 214, 12, 0.795);
    }

    70%{
     background:rgb(37, 46, 223);
    }

    60%{
        background:rgb(0, 255, 242);
       }
    30%{
        background: rgb(240, 47, 47);
        
    }
    0%{
        background:rgba(225, 239, 20, 0.804);
       
    } 
}