:root {
    --first-color: #E2D1f9;
    --second-color: #317773;
    --OFFWHITE-color :#FCF6F5FF;
    --RED-color: #990011FF;
    --GREEN-color:#CCF381 ;
    --ELECTRIC-BLUE-color:#4831D4 ;
    --CHARCOAL-color:#101820FF ;
    --YELLOW-color:#FEE715FF ;
    --OFFREAD-color:#F96167 ;
    --OFFYELOW-color:#FCE77D ;
    --BLUE-color:#2F3C7E ;
    --PINK-color:#FBEAEB ;
    --ROYAL-BLUE-color:#00539CFF ;
    --PEACH-color:#EEA47FFF ;
}
.logInForm{
    height: 400px;
    width: 100%;
    background-color: var(--CHARCOAL-color);
    color: var(--OFFWHITE-color);
}
.logInForm h1{
    text-align: center;
    padding-top: 40px;
}
.logInForm hr{
    width: 500px;
    color: var(--first-color);
}
.FORM{
    height: 200px;
    width: 300px;
    margin: auto;
}
.FORM label{
    margin: 5px 30px;
    font-weight: 600;
    font-size: 1.3em;
}
.FORM input{
    border: none;
    width: 200px;
    border-radius: 10px;
    height: 30px;
}
.FORM i{
    color: var(--BLUE-color);
    font-size: 1.5em;
    margin-left: 2px;
}
.FORM button{
    height: 30px;
    width: 100px;
    background-color: var(--ROYAL-BLUE-color);
    border: none;
    border-radius: 5px;
    text-align: center;
    margin: 5px 30px;
    color: var(--OFFWHITE-color);
    font-size: 1em;
}