* {
  margin: 0px;
  padding: 0px;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
}

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: black;
  color: white;
}
form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1em;
}
h1 {
  margin: 1em;
}

input,
select,
button,
option {
  padding: 0.5em;
  background-color: oklch(27.9% 0.041 260.031);
  color: white;
  border: none;
}
input,
select,
button {
  border-radius: 1em;
}
input:valid,
select:valid {
  border: 2px solid oklch(72.3% 0.219 149.579);
}
input:invalid,
select:invalid {
  border: 2px solid oklch(64.5% 0.246 16.439);
}
button {
  font-size: 1.4em;
  font-weight: bold;
}
button:hover {
  background-color: oklch(20.8% 0.042 265.755);
  cursor: pointer;
}