main {
  padding-top: 0.3rem;
}

.signup-title {
  margin-top: 90px;
  text-align: center;
  font-size: 1.8rem;
  color: #ff5454;
}

.signup-form {
  padding: 1rem;
}

.signup-form label {
  font-weight: bold;
}

.signup-form label,
.signup-form input,
.signup-form select {
  display: inline-block;
  margin-top: 1rem;
  width: 100%;
}

.signup-form input[type="checkbox"],
.signup-form input[type="checkbox"] + label {
  vertical-align: middle;
  display: inline-block;
  width: auto;
}

.signup-form input:not([type="checkbox"]),
.signup-form select {
  border: 1px solid #ccc;
  padding: 0.2rem 0.5rem;
  font: inherit;
}

.signup-form input:not([type="checkbox"]):focus,
.signup-form select:focus {
  outline: none;
  background-color: #d8f3df;
  border-color: #2ddf5c;
}

/* .signup-form :invalid {
  border-color: red !important;
  background-color: rgb(249, 149, 149);
} */

.signup-form button[type="submit"] {
  display: block;
  margin-top: 1rem;
}

button[disabled] {
  cursor: not-allowed;
  background-color: red;
}

@media (min-width: 40rem) {
  .signup-form {
    margin: auto;
    width: 25rem;
  }
}