*{
    margin: 0;
    padding: 0;
}
#loader{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    background-color: rgba(0, 0, 0, 0.89);
    backdrop-filter: blur(5px) ;
    width: 100%;
    height: 100vh;
visibility: hidden;
}

#loader.active{
visibility: visible;	
}

.lds-roller {
/* change color here */
color: white
}
.lds-roller,
.lds-roller div,
.lds-roller div:after {
box-sizing: border-box;
}
.lds-roller {
position: absolute;
top:45.5%;
left:39%;
transform: translate(-50%,-50%);
}
.lds-roller div {
animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
transform-origin: 40px 40px;
}
.lds-roller div:after {
content: " ";
display: block;
position: absolute;
width:3.5px;
height: 3.5px;
border-radius: 50%;
background: currentColor;
margin: -0.6px 0 0 -0.6px;
}

.lds-roller div:nth-child(1) {
animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
top: 40px;
left: 50px;
}
.lds-roller div:nth-child(2) {
animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
top: 47.71281px;
left: 46px;
}
.lds-roller div:nth-child(3) {
animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
top: 50.90963px;
left: 38.28221px;
}
.lds-roller div:nth-child(4) {
animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
top: 48px;
left: 30px;
}

@keyframes lds-roller {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}}
body{background: #00000d;
background: radial-gradient(circle, rgba(0, 0, 13, 1) 0%, rgba(0, 17, 23, 1) 78%, rgba(0, 55, 71, 1) 100%);
overflow: hidden;}
form{ margin: 0;
    padding: 0;
    width: 100%;
    overflow: hidden;
height: 100vh;
color: white;}
form img{width: 130%;
    position: relative;
    right: 100px;

}
#trans {width: 80%;}
#trans{position: relative;
right: 5px;}
form h1{text-align: center;
font-family: poppins;
color:rgba(255, 255, 255, 0.445);}
.fill{width: 100%;
   text-align: center;
}
.fill div{
    margin: 15px ;
}
.fill input{
    width: 250px;
    height: 30px;
    border: none;
    background-color:#3b8fb61c;
    border-radius: 15px;
    padding: 5px;
    color: white;
    font-family: poppins;
}
.fill input:focus{
       outline: none;
   
}
.fill i{position: relative;
left:-30px;
top: 5px;}

span{margin: 3px 0;}
.eerr,.perr{
    font-family: poppins;
    font-size: 10px;
    color: rgba(255, 0, 0, 0.726);
    margin: 5px 0;
}
.done{ font-family: poppins;
    font-size: 10px;
    color: greenyellow;
    margin: 0;}
form button{
    width: 20%;
    height: 30px;
    margin-top: 15px;
    border: none;
    background-color:#3b8fb6b7;
    border-radius: 5px;
    padding: 5px;
    color: white;
    font-family: poppins;
}
.switch,a{position: relative;
    text-align: center;
    color: rgba(255, 255, 255, 0.445);
    text-decoration: none;
    top: 20px;
}