:root {
    --color-login-bg: red;
    --color-login-pw: red;
    --color-login-input-fg: red;
    --color-login-input-bg: red;
    --color-login-input-border: red;
    --color-login-button-fg: red;
    --color-login-button-fg-hover: red;
    --color-login-button-fg-active: red;
    --color-login-button-bg: red;
    --color-login-button-bg-hover: red;
    --color-login-button-bg-active: red;
    --color-login-button-border: red;
    --color-login-button-border-hover: red;
    --color-login-button-border-active: red;
    --color-login-error-fg: red;
    --color-login-error-bg: red;
}

#auth-panel {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 100vh;
    background-color: var(--color-login-bg);
}

#auth-box {
    display: grid;
    justify-items: center;

    form {
        margin-top: 20vh;
        display: grid;
    }
}

#auth-label {
    color: var(--color-login-pw);
    font-weight: 600;
    text-align: center;
    margin: 5px;
}

#auth-input {
    text-align: center;
    width: 200px;
    letter-spacing: 3px;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: 600;
    color: var(--color-login-input-fg);
    background-color: var(--color-login-input-bg);
    border: 1px solid var(--color-login-input-border);
}

#error {
    background-color: var(--color-login-error-bg);
    color: var(--color-login-error-fg);
    font-weight: 600;
    border-radius: 5px;
    padding: 3px 10px;
}

#auth-submit {
    margin: 30px 20px;
    padding: 10px 30px;
    font-weight: 600;
    border-radius: 5px;
    color: var(--color-login-button-fg);
    background: var(--color-login-button-bg) none;
    border: none;
    transition: 0ms 100ms;

    &:active {
        transition: none;
        color: var(--color-login-button-fg-active);
        background-color: var(--color-login-button-bg-active);
    }
}

@media (hover: hover) and (pointer: fine) {
    #auth-submit {
        transition: none;

        &:hover {
            color: var(--color-login-button-fg-hover);
            background: var(--color-login-button-bg-hover);
        }

        &:active {
            color: var(--color-login-button-fg-active);
            background: var(--color-login-button-bg-active);
        }
    }
}