body {
  background-color: cornsilk;
  color: black;
  font-family: Georgia, serif;
  hyphenate-limit-chars: auto 5;
  hyphens: auto;
  line-height: 1.5;
  margin: 0;
  padding-inline: 16px;
  text-align: center;
}

::selection {
  background-color: orange;
  color: black;
}

:is(h1, h2) {
  color: orange;
  font-size: xx-large;
  font-style: italic;
  text-wrap: balance;
}

p {
  font-size: 1.125em;
  font-weight: bold;
  margin: 1lh auto;
  max-width: 600px;
  text-wrap: balance;

  &:has(input) {
    display: flex;
    justify-content: center;
    max-width: 480px;
  }

  & button {
    background: #422622 url(data:image/jpeg;base64,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) center / cover;
    border-radius: 8px;
    color: cornsilk;
    margin: 0.5lh 0.25lh 0;
    padding: 16px 32px;
  }
}

img {
  height: auto;
  max-width: 100%;
}

u {
  text-decoration-thickness: 2px;
  text-underline-offset: 0.125em;
}

form {
  background-color: saddlebrown;
  color: white;
  margin: 40px -16px 0;
  padding: 40px 16px;
}

input {
  background-color: cornsilk;
  border-radius: 8px 0 0 8px;
  border: 0;
  color: black;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  padding-left: 2.5%;
  width: 100%;

  &:focus-visible {
    outline-offset: -3px;
    outline: 3px solid orange;
  }

  &::placeholder {
    color: orange;
  }

  & + button {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    font-size: larger;
    margin: 0;
  }
}

button {
  background-color: transparent;
  border-radius: 0;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  padding: 0;
}

[disabled] {
  cursor: not-allowed;
}

.columns {
  grid-template-columns: repeat(2, 1fr);
  margin-inline: auto;

  body > & {
    max-width: 820px;
  }

  form & {
    max-width: 600px;
  }

  & button:nth-child(even) {
    scale: -1 1;
  }

  @media (width <= 600px) {
    form & {
      display: grid;
    }
  }

  @media (600px < width) {
    display: grid;

    body > & {
      align-items: center;
      column-gap: 20px;
      grid-auto-flow: dense;

      & img:nth-child(4n + 1) {
        justify-self: center;
        grid-column-end: -1;
      }
    }

    & p:nth-child(4n + 2) {
      text-align: right;
    }

    & p:nth-child(4n) {
      text-align: left;
    }
  }
}

.decorative {
  border-radius: 24px;
  corner-shape: bevel;
  margin-block: 0.5lh;

  &:nth-child(even) {
    rotate: 2deg;
  }

  &:nth-child(odd) {
    rotate: -2deg;
  }
}

.highlight {
  color: orange;
  user-select: all;
}