@font-face {
  font-family: "Chewy";
  src: url("/assets/fonts/chewy.woff2") format("woff2");
  font-display: swap;
}

.home {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.3rem;
  padding: 2rem 1rem;
  text-align: center;
}
.title {
  margin: 0;
  font-family: "Chewy", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(3.8rem, 19vw, 6.5rem);
  line-height: 0.88;
  letter-spacing: 0.01em;
  color: #ffc93c;
  -webkit-text-stroke: 0.06em var(--ink);
  paint-order: stroke fill;
  text-shadow: 0.05em 0.06em 0 var(--red);
  transform: rotate(-3deg);
}
.title .v { color: var(--red); text-shadow: 0.05em 0.06em 0 #ffc93c; }
.home .when { margin: 0.5rem 0 0; color: var(--muted); font-size: 1.15rem; letter-spacing: 0.04em; }
.home .enter { margin-top: 0.4rem; font-size: 1.25rem; padding: 0.75rem 2.8rem; border-radius: 999px; }
.home .results-link { margin-top: 0.4rem; }
.home .results-link[hidden] { display: none; }

.guy { width: min(72vw, 270px); height: auto; margin: 0.5rem 0 0.2rem; overflow: visible; }
.guy path, .guy circle, .guy ellipse { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.guy .cheese { fill: #ffc93c; }
.guy .crust { fill: none; stroke: #c8812f; stroke-width: 18; }
.guy .crust-shine { fill: none; stroke: #e8b06a; stroke-width: 4; }
.guy .pep { fill: var(--red); stroke-width: 3; }
.guy .limb { fill: none; stroke-width: 6; }
.guy .glove { fill: #fff; stroke-width: 3.5; }
.guy .cuff { fill: none; stroke-width: 3; }
.guy .palm-mark { fill: #ffd9cf; stroke: none; display: none; }
.guy .hand.palm .palm-mark { display: inline; }
.guy .shoe { fill: var(--red); stroke-width: 3.5; }
.guy .eye { fill: #fff; stroke-width: 2.5; }
.guy .pupil { fill: var(--ink); stroke: none; }
.guy .cheek { fill: #ff8a7a; stroke: none; opacity: 0.6; }
.guy .smile { fill: none; stroke-width: 3.5; }
.guy .o, .guy .grin { fill: #6b0f0a; stroke-width: 3; }
.guy #mouth > * { display: none; }
.guy #mouth[data-shape="smile"] .smile,
.guy #mouth[data-shape="grin"] .grin,
.guy #mouth[data-shape="o"] .o { display: inline; }
.guy .finger { fill: #fff; stroke: var(--ink); stroke-width: 3; display: none; }
.guy .hand.point .finger { display: inline; }
.guy .floor { fill: #ead9c6; stroke: none; }