body form {
  width: 100%;
}

body form input {
  width: 100%;
  font-family: "JetBrains Mono", serif;
  padding: 1em 1em;
  border: none;
  color: black;
  background-color: white;
  border: 1px solid var(--dark-grey-light);
  border-radius: 8px;
  box-shadow: 5px 5px 1px var(--light-grey-light);
}

body form input:disabled {
  background-color: var(--background-light);
}

body form select {
  padding: 0.5em 0.5em;
  font-family: inherit;
  font-size: 1em;
  border: 1px solid var(--dark-grey-light);
  border-radius: 8px;
  color: black;
  background-color: white;
}

body form select:focus {
  border-color: var(--cyan-light);
}

body form label {
  color: var(--dark-grey-light);
}

@media (prefers-color-scheme: dark) {
  body form input {
    color: white;
    background-color: black;
    border: 1px solid var(--light-grey-dark);
    box-shadow: 5px 5px 1px var(--dark-grey-dark);
  }

  body form input:disabled {
    background-color: var(--background-dark);
  }

  body form select {
    color: white;
    background-color: black;
    border: 1px solid var(--light-grey-dark);
  }

  body form label {
    color: var(--light-grey-light);
  }
}