/* The trail of pixels: minimal. Warm paper, ink, and one accent, a violet that only the pixel under the pointer
   wears. A pixel typeface with variable axes (Bitcount) for the word, a narrow sans for the small print. */
:root {
  --fondo: #f3f0e8;        /* the paper */
  --inchiostro: #141414;   /* the word and the pixels */
  --tenue: #8b867b;        /* the small print */
  --accento: #7a4dff;      /* the pixel under the pointer */
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--inchiostro);
  font-family: 'Instrument Sans Variable', 'Instrument Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.palco {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  touch-action: none;
  cursor: crosshair;
}

.testa {
  position: absolute;
  z-index: 3;
  top: clamp(16px, 4vh, 36px);
  left: 4vw;
  right: 4vw;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  letter-spacing: 0.02em;
  pointer-events: none;
}

.marchio {
  font-family: 'Bitcount Prop Single Variable', monospace;
  font-variation-settings: 'ELSH' 50;
  font-size: 18px;
  font-weight: 600;
}

.nota {
  color: var(--tenue);
}

/* the word twice, in the same place: in ink on the paper, and in paper inside the pixels */
.parola {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-family: 'Bitcount Prop Single Variable', monospace;
  font-variation-settings: 'ELSH' 50;
  font-size: min(19vw, 36vh);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

.parola--sopra {
  z-index: 2;
  color: var(--fondo);
  clip-path: inset(50%);
}

.celle {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.celle__pieno {
  fill: var(--inchiostro);
}

.celle__cursore {
  fill: var(--accento);
}

@media (max-width: 640px) {
  .parola {
    font-size: 24vw;
  }
}