:root {
  --fonts: "Atkinson Hyperlegible", "Atkinson Hyperlegible Mono", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
    "Droid Sans", "Helvetica Neue", sans-serif;
  --mono: "Atkinson Hyperlegible Mono", courier;

  font-optical-sizing: auto;
  font-size: 1em;
  line-height: 1.35;
  font-family: var( --fonts );
  box-sizing: border-box;
  outline-color: blue;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body { min-height: 100dvh; max-width: 100dvw; }
body {
  --fade: rgba( 255 255 255 / .7 );
  background-image: url(/assets/pexels-ingo-543605.jpg), linear-gradient(0deg,var( --fade ), var( --fade ));
  background-blend-mode: overlay;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  place-items: center;
}

form {
  width: 20em; margin-inline: auto;
  display: flex;
  gap: 0.25em;
  flex-direction: column;
  background-color: rgba( 255 255 255 / .5 );
  padding: 0.5em;
  border-radius: 0.5em;
  border: 1px solid rgba( 0 0 0 / .75 );
}

span { display: flex; flex-direction: column; }
button { padding-inline: 0.5em; margin-block-end: 1em; }

input, select, textarea, button {
  font: 1em/1.35 var(--fonts); padding: 0.125em 0.25em; border-width: 1px;
  min-height: 1.35lh; border-radius: 3px; vertical-align: middle;
  border-color: black;
}
button {
  background-color: #F0F0F0; color: black;
  border: 1px solid black; border-radius: 3px;
  padding-inline: 0.5em;
}