/* Form styling */
form#login-form {
    display: grid;
    grid-template-areas: "username-label username-input"
        "password-label password-input"
        ". submit-button";
    grid-template-columns: auto 1fr;
    padding: 1em;
    gap: 1em;
}

form#login-form label {
    color: var(--yellow);
}

form#login-form input {
    padding: .4em;
    box-sizing: border-box;
    background-color: var(--offwhite);
    color: #222222;
    border: none;
    width: 100%;
    min-width: 0;
}

form#login-form input:focus {
    color: black;
    outline: none;
    border: none;
}

form#login-form label[for="username"] {
    grid-area: username-label;
}

form#login-form input[name="username"] {
    grid-area: username-input;
}

form#login-form label[for="password"] {
    grid-area: password-label;
}

form#login-form input[name="password"] {
    grid-area: password-input;
}

form#login-form button[type="submit"] {
    grid-area: submit-button;
    background-color: var(--blue);
    color: black;
    border: none;
    cursor: pointer;
    align-self: end;
    justify-self: end;
}

form#login-form button[type="submit"]:hover {
    background-color: var(--offwhite);
}