body {
    margin: 0;
    padding: 0;
    font-family: 'Oswald', sans-serif;
    background-color: var(--bg-dark-hex);
    color: rgba(var(--light-text-rgb), var(--alpha-50));
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.8s ease;
}

body.error {
    animation: flashError 5.5s ease forwards;
}

@keyframes flashError {
    0% { background-color: var(--bg-dark-hex); }
    25% { background-color: var(--bg-error-hex); }
    100% { background-color: var(--bg-dark-hex); }
}

.login-container {
    text-align: center;
    min-width: 300px;
    max-width:360px;
}

input { background:transparent; }

input[type="text"],
input[type="password"] {
    width: 100%;
    padding: 10px;
    margin: 12px 0;
    border: none;
    border-bottom: 1px solid rgba(var(--gold-dark-rgb), var(--alpha-50));
    color: var(--light-text-rgba); 
    font-size: 1em;
}

button {
    width: 250px;
    padding: 10px;
    margin: 10px auto;
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--fg);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s;
}

button:hover {
    background-color: rgba(0, 255, 255, 0.4);
}

.error-text {
    color: var(--red-light-hex);
    font-size: 0.9em;
    margin-bottom: 10px;
}