/* Base styles for the form */
form {
  display: flex;
  flex-direction: column; /* Stack children vertically */
  padding: 1em;
  background: #f9f9f9;
  border: 1px solid #c1c1c1;
  margin: 2rem auto;
  /* width:100%; */
  max-width: 450px; /* Ensure the form does not exceed screen width */
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.heading {
  color: #0998E6;
  text-align: center;
  margin-bottom: 1em; /* Space below heading */
}

label {
  color: #0998E6;
  margin-bottom: 0.5em; /* Space between label and input */
}

input:not([type="checkbox"]) {
  padding: 0.7em;
  margin-bottom: 1em; /* Space between inputs */
  border: 1px solid #9c9c9c;
  width: 100%; /* Ensure inputs take full width */
  box-sizing: border-box; /* Include padding and border in element's total width and height */
}

.rememberme {
  display: flex; /* Use flex to align checkbox and label */
  align-items: center; /* Center checkbox and label vertically */
  margin-bottom: 1em; /* Space below the remember me checkbox */
}

.rememberme input {
  padding: 0.7em;
  
}

button {
  background: linear-gradient(to bottom, #1073d1 0%, #03bafc 100%);
  padding: 0.7em;
  color: black;
  border: solid 1px black;
  border-radius: 2px;
  cursor: pointer;
  font-size: 14pt;
  width: 100%; /* Ensure button takes full width */
}

button:hover {
  background: #E1E2E3;
  color: black;
}

.error {
  color: red;
  text-align: center;
  font-weight: bold;
  margin-top: 1em; /* Space above error message */
}

/* Media queries for larger screens */
@media (min-width: 500px) {
  form {
      flex-direction: row; /* Switch to horizontal layout */
      flex-wrap: wrap; /* Allow wrapping of items */
      justify-content: space-between; /* Space between items */
  }

  label,
  input {
      flex: 1 1 100%; /* Full width on mobile */
  }

  .rememberme {
      flex: 1 1 100%; /* Full width on mobile */
  }

  button {
      flex: 1 1 100%; /* Full width on mobile */
  }
}