body {
  background-color: #4f4f4f; /* Dark grey background from Darkly theme */
  color: #ffffff; /* Light text */
  font-family: 'Arial', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  flex-direction: column; /* Arrange elements in a column */
}
h1 {
  color: #00bf63; /* Green color from Darkly theme */
  margin-bottom: 20px; /* Space between title and form */
}
.form-container {
  background-color: #777777; /* Slightly lighter dark background for form from Darkly theme */
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 191, 99, 0.5); /* Adjusted shadow to match theme */
  width: 100%;
  max-width: 400px; /* Set a max-width for better alignment */
  box-sizing: border-box; /* Ensure padding is included in overall width */
}
input[type="text"], input[type="password"] {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #00bf63; /* Green border from Darkly theme */
  border-radius: 5px;
  background-color: #777777; /* Dark input background from Darkly theme */
  color: #ffffff; /* Light text in input */
  box-sizing: border-box; /* Ensure padding is included in overall width */
}
input::placeholder {
  color: #ced4da; /* Light grey color for placeholder text from Darkly theme */
}
button {
  width: 100%;
  padding: 10px;
  background-color: #00bf63; /* Green button background from Darkly theme */
  color: #ffffff; /* Light text */
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}
button:hover {
  background-color: #198754; /* Darker green on hover from Darkly theme */
}
#alert {
  color: #ff0000; /* Red alert message */
  margin-top: 10px;
  align-self: center; /* Align to the start of the form */
}

/* Center the container, form, and alert */
.container {
  display: flex;
  flex-direction: column; /* Arrange title, form, and alert in a column */
  align-items: center;
}

footer {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  color: #00bf63; /* Green color from Darkly theme */
  text-align: center;
}

footer a {
  text-decoration: none;
  color: #00bf63; /* Green color from Darkly theme */
}

footer a:hover {
  color: #198754; /* Darker green on hover from Darkly theme */
}