body {
margin: 0;
padding: 0;
}

.wrapper {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
background: #24C6DC; 
background: -webkit-linear-gradient(to right, rgb(142, 45, 226), rgb(74, 0, 224));  
background: linear-gradient(to right, rgb(142, 45, 226), rgb(74, 0, 224)); 
}
.reg {
height: 120vh;
}
.box div {
position: absolute;
width: 60px;
height: 60px;
background-color: transparent;
border: 6px solid rgba(255,255,255,0.8);
}

.box div:nth-child(1) {
top: 12%;
left: 42%;
animation: animate 10s linear infinite;
}

.box div:nth-child(2) {
top: 70%;
left: 50%;
animation: animate 7s linear infinite;
}
.box div:nth-child(3) {
top: 17%;
left: 6%;
animation: animate 9s linear infinite;
}

.box div:nth-child(4) {
top: 20%;
left: 60%;
animation: animate 10s linear infinite;
}

.box div:nth-child(5) {
top: 67%;
left: 10%;
animation: animate 6s linear infinite;
}

.box div:nth-child(6) {
top: 80%;
left: 70%;
animation: animate 12s linear infinite;
}

.box div:nth-child(7) {
top: 60%;
left: 80%;
animation: animate 15s linear infinite;
}

.box div:nth-child(8) {
top: 32%;
left: 25%;
animation: animate 16s linear infinite;
}

.box div:nth-child(9) {
top: 90%;
left: 25%;
animation: animate 9s linear infinite;
}

.box div:nth-child(10) {
top: 20%;
left: 80%;
animation: animate 5s linear infinite;
}

@keyframes animate {
0% {
transform: scale(0) translateY(-90px) rotate(360deg);
opacity: 1;
}

100% {
transform: scale(1.3) translateY(-90px) rotate(-180deg);
border-radius: 50%;
opacity: 0;
}
}
html, body {
    height: 100%;
}
/* Center the div */
.centered-div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width : 500px;
}
#forgot {
    float:right;
    color: #6610f2;
    font-weight: bold; 
    margin-right: 5px;
}
input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    margin: 0; 
}
input[type="number"] {
    -moz-appearance: textfield;
}