:root {
  --sans-serif: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
  --serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}

x-letter {
  display: block;
  text-align: center;

  &, & input, & button {
    font-size: 2em;
    font: inherit;
  }

  & input {
    text-transform: uppercase;
  }

  & form {
    padding: 0.25em;
    border: solid 0.25rem;
  }

  &.correct form {
    border-color: green;
    background-color: darkseagreen;
  }

  &.incorrect form {
    border-color: darkred;
    background-color: lightcoral;
  }

  & + & {
    margin-top: 1em;
  }
}

x-font-toggle {
  & label[for="sans-serif"] {
    font-family: var(--sans-serif);
  }

  & label[for="serif"] {
    font-family: var(--serif);
  }
}