body{
    background-image: url('/images/home6.jpg');
    background-size: cover;
    font-family: Georgia, serif;
}



.body-container{
    width: 100%;
    height: 88%;
    display: flex;
    justify-content: center;
    
}

.footer-container{
    width: 100%;
    height: 12%;
}

.left-side-panel{
    width: 60%;
    height: 100%;
    background-size: cover
}

.right-side-panel{
    width: 40%;
    height: 100%;
    padding: 2%;

}

.login-form-elements{
    padding-top: 5%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-top: 5%;
    
}

.login-form-elements form{
    margin-top: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80%;
    min-width: 200px;
}

.login-form-elements form input{
    margin: 2%;
    height: 3rem;
    width: 80%;
}
.right-body{
    width: 100%; 
    display: flex; 
    justify-content: flex-start; 
    height: 18%;
}
.logo{
    width: 30%;
}
.form-element{
    width: 100%;
}
@media screen and  (max-width: 560px){
    .left-side-panel{
        width: 5%;
        height: 10%;
        background-size: cover
    }
    
    .right-side-panel{
        width: 95%;
        height: 100%;
        padding: 2%;
    
    }
    .logo{
        width: 100px;
        height: 80%;
        margin-left: -15%;
        
    }
}


@media screen and  (max-width: 900px){
    .left-side-panel{
        width: 25%;
        height: 100%;
        background-size: cover
    }
    
    .right-side-panel{
        width: 75%;
        height: 100%;
        padding: 2%;
    
    }
    .logo{
        width: 20%;
        height: 80%;
        margin-left: -25%;
    }
}



@media screen and  (max-width: 1300px){
    .left-side-panel{
        width: 20%;
        height: 100%;
        background-size: cover
    }
    
    .right-side-panel{
        width: 80%;
        height: 100%;
        padding: 2%;
    
    }
    .logo{
        height: 80%;
        margin-left: -25%;
        width: 15%;
    }
}