@font-face {
    font-family: 'Good Slick';
    src: url('./fonts/Good_Slick.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
  }
 
  :root {
    --word-color: #9CFF00;       /* exact green sampled from the gif */
    --word-font: 'Good Slick', sans-serif;
    --row-height: 96px;          /* structural step height used by the slide animation, independent of typographic line-height */
  }
 
  .ticker {
    position: relative;
    overflow: hidden;
    height: var(--row-height);
  }
 
  .ticker ul {
    margin: 0;
    padding: 0;
    list-style: none;
    animation: slide 8.5s infinite cubic-bezier(.65,0,.35,1);
  }
 
  .ticker li {
    height: var(--row-height);
    display: flex;
    align-items: center;       /* handles the vertical centering, since a 20px line-height can't visually center a 75px glyph on its own */
    font-family: var(--word-font);
    font-weight: 400;
    font-style: normal;
    font-size: 75px;
    line-height: 20px;
    letter-spacing: 0%;
    vertical-align: middle;
    color: var(--word-color);
    white-space: nowrap;
    padding-left: 6px;
  }
 
  /* 5 real words + 1 duplicate of the first, so the loop can slide seamlessly
     and snap back invisibly once it reaches the duplicate's identical position.
     Pattern per word: hold still (~16% of the cycle) then slide (~3%). */
  @keyframes slide {
    0%,   16%   { transform: translateY(0); }
    19%,  35%   { transform: translateY(calc(var(--row-height) * -1)); }
    38%,  54%   { transform: translateY(calc(var(--row-height) * -2)); }
    57%,  73%   { transform: translateY(calc(var(--row-height) * -3)); }
    76%,  92%   { transform: translateY(calc(var(--row-height) * -4)); }
    95%,  100%  { transform: translateY(calc(var(--row-height) * -5)); }
  }