html,
body,
form {
    height: 100%
}

body {
    margin: 0;
    padding: 8px;
    box-sizing: border-box;
}

.input{
    outline-color:var(--primary);
}

#LoginFields {
    width: 25%;
}

/* typical tablet screen resolution */
@media only screen and (max-width : 1200px) {
    #LoginFields {
        width: 50%;
    }
}

/* landscape orientation */
@media only screen and (min-width : 375px) and (max-width : 667px) and (orientation : landscape) {
    #LoginFields {
        width: 50%;
    }
}
/* portrait orientation */
@media only screen and (min-width : 375px) and (max-width : 667px) and (orientation : portrait) {
    #LoginFields {
        width: 100%;
    }
}