@import url('https://fonts.googleapis.com/css2?family=Spicy+Rice&display=swap');
.login_image{
    position: relative;
    z-index: 2;
    top: -1vw;
    width: 110%;
    height: 110%;
}
html{
    height: 100%;
}
body {
    overflow: hidden;
    overflow-y: hidden;
    overflow-x: hidden;
    display: flex;
    height: 100%;
}
/* sec2 */
.sec1{
    margin-left: 5%;
    height: 100%;
    width: 100%;
    
}
/* sec1 */
.sec2{
    margin-top: 50%;
    height: 100%;
    width: 50%;

}
.flex_sec2{
    width: 30%;
    
}
.logintext{
    text-align: center;
    width: 20vw;
    margin-left: 25%;
    z-index: 1;
    margin-top: 50%;
    text-shadow: 1px 0 1px;
    font-size: 2.5vw;
}
.login_input{
    margin-top: 5%;
    margin-left: 20%;
    height: 1vw;
    width: 21vw;
    border: none;
}
.login_line{
    margin-top: 1%;
    border: 1px solid red ; 
    width: 21vw;
    margin-left: 20%;

}
.login_input:focus{
    border: none;
    outline: none;
    opacity: 1;
}

.login_input_password{
    margin-left: 20%;
    height: 1vw;
    width: 21vw ;
    border: none;
}
.login_input_password:focus{
    outline: none;
    border: none;
    opacity: 1;


}
.password_line{
    margin-left: 20%;
    border: 1px solid red ; 
    width: 21vw;
    margin-top: 1%;
}
.login_button{
    
    background-color: rgb(139, 11, 11);
    align-items: center;
    text-align: right 10px;
    color: white;
    border: none;
    width: 15vw;
    height: 5vh;
    cursor: pointer;
    border-radius: 5vh;
    margin-left: 40%;
    margin-top: 5%;
    transition: opacity 0.15s;
}
.login_button:hover{
    opacity: 0.7;
}
.login_button.login_button:click{
    opacity: 0.5;
}
.signup_button{
    display: flex;
    background-color: rgb(201, 190, 190);
    align-items: center;
    margin-top: 10%;
    text-align: right 10px;
    color: rgb(0, 0, 0);
    border: black;
    width: 15vw;
    margin-left: 40%;
    height: 5vh;
    cursor: pointer;
    justify-content: center;
    outline: black;
    border-radius: 5vh;
    transition: opacity 0.15s;
    text-decoration: none;
    
}
.invisible{
    visibility: hidden;
}
.people_who_forgot{
    color: rgb(146, 146, 146);
    width: 20vw;
    margin-left: 25%;
    display: none;
    
}
.signup_button:hover{
    opacity: 0.7;

}
.signup_button:active{
opacity: 0.5;
}
.register_link{
        text-decoration: none !important;
}
@media screen and (max-width: 600px) {
    html{
        overflow: hidden;
    }
    body{
        background-image: url('library_image_login.jpeg');
        background-size: 100% 100%;
        height: 100%;
        display: block;
        overflow: hidden;

    }
    .sec1{
        visibility: hidden;
    }
    .sec2{
        background-color: white;
        width: 70vw;
        height: fit-content;
        border-radius: 10vw;
    }
    .logintext{
        margin-left: 28%;
        padding-top: 0%;
        margin-top: 5%;
        font-size: 230%;
        width: 40%;
        text-align: center;
    }
    .login_input{
        margin-left: 15%;
        height: 30%;
        width: 70%;
        font-size: 3vw;
    }
    .flex_sec2{
        margin-top: -20%;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .login_line{
        margin-left: 15%;
        width: 70%;
    }
    .login_input_password{
        margin-top: 10%;
        margin-left: 15%;
        width: 70%;
        height: 30%;
        font-size: 3vw;
    }
    .password_line{
        margin-left: 15%;
        width: 70%;
        border: 1px solid red ; 
    }
    .login_button{
        margin-left: 20%;
        width: 60%;
    }
    .signup_button{
        margin-left: 20%;
        width: 60%;
    }
    a{
        text-decoration: none !important;
    }
    .people_who_forgot{
        margin-top: 0%;
        font-size: 4vw;
        margin-left: 20%;
        width: 45vw;
    }
}