/* Fraunces (SIL Open Font License 1.1), subset to the glyphs A, y, E, e. */
@font-face {
  font-family: "Fraunces";
  src: url("/fraunces-ayeye.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --field: #2438e8;
  --ink: #ffe14d;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--field);
  color: var(--ink);
  /* Lets a finger drag across the word without the page scrolling away. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.word {
  margin: 0;
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: min(30vw, 62vh);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  cursor: default;
}

/* --t runs from 0 (far from the pointer) to 1 (under it); main.js sets it per letter. */
.word span {
  --t: 0;
  display: inline-block;
  font-variation-settings:
    "wght" calc(300 + 600 * var(--t)),
    "SOFT" calc(100 * var(--t)),
    "WONK" 1;
}