@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');


*{
    padding : 0 ; 
    margin : 0 ; 
    box-sizing: border-box;
}

body
{
    font-family: 'Poppins', sans-serif;
}

.container{
    background-image: url('/static/images/bg.jpg');
    background-color: #FBAB7E;
    background-image: linear-gradient(216deg, #8E44AD 40%, #d2a9e3 100%);
    background-position: center;
    background-size: cover;
    width : 100vw ; 
    height : 100vh ; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding : 0 2rem ; 
}

form{
    width : 360px ; 
}

.title{color : #8E44AD ; font-weight: 500;}

form h2{
    font-size: 1.6rem;
    text-transform: uppercase;
    margin  : 15px 0 ; 
    color : #333 ; 
}

.login-container{
    background-color: white;
    padding : 2rem 2rem ; 
    border-radius: 1.3rem;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 8px 24px;
    display: flex;
    align-items: center;
}

.input-div{
    display: grid;
    grid-template-columns: 7% 93% ;
    margin : 25px 0 ; 
    padding : 5px 0 ; 
    border-bottom: 2px solid #d9d9d9;

}

.input-div .focus .i i{
    color : black ; 
}
.input-div .focus div h5{
    top : -5px ; 
    font-size: 13px;
}

.input-div .one{
    margin-top : 0 ; 
}


.input-div .two{
    margin-bottom : 4px ; 
}

.i{
    display: flex;
    justify-content: center;
    align-items: center;

}

.i i{
    color : #d9d9d9 ; 
}
.input-div >div{
    position: relative;
    height : 45px ; 
}

.input-div >div h5{
    
    font-weight: 400;
    position : absolute ; 
    left : 10px ; 
    top : 50% ; 
    transform: translateY(-50%);
    color : #999 ; 
    font-size: 18px;
    transition : 0.3s ; 
}

.input{
    position : absolute ; 
    width : 100% ; 
    height : 100% ; 
    top : 0 ; 
    left : 0 ; 
    border : none ; 
    outline  : none ; 
    background: none;
    padding : 0.5rem 0.7rem ; 
    font-size: 1.2rem;

}

.btn{
    display: block;
    width : 100% ; 
    height: 50px;
    border-radius: 25px;
    margin : 1rem 0 ; 
    font-size: 1.2rem;
    outline : none ; 
    color : white ; 
    background-image: linear-gradient(to right , #333 , #444);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    transition : 0.3s ; 
}

.btn:hover{
    background-position: right;
}


.error-message{
    margin-top : 0.5rem;
    padding : 1rem 2rem ; 
    background-color: rgb(235, 86, 84);
    color: white;
}