body {
    background-color: light-dark(#d9e8ef, #b9c8cf);
    margin-top: 0;
    margin-bottom: 0;
}

form {
    background-color: light-dark(white, black);

    width: 100%;
    max-width: var(--login_form_max_width);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    text-align: center;
}

form h1 {
    color: light-dark(black, white);
    font-weight: 500;
}

form input[name="password"] {
    color: light-dark(black, white);
    border: 0;
    background: none;
    display: block;
    margin: 20px auto;
    border: 2px solid light-dark(#40A8E3, #ff69b4);
    padding: 15px 10px;
    width: 50%;
    outline: none;
    border-radius: 24px;
    transition: 0.25s;
    text-align: center;
}

form input[name="password"]:focus {
    color: black;
    background-color: #f0f8ff;
    width: 70%;
}

form #submit {
    border: 0;
    background: none;
    display: block;
    margin: 20px auto;
    border: 2px solid light-dark(#40A8E3, #f0f8ff);
    padding: 15px 10px;
    width: 50%;
    outline: none;
    color: light-dark(black, white);
    border-radius: 25px;
    transition: 0.25s;
    text-align: center;
    cursor: pointer;
}

form #submit:hover,
form #submit:focus {
    background-color: light-dark(#40A8E3, #ff69b4);
    border: 2px solid light-dark(#40A8E3, #ff69b4);
    color: white;

    width: 70%;
}

form #submit:disabled {
    cursor: default;
    color: #777777;
    border: 2px solid #777777;
}

form #submit:disabled:hover {
    background-color: light-dark(white, black);
    border: 2px solid #777777;
    color: #777777;

    width: 50%;
}