:root {
  --spacing: 1em;

  color-scheme: light dark;
}

body {
  font-family: sans-serif;
}

#qrcode {
  padding: 64px;
  background: white;
}

main {
  display: grid;
  grid-template:
    "input input"
    "qrcode hex"
    /
    1fr auto;
  grid-gap: 1em;
  align-items: center;
}

main > form {
  grid-area: input;
  display: flex;
  align-items: end;
}

main input {
  width: 100%;
  display: block;
  flex-grow: 1;
}

#qrcode {
  grid-area: qrcode;
}

svg {
  max-height: 50svmin;
}

#hex {
  grid-area: hex;
  line-height: 1em;
  letter-spacing: calc(1em - 1.2ex);
  font-size: calc((40svmin - 4rem) / var(--num-modules));
  margin-inline: 2rem;
  --num-modules: 20;
}