@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
}
/* Colors */
:root {
    --color-primary: #925FE2;
    --color-secondary: #6D4EA1;
    --color-background: #D9C7F2;
    --color-background-form: #FFFFFF;
    --color-text-primary: #000000;
    --color-text-secondary: #656565;
    --color-border: #CDCDCD;
    --color-button-text: #FFFFFF;
    --color-icon-google: #DB4437;
    --color-icon-facebook: #4267B2;
    --color-title:#F7F3FA;
}
/* Body */
body{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: var(--color-background);
}
/*  Container */
.container{
    display: grid;
    grid-template-columns: 4.2fr 5fr 0.8fr;
    align-items: center;
    width: 57.25rem;
    height: 31rem;
}
/* Forms Container */
.forms-container{
    height: 100%;
    background-color: var(--color-background-form);
    overflow: hidden;
}
.forms{
    transition: transform 0.5s ease;
}
.forms.active{
    transform: translateY(-50%);
}
form{
    padding: 1.8rem;
}
form p{
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-top: 0.3rem;
    margin-bottom: 1.8rem;
}
form p a{
    color: var(--color-primary);
    font-weight: 700;
}

/* Input Container */
.input-container{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.2rem;
}
.input-container input{
    padding: 0.7rem;
    border: 2px solid var(--color-border);
    border-radius: 0.4rem;
    outline: none;
}
.input-container label,
.input-container a{
    font-size: 0.8rem;
    font-weight: 600;
}
.input-container a{
    color: var(--color-primary);
}
.input-container .forget{
    display: flex;
    justify-content: space-between;
}

/* Remember me*/
.remember-me{
    display: flex;
    gap: 0.3rem;
    margin-bottom: 1.7rem;
}
.remember-me label{
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}
/* Button */
form button{
    width: 100%;
    padding: 0.9rem 0;
    background-color: var(--color-secondary);
    color: var(--color-button-text);
    font-weight: 500;
    border: none;
    border-radius: 0.5rem;
    margin-bottom: 0.3rem;
    cursor: pointer;
}
form .btn-register{
    margin-top: 1.5rem;
}
/* Line With Text*/
.line-width-text{
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    margin-top: 1rem;
    margin-bottom: 1.3rem;
}
.line-width-text::before,
.line-width-text::after{
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--color-border);
    margin: 0 0.6rem;
}
/*Other Login*/
.other-login{
    display: flex;
    justify-content: center;
    gap: 1rem;
}
.other-login a{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.6rem 1.5rem;
    gap: 0.5rem;
    border-radius: 0.4rem;
    text-decoration: none;
}
.other-login img{
    width: 1rem;
}
.other-login .google{
    border: 1px solid var(--color-icon-google);
    color: var(--color-icon-google);
    cursor: pointer;
}
.other-login .facebook{
    border: 1px solid var(--color-icon-facebook);
    color: var(--color-icon-facebook);
    cursor: pointer;
}

/* Banner */
.banner{
    height: 115%;
    padding: 5rem 2rem 0 2rem;
    position: relative;
    overflow: hidden;
    background-color: var(--color-primary);
}
.banner h1{
    color: var(--color-title);
    font-size: 3rem;
    line-height: 0.9;
}
.banner h1 span{
    display: block;
    font-weight: 500;
}
.banner p{
    color: var(--color-background-form);
    font-size: 0.8rem;
    margin-top: 1rem;
}
.banner img{
    position: absolute;
    bottom: 2.5rem;
    right: -2rem;
    width: 95%;
}
/* Shapes */
.shape{
    background-color: #ffffff;
    border-radius: 50%;
    opacity: 0.2;
    position: absolute;
}
.shape1{
    height: 12.5rem;
    width: 12.5rem;
    left: 20rem;
    top: 1.25rem;
}
.shape2{
    width: 28rem;
    height: 28rem;
    bottom: -10rem;
    right: -10rem;
}
.shape3{
    width: 18rem;
    height: 15rem;
    left: -10rem;
    top: 10.5rem;
}

/* Sidebar */
.sidebar{
    background-color: var(--color-background-form);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    user-select: none;
}
.sidebar::after{
    content: '';
    background-color: var(--color-primary);
    height: 50%;
    width: 0.3rem;
    position: absolute;
    right: 0;
    top: 0;
    transition: top 0.5s ease;
}
.sidebar.active::after{
    top: 50%;
}
.sidebar .sign{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    cursor: pointer;
}
.sidebar img{
    width: 1.5rem;
}
.sidebar span{
    color: var(--color-text-secondary);
    font-size: 0.8rem;
}

/* Forms Animation */
@keyframes slideIn{
    from {opacity: 0; transform: translateX(-100%);}
    to {opacity: 1; transform: translateX(0);}
}
/* Brounce Animation */
@keyframes brounce-up{
    0% {transform:  translateY(0);}
    20% {transform:  translateY(-7px);}
    40% {transform:  translateY(2px);}
    60% {transform:  translateY(0);}
}
@keyframes brounce-down{
    0% {transform:  translateY(0);}
    20% {transform:  translateY(7px);}
    40% {transform:  translateY(-2px);}
    60% {transform:  translateY(0);}
}