*, html,body{
    margin: 0; 
    padding: 0;  
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
} 

header{
    position:relative;
    background:white;
    line-height: 70px;
    width:100%;
    height:70px;
    box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12);   
}
.logo img{
    margin-top: 5px;
    margin-left: 20px;
    height: 60px;
    
}
.navigate img{
    margin-top: 10px;
    margin-left: 10px;
    height: 20px;
}
nav{
    list-style: none;
    margin-right: 20px;
    
    

}
nav ul{
    list-style: none;
    margin-right: 20px;
    margin-top: 5px;
    

}

nav ul a{
    display: inline-block;
}
header nav{
    float: right;
}
.navigate{
    height: 40px;
    width: 40px;
    border-radius: 50%;
    transition: .5s;
    
    
}

.navigate:hover{
    background-color: rgba(196, 193, 193, 0.808);
    
    text-decoration: none;
    color: rgb(0,0,0);
     
}
.main{
    width: 100%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    
    
    
}
.sinups{
    height: 450px;
    width: 25%;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 5px 15px  1px rgba(0, 0, 0, 0.404);
    overflow: hidden;

}
.reset{
    height: 325px;
    width: 25%;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 5px 15px  1px rgba(0, 0, 0, 0.404);
    overflow: hidden;

}
.recover{
    height: 300px;
    width: 25%;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 5px 15px  1px rgba(0, 0, 0, 0.404);
    overflow: hidden;

}
.login{
    
    height: 350px;
    
    width: 25%;
   
    border-radius: 10px;
    position: relative;
    box-shadow: 0 5px 15px  1px rgba(0, 0, 0, 0.404);
    overflow: hidden;
    
}



.login-head{
   
    height: 110px;
    
}
.login-t{
    width: 100%;
    
  

    

}
h3 .name,.email{
    color: palegoldenrod;

}
.email{
    font-weight: 100;
    font-size: .9em;
}


.wallet img{
    position: relative;
    margin-left: 5px;
    height: 30px;
}



.login-content{
    display: flex;
    
    
    
}
.login-title{
    margin-left: 20px;
    position: relative;
    color: rgb(14, 74, 102);
    font-weight: 500;
    font-size: 1.5rem;
    padding: 0 0 3px 0;
    margin-bottom: .9rem;
    display: inline-block;
}
.login-title:after{
   content: '';
   position: absolute;
   height: 3px;
   width: 50%;
   background-color: rgb(136, 47, 117);
   bottom: 0;
   left: 0;

}
.avater{
    height: 60px;
    widows: 100%;
    
    display: flex;
    justify-content: center;
    align-items: center;
}
.img{
    height: 60px;
    width: 60px;
    
    border-radius: 50%;

    overflow: hidden;
   

}
.img img{
  
    height: 55px;
}
.or p{
   font-weight: 500;
   font-size: 1.2rem;
   color: gray;
}
.line{
    height: 5px;
    margin-left: 5px;
    margin-right: 5px;
    width: 30%;
    border-bottom: 2px solid gray;
}
.formcontrol{
    width:100%;
    margin-top: 30px;
   
    display: flex;
    justify-content: center;
    
}
form {
    display: flex;
    flex-direction:column;
    align-items: center;
}
.signin{
    margin-top: 5px;
    cursor: pointer;
    width: 90px;
    padding: 5px;
    outline: none;
    border: 2px solid rgb(39, 33, 78);
    border-radius: 15px;
    color: rgb(255, 254, 254);
    background-color: rgba(16, 93, 129, 0.753);
}
.signin:hover{
    border:2px solid rgb(104, 14, 122);
    color: rgb(45, 9, 59);
    background-color: rgba(253, 254, 255, 0.753);
    font-weight: 500;

}
form input{
    width: 200px;
    padding: 5px;
    margin-bottom: 10px;
    outline: none;
    border: 2px solid rgb(16, 100, 139);
    text-align: center;
    font-weight: 500;
    border-radius: 15px;
    font-style: italic;
}
.signup{
    display: flex;
    justify-content: center;
    align-items: center;
}
.sup button{
    border: 2px solid rgb(104, 14, 122);
    color: rgb(45, 9, 59);
    background-color: rgba(245, 247, 248, 0.753);
    margin-bottom: 10px;
}
.forgot p{
    text-align: center;
}
.forgot p a{
   
    
    cursor: pointer;
    text-decoration: none;
    font-weight: 350;
    color: grey;

}
.forgot p a:hover{
    
    color: rgb(24, 105, 138);  
}
.sup button:hover{
    border: 2px solid rgb(231, 213, 235);
    color: rgb(255, 249, 249);
    background-color: rgba(50, 93, 114, 0.753);
} 
.forgot{
    align-items: center;
    text-align: center;
    
}
.already a{
    font-weight: 500;
    font-size: small;
    cursor: pointer;
    text-decoration: none;
    color: grey;
}
.already a:hover{
    color: rgb(24, 105, 138);  
}