* {
    font-family: 'Roboto';
}

.main-container {
    display: flex;
    width: 100%;
    height: 100vh;
    position: absolute;
}

input[type=text], input[type=submit], input[type=password]{
    display: flex;
    width: 80%;
    height: 40px;
    color: rgb(30,58,69);
    background-color: rgb(227, 231, 234);
    outline: none;
    border: 1px solid rgb(230, 230, 230);
    border-radius: 30px;
    margin: 0 auto 15px auto;
    text-align: center;
}

input[type=submit] {
    display: block;
    height: 43.60px;
    text-align: center;
    color: rgb(255, 255, 255);
    background-color: rgb(251, 2, 0);
    cursor: pointer;
}

input[type=submit]:hover {
    transition: 0.50s;
    background-color: rgb(208, 15, 47);
}

.form-box {
    display: flex;
    width: 400px;
    height: auto;
    flex-direction: column;
    margin: auto;
}

.form-box img {
    display: flex;
    width: 150px;
    height: auto;
    margin: auto;
    margin-bottom: 30px;
}

footer {
    display: flex;
    width: 100%;
    height: auto;
    position: fixed;
    bottom: 0;
    justify-content: center;
    text-align: center;
    font-size: 0.90em;
}

.login-validation-box {
    display: flex;
    width: 80%;
    height: auto;
    justify-content: center;
    align-items: center;
    font-size: 1em;
    background-color: rgb(255, 173, 173);
    color: rgb(70, 70, 70);
    padding: 10px 0 10px 0;
    margin: -15px auto 15px auto;
    text-align: center;
}

@media (max-width: 600px){

    .form-box {
        margin-top: 50%;
    }

}