@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
#login{
    font-size: 35px;
    position: absolute;
    top: 35vh;
    left: 16vw;
    font-family:'Righteous', cursive;
}
#load{
    
    background-repeat: no-repeat;
    background-image: url(img/load.gif);
    position: absolute;
    z-index: 199;
    height: 150%;
    width: 100%;
    background-size: 1340px 650px;
   margin-top: 30px;
}
.inp{
    font-size: 25px;
    position: absolute;
    top: 34vh;
    left: 30vw;
    color: rgb(255, 0, 119);
}
.in{font: 20px cursive;
    width: 250px;
    padding-left: 7px;
    margin-left: 20px;
}
.pur{
    margin-top: 12px;
    font-size: 20px;
    color:rgb(0, 0, 0);
    font-family: 'Righteous' ,cursive;
}
.cl{margin-right: 15px;margin-left: 13px;cursor: pointer;}
label{cursor: pointer;}
#sub{
    font-size: 25px;
    background-color: rgb(218, 255, 145);
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    padding: 0px 7px 0px 7px;
    border-radius: 25%;
    border-width: 7px;
    cursor: pointer;
}
#sub:hover{
    background-color: rgb(247, 0, 255);
    color:white;
}
input:hover{
    width: 200px;
    transition: 0.7s;
}
.cl:hover{
    width: 27px;;
}
.in{
    background-color: rgb(245, 250, 173);
    border-radius: 14px;
    color: rgb(32, 83, 250);
}
.in:focus{
    background-color: rgb(170, 170, 170);
    color: white;
}
.img{
    position: absolute;
    top: 30vh;
    left: 77vw;
}
.img img:hover{
    width: 50px;
}
footer{width: 1005;}
#ani{position: absolute;
    top: 87%;
    left: 7%;
    animation: ani 15s   ;
    animation-iteration-count: infinite;
    
}
@keyframes ani {
    0%{margin-left:0%; opacity: 25%;}
    33%{ margin-left: 33%;opacity: 75%;}
    66%{ margin-left: 66%;}
    100%{ margin-left: 80%; opacity: 0%;}

}