body {
    background: var(--white);
}

/* login box satrt */

.login_box {
    width: 38%;
    height: 100vh;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    float: left;
}

.login_boxin {
    width: 58%;
}

.h1_text {
    font-size: 1.8vw;
    margin-bottom: 3%;
}

.p_text {
    color: var(--darksilver);
    margin-bottom: 6%;
    font-size: 0.8vw;
}

.label {
    font-size: 0.9vw;
    font-weight: 600;
}

.input {
    width: 100%;
    height: 4.6vh;
    border: 1px solid var(--silver);
    border-left: 4px solid var(--purple);
    padding: 0 45px 0 12px;
    border-radius: 6px;
    outline: none;
    margin-top: 1%;
    margin-bottom: 5%;
    transition: 0.3s;
    font-size: 0.8vw;
}

.login {
    background: url("../img/icon/avatar.png") no-repeat;
    background-position: 96%;
    background-size: 6%;
}

.password {
    background: url("../img/icon/lock.png") no-repeat;
    background-position: 96%;
    background-size: 6%;
}

.input::placeholder {
    color: var(--darksilver);
}

.submit {
    width: 100%;
    height: 5vh;
    color: var(--white);
    background: var(--darkpurple);
    border-radius: 8px;
    border: none;
    margin-top: 4%;
    cursor: pointer;
    font-size: 0.8vw;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.input:focus {
    background: var(--white);
    border: 1px solid var(--darkpurple);
    border-left: 4px solid var(--purple);
    /* scale: 1.01; */
}

.submit:hover {
    background: var(--purple);
}

/* login box end */

/* right box start */

.right_box {
    width: 100%;
    height: 100vh;
    background: var(--purple);
}

/* right box end */

/* responsive start */

@media only screen and (max-width: 1024px) {
    .input {
        height: 4.8vh;
    }
    .submit {
        height: 5.2vh;
    }
}

@media only screen and (max-width: 824px) {
    .right_box {
        display: none;
    }

    .login_box {
        width: 100%;
    } 

    .h1_text {
        font-size: 4vw;
    }
    
    .p_text {
        font-size: 2.2vw;
    }
    
    .label {
        font-size: 2.3vw;
    }
    
    .input {
        font-size: 2.1vw;
        border-left: 5px solid var(--purple);
        border-radius: 8px;
    }

    .submit {
        font-size: 2.2vw;
        border-radius: 10px;
    }
}

@media only screen and (max-width: 468px) {
    .login_boxin {
        width: 82%;
    }

    .h1_text {
        font-size: 6.6vw;
    }
    
    .p_text {
        font-size: 3.4vw;
    }
    
    .label {
        font-size: 3.5vw;
    }
    
    .input {
        font-size: 3.3vw;
        border-left: 5px solid var(--purple);
        border-radius: 6px;
    }

    .submit {
        font-size: 3.4vw;
        border-radius: 8px;
    }
}

/* responsive end */