/* Dark mode styles */
body {
    background-color: #121212; /* Dark background */
    color: #e0e0e0; /* Light text */
    display: flex; /* Use Flexbox to center the container */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 100vh; /* Full viewport height */
    margin: 0; /* Remove default margin */
}

.container {
    background-color: #1e1e1e; /* Darker container background */
    color: #e0e0e0; /* Light text for container */
    border: 1px solid #333; /* Subtle border */
    padding: 20px; /* Add some padding */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); /* Add a shadow for depth */
    width: 300px; /* Fixed width for the container */
    text-align: center; /* Center text inside the container */
}

button {
    background-color: #333; /* Dark button */
    color: #e0e0e0; /* Light text on button */
    border: none; /* Remove border */
    border-radius: 5px; /* Rounded corners for buttons */
    padding: 10px 15px; /* Add padding */
    margin: 10px 0; /* Space between buttons */
    cursor: pointer; /* Change cursor on hover */
}

button:hover {
    background-color: #555; /* Lighter button on hover */
}

input, select {
    background-color: #333; /* Dark background for inputs */
    color: #e0e0e0; /* Light text */
    border: 1px solid #555; /* Subtle border */
    border-radius: 5px; /* Rounded corners for inputs */
    padding: 10px; /* Add padding */
    margin-bottom: 10px; /* Space below inputs */
    width: calc(100% - 20px); /* Full width minus padding */
    box-sizing: border-box; /* Include padding in total width */
}