/* form */
:root {
  --form-input-bg: #2c2f3a;
  --form-input-bg-focus: #3a3d49;
  --form-input-border-focus: #4a4d5a;
  --form-input-color: #fff;
  --form-button-bg: #3a3d49;
  --form-button-bg-hover: #4a4d5a;
  --form-button-color: #fff;
}

@media (prefers-color-scheme: light) {
  :root {
    --form-input-bg: #f0f0f0;
    --form-input-bg-focus: #e0e0e0;
    --form-input-border-focus: #ccc;
    --form-input-color: #000;
    --form-button-bg: #e0e0e0;
    --form-button-bg-hover: #d0d0d0;
    --form-button-color: #000;
  }
}

button,
form,
input,
textarea {
  width: 100%;
  box-sizing: border-box;
}

form {
  border-radius: 10px;
  max-width: 400px;
  margin: 0;
}

button,
input,
textarea {
  margin-bottom: 15px;
  padding: 10px;
  border-radius: 5px;
  border: 0;
  font-size: 14px;
}

input,
textarea {
  background-color: var(--form-input-bg);
  color: var(--form-input-color);
}

textarea {
  resize: none;
  height: 80px;
  outline: 0;
}

input:focus,
textarea:focus {
  background-color: var(--form-input-bg-focus);
  border: 1px solid var(--form-input-border-focus);
  outline: 0;
}

button {
  background-color: var(--form-button-bg);
  color: var(--form-button-color);
  text-align: center;
}

button:hover {
  background-color: var(--form-button-bg-hover);
}