:root {
  color-scheme: light;
  font: 100%/1.55 system-ui, sans-serif;
  color: #1f2d28;
  background: #f4f3ed;
}

body { margin: 0; padding: clamp(1rem, 5vw, 3rem); }
main {
  box-sizing: border-box;
  max-width: 28rem;
  margin-inline: auto;
  padding: clamp(1rem, 5vw, 2rem);
  background: #fffefa;
  border: 1px solid #d6ded2;
  border-radius: 1rem;
}

.brand { color: #2d5140; font-weight: 700; }
h1 { margin-block: .25rem .5rem; }
form:not([hidden]) { display: grid; gap: 1rem; }
label { display: grid; gap: .25rem; font-weight: 600; }
input, button {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 3rem;
  font: inherit;
  border: 1px solid #788a7e;
  border-radius: .5rem;
  padding: .6rem .75rem;
}

button { background: #294939; color: white; cursor: pointer; }
button:disabled { opacity: .65; cursor: wait; }
nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: 1rem; }
nav a { display: inline-flex; align-items: center; min-height: 3rem; color: #294939; }