@font-face {
  font-family: "CourrierPrime";
  src: url("CourierPrimeSansBold-rEXO.ttf");
}

a {
  text-decoration: underline;
}
button,
summary,
fieldset {
  width: 100%;
}

#input:has(+ details #case-none:checked) {
  text-transform: none;
}

#input:has(+ details #case-upper:checked) {
  text-transform: uppercase;
}

#input:has(+ details #case-lower:checked) {
  text-transform: lowercase;
}

span[role="presentation"]:has(svg) {
  font-family: serif;
  display: inline-flex;
  align-items: end;
  height: 100%;
}

span[role="presentation"] svg {
  width: 2ch;
}

.flex {
  display: flex;
}

#simulation > div {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 780px;
}

.emoji {
    font-size: 80px;
}

ul {
  display: flex;
  gap: 0.8rem;
  margin-block: 0;
  width: fit-content;
  padding-inline-start: 0;
  padding: 42px;
  --s: 21px;
  --c1: #915e5b;
  --c2: #dbd1d0;

  --g: conic-gradient(at 90% 40%, #0000 75%, var(--c1) 0);
  background: var(--g), var(--g) var(--s) var(--s) var(--c2);
  background-size: calc(2 * var(--s)) calc(2 * var(--s));
  min-width: 696px;
}
ul > li {
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.98);
  color: black;
  height: 200px;
  aspect-ratio: 210 / 297;
  border: 1px solid black;
  rotate: -0.5deg;
  font-size: 120pt;
  font-family: "CourrierPrime", "Courier New", Courier, monospace;
}

ul > li:nth-child(odd) {
  rotate: 0.5deg;
}

.page:after {
  content: attr(data-page);
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: lightgrey;
  font-size: 1rem;
}