*{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

.main-page-div{
    padding: 4.5em;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 100vh;
}

.main-page-div .left-section{
    flex-basis: 30%;
}

.main-page-div .left-section h1{
    color: #1877f2;
    font-size: 4em;
    margin-bottom: 0.3em;
}

.main-page-div .left-section p{
    color: rgba(0, 0, 0, 0.636);
    font-size: 1.7em;
}

.main-page-div .right-section{
    display: flex;
    flex-direction: column;
    flex-basis: 30%;
}

.main-page-div .right-section .form-div{
    box-shadow: 0 2px 20px 2px rgb(150 150 150);
    padding: 3em;
    display: flex;
    flex-direction: column;
}

.main-page-div .right-section .form-div form {
    display: flex;
    flex-direction: column;
}

.email-input , .pass-input , .pass-checkbox , .submit-input , a , hr , button{
    margin: 0.5em;
}  

.email-input , .pass-input{
    padding: 1em;
    border-radius: 0.3em;
    border-color: rgba(0, 0, 0, 0.244);
}

.pass-checkbox label{
    color: #1877f2;
    font-weight: bold;
}

.submit-input{
    padding: 0.5em;
    font-size: 1em;
    font-weight: bold;
    background-color: #1877f2;
    border-color: #1877f2;
    color: aliceblue;
    border-radius: 0.3em;
}

.form-div a{
    align-self: center;
    text-decoration: none;
    color: #1877f2;
}

.form-div button{
    padding: 0.5em;
    font-size: 1em;
    font-weight: bold;
    background-color: #369423;
    border-color: #369423;
    color: aliceblue;
    border-radius: 0.3em;
}

.under-form {
    margin: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(0, 0, 0, 0.636) ;
}

.under-form a{
    text-decoration: none;
    color: #1877f2;
}

@media (max-width: 850px){
    
.main-page-div {
    flex-direction: column;
    gap: 4.5em;
}

} 

@media (max-width: 1418px){

.under-form{
    flex-direction: column;
}
}