/* 1. Page Background */
body.login {
    /* This is that dark charcoal/black from their site */
    background-color: #1a1a1a; 
    background-image: url('background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 3. The Login Form */
#loginform {
    border: none;
    border-radius: 8px;
    box-shadow: none;
}

@media screen and (max-width: 768px) {
    #login {
        width: 100%;
    }
}

/* 4. Form Labels ("Username or Email Address") */
.login label {
    font-weight: bold;
    color: #21282f; /* Light grey text */
}

/* 5. Form Input Fields */
.login input[type="text"],
.login input[type="password"] {
    background: rgba(0,0, 0, 0, 0.5);
    border: 1px solid #555;
    color: #21282f; /* White text when typing */
    border-radius: 4px;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus {
    border-color: #21282f; /* Orange border on focus */
    box-shadow: none;
}

/* 6. The "Log In" Button */
.login .button-primary {
    /* That vibrant orange */
    background-color: #21282f; 
    border-color: #21282f;
    text-shadow: none;
    box-shadow: none;
    border-radius: 4px;
    font-weight: bold;
    height: 42px;
    padding: 0 24px;
    text-transform: uppercase; /* Makes it bolder, like their brand */
}

.login .button-primary:hover {
    background-color: #21282f; /* A slightly darker orange on hover */
    border-color: #21282f;
}

/* 7. Bottom Links ("Lost your password?", "Back to...") */
.login #nav,
.login #backtoblog {
    text-align: center;
}

.login #nav a,
.login #backtoblog a {
    color: #21282f; /* Muted grey for links */
    font-weight: normal;
}

.login #nav a:hover,
.login #backtoblog a:hover {
    color: #21282f; /* Orange on hover */
}

/* 8. "Remember Me" Checkbox */
.login .forgetmenot label {
    color: #21282f;
}

.login .forgetmenot input:checked {
    background-color: #21282f; /* Make checkbox orange */
    border-color: #21282f;
}

.language-switcher{
    display: none;
}

#login{
    margin-right: 0;
    margin-left: 0;

    padding: 20px;
    background-color: white;
    height: 100vh;

    display: flex;
    flex-direction: column;
    justify-content: center;
}