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



.bg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100dvw;
    height: 100dvh;
    background: linear-gradient(rgb(55, 41, 164), white);
    background-repeat: no-repeat;
    background-size: cover;
}

.container {
    position: relative;
    display: flex;
    width: 60%;
    height: fit-content;
    background-color: rgba(255, 255, 255, 0.468);
    border-radius: 20px;
    border: 2px solid rgb(255, 255, 255);
    filter: blur(70%);
    padding: 10px;
    overflow: hidden;
}

.form-container {
    display: flex;
    flex-direction: column;
    width: 50%;
    padding: 20px 40px;
    align-items: center;
    transition: transform 0.6s ease-in-out;

    h1 {
        font-size: 30px;
    }

    .welcome {
        margin-bottom: 20px;
        color: rgb(82, 92, 97);
        font-size: 14px;
    }

    .guide {
        font-size: 10px;
        color: rgb(117, 132, 139);
    }

    .validmail {
        font-size: 10px;
        color: red;
    }

    .signup {
        margin-bottom: 0px;
        color: rgb(82, 92, 97);
        font-size: 12px;
        text-align: center;
    }

    button {
        padding: 10px 20px;
        width: 100%;
        border-radius: 5px;
        border: none;
        background-color: black;
        color: white;
        margin-bottom: 20px;
    }

    button:hover {
        scale: 1.01;
        background-color: rgba(96, 17, 141, 0.962);
        color: rgb(255, 255, 255);
    }

    .errormessage {
        color: red;
        font-size: 12px;
        display: none;
        margin-bottom: 30px;
    }
}


.inputs {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 20px;
    width: 100%;

    label {
        font-size: 12px;
        margin-top: 8px;
    }

    input {
        border-radius: 5px;
        border: 1.4px solid rgb(239, 238, 238);
        background-color: rgba(248, 248, 248, 0.505);
        width: 100%;
        padding: 10px 20px;
        font-size: 12px;
        transition: border 0.3s ease-in-out;

    }

    input:focus {
        border: 1.5px solid purple;
        outline: none;
    }


    input:focus::placeholder {
        color: transparent;
    }
}


.picture {
    background: url("picture.jpeg");
    width: 50%;
    min-height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    border-radius: 20px;
    transition: transform 0.6s ease-in-out;
    flex-shrink: 0;
}


/* animation */

.container.active .picture {
    transform: translateX(-100%);
}

.container.active .form-container {
    transform: translateX(100%);
}

@media screen and (max-width : 710px) {
    .container {
        display: flex;
        flex-direction: column;
        min-width: 80%;
        min-height: 60%;
    }

    .picture{
        display: none;
    }

    .form-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 20px 40px;
        align-items: center;
        transition: transform 0.6s ease-in-out;
    }

    .container.active .picture {
        opacity: 0;
    }
    
    .container.active .form-container {
        opacity: 1;
        transform: none;
        transition: opacity 0.9s ease-in-out;
    }

    .welcome{
        text-align: center;
    }
}

@media screen and (max-width:990px){
    .container {
        position: relative;
        display: flex;
        min-width: 80%;
        height: fit-content;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    .picture{
        min-width: 50%;
        height: 400px;
    }
}