@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

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

:root {
    --linear-grad:url( https://img.freepik.com/premium-photo/green-background-with-green-textured-background-with-green-light_994023-383342.jpg);
    --grad-clr1:#065a60;
    --grad-clr2:#144552;
}

body {
    height: 100vh;
    background-color:#efefef;

    display: grid;
    place-content: center;
    font-family: 'Poppins', sans-serif;
}

.home-link {
    color: white;
    text-decoration: none;
    font-weight: bold;
    margin:50px;
    margin-left: auto;
}
    
    
.home-link a:hover {  
    color: #FFC107;   
}


.container{
    position:relative;
    width:850px;
    height:500px;
    background-color: #deebe8;
    box-shadow:25px 30px 55px rgba(93, 92, 92, 0.467);
    border-radius:13px;
    overflow:hidden;
}

.form-container{
    position:absolute;
    width:60%;
    height:100%;
    padding: 0px 40px;
    transition :all 0.6s ease-in-out;


}

.sign-up-container{
    opacity:0;
    z-index:1;
}

.sign-in-container{
    z-index:2;
}
form{
    height: 100%;
    display: flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding: 0px 50px;
}




.infield{
    position:relative;
    margin: 8px 0px;
    width:100%;
    background-color:#d1c9c9;
}



input,select{
    width:100%;
    padding: 12px 8px;
    background-color:#d1c9c9;
    border:none;
    outline:none;
}


label{
    position:absolute;
    left:50%;
    top:50%;
    transform:translateX(-50%);
    width:0%;
    height:2px;
    background:var(--linear-grad);
    transition: 0.3s;
    background-size: cover;
}

input:focus ~label{
    width:100%;
}

a{
    color:#181717;
    font-size:12px;
    text-decoration:none;
    margin:15px 0px;
}

a.forgot{
    padding-bottom:3px;
    border-bottom:2px solid #eee;

}

button{
    border-radius:20px;
    border:1px solid var(--grad-clr1);
    background:var(--grad-clr2);
    color:#fff;
    font-size:12px;
    font-weight:bold;
    padding:12px 45px;
    letter-spacing: 1px;
    text-transform:uppercase;
}

.form-container button{
    margin-top:17px;
    transition:80ms ease-in;
}

.form-container button:hover{
    background-color:#fff;
    color:var(--grad-clr1);
}

.overlay-container{
    position:absolute;
    top:0;
    left:60%;
    width:40%;
    height:100%;
    overflow:hidden;
    transition: transform 0.6s ease-in-out;
    z-index:9;
}

#overlayBtn{
    cursor:pointer;
    position:absolute;
    left:50%;
    top:304px;
    transform:translateX(-50%);
    width:143.67px;
    height:40px;
    border:1px solid #fff;
    background:transparent;
    border-radius:20px;
}

.overlay{
    position: relative;
    background: var(--linear-grad);
    background-size: cover;
    color:#fff;
    left:-150%;
    height:100%;
    width:250%;
    transition : transform 0.6s ease-in-out;

}

.overlay-panel{
    position:absolute;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction: column;
    padding:0px 40px;
    text-align:center;
    height:100%;
    width:340px;
    transition:0.6s ease-in-out;

}

.overlay-left{
    right:60%;
    transform:translateX(-12%);

}

.overlay-right{
    right:0%;
    transform: translateX(0%);
}

.overlay-panel h1{
color:#fff;
}

p{
    font-size:14px;
    font-weight:300;
    line-height:20px;
    letter-spacing:0.5px;
    margin:25px 0px 35px;
}

.overlay-panel button{
    border:none;
    background-color: transparent;
}

.right-panel-active .overlay-container{
    transform:translateX(-150%);
   
}
.right-panel-active .overlay{
    transform:translateX(50%);
   
}
.right-panel-active .overlay-left{
    transform:translateX(25%);
   
}
.right-panel-active .overlay-right{
    transform:translateX(35%);
   
}
.right-panel-active .sign-in-container{
    transform:translateX(20%);
    opacity: 0;
    /* transition: 0.6s ease-in-out; */
}

.right-panel-active .sign-up-container{
    transform:translateX(66.7%);
   opacity: 1;
   z-index:5;
   animation: show 0.6s;
}

@keyframes show{
    0%,50%{
        opacity:0;
        z-index:1;
    }
    50.1%,100%{
        opacity:1;
        z-index:5;
    }

}

.btnScaled{
    animation: scaleBtn 0.6s;
}

@keyframes scaleBtn{
    0%{
        width:143.67px;
    }
    50%{
        width:250px;
    }
    100%{
        width:143.67px;
    }
}