.login-container {
    background-color: #2e3b4e;
    padding: 1.25rem; /* 20px */
    border-radius: 0.5rem; /* 8px */
    box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.1); /* 2px 10px */
    width: 90%; /* Use 90% width for better responsiveness */
    max-width: 25rem; /* 400px */
    margin: auto; /* Center the container */
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Center items horizontally */
}

.login-input {
    border: 1px solid #ccc; /* Corrected border style */
    background: transparent; /* Transparent background */
    color: #cfe5ff; /* Light text color */
    outline: none;
    font-size: 1rem; /* 16px */
    padding: 0.5rem; /* Padding for better appearance */
    height: 2.5em; /* Set a height for the input field */
    flex-grow: 1; /* Allow the input field to grow */
    min-width: 6.25rem; /* Minimum width to prevent collapsing (100px) */
    width: calc(100% - 1rem); /* Adjust width to account for padding */
}

.input-group {
    margin-bottom: 0.9375rem; /* 15px */
    width: 100%; /* Full width for input groups */
}

.welcome-message {
    margin-bottom: 2rem; /* Space below the welcome message */
    text-align: center; /* Center the text */
}

.buttons {
    display: flex; /* Use flexbox to align buttons in a row */
    width: 100%; /* Full width for the buttons container */
    margin-top: 0.625rem; /* Space above the buttons */
    justify-content: center; /* Center all buttons */
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
}

.button.inverted {
    background-color: #cfe5ff;
    color: #2e3b4e;
    border: none;
    padding: 0.625rem 0.9375rem; /* 10px 15px */
    border-radius: 0.25rem; /* 4px */
    cursor: pointer;
    transition: background-color 0.3s; /* Smooth transition */
    text-align: center; /* Center text in buttons */
    display: inline-block; /* Ensure buttons are inline-block */
    text-decoration: none; /* Remove underline from anchor tags */
    font-size: 1rem; /* Match font size with other buttons */
}

.button.inverted:hover {
    background-color: #2e3b4e;
    color: #cfe5ff; /* Optional: hover effect for inverted button */
}

.button.inverted.half-width {
    width: auto; /* Allow the button to take its natural width */
    max-width: 60%; /* Adjust width to allow for two buttons side by side */
    margin: 0.5rem; /* Add some margin between buttons */
}

.login-button {
    width: 100%; /* Full width for the login button */
    margin-top: 0.625rem; /* Space above the button */
}

.half-width {
    width: 45%; /* Adjust width for half-width buttons */
    margin: 0.5rem; /* Add margin for spacing */
}

.accent-button {
    background-color: #ff8c00; /* Set the background color to orange */
    color: #2e3b4e; /* Set text color to white for contrast */
    border: none;
    border-radius: 0.25rem; /* 4px */
    cursor: pointer;
    transition: background-color 0.3s; /* Smooth transition */
    text-align: center; /* Center text in buttons */
    display: inline-block; /* Ensure buttons are inline-block */
    text-decoration: none; /* Remove underline from anchor tags */
    font-size: 1rem; /* Match font size with other buttons */
    flex-grow: 1; /* Allow the button to grow */
    padding: 0.625rem 0; /* Add padding for better appearance */
}
.error-message {
    display: flex; /* Use flexbox to align buttons in a row */
    color: #a52a53;
    text-align:center;
    width: 100%; /* Full width for the buttons container */
    margin-top: 0.625rem; /* Space above the buttons */
    justify-content: center; /* Center all buttons */
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
}

/* Media Queries for Responsiveness */
@media (max-width: 600px) {
    .login-input {
        font-size: 0.9rem; /* Slightly smaller font size on mobile */
    }

    .button.inverted.half-width,
    .half-width {
        width: auto;
        padding:0.5rem;
    }

    .login-button {
        width: 100%; /* Ensure the login button is full width */
    }
}