/* Intended to follow OOCSS styling */
 
 /* General setup for login styling */
 .login-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vh;
    max-width: 100vw;
    max-height: 70vh;
  }

/* Styles the header (the word Login) */
.login-title {
    font-size: 1.7em;
    margin: 0;
    padding: 0;
}

/* Styles the <hr> tag line */
.login-line{
    width: 33%;
    margin: 1%;

}

/* Styles the input boxes */
.login-input {
    padding: 0.5%;
    width: 30%;
}

/* Styles the login button */
.login-button {
    padding: 0.5%;
    cursor: pointer;
    color: #000;
    background-color: #26ab1a;
    width: 31.5%;
}

/* Makes the color of login status red (all displayed status are errors) */
.login-status{
    color: #FF0000;
}

/* Makes button opacity 50% when hovering */
.login-button:hover {
    opacity: 50%;
}




/* Modifies styling for mobile viewing */
@media (max-width: 650px) {
    .login-input {
        width: 60%;
    }
    
    #loginButton {
        width: 61.5%;
    }

    .login-linebreak {
        display: none;
    }

    .login-header {
        font-size: 1.5em;
        margin-bottom: 3%;
    }
}