@keyframes typing {
  0%, 40% { content: ""; }
  1.0%, 40% { content: "q"; }
  2.0%, 39% { content: "qr"; }
  3.0%, 39% { content: "qr."; }
  4.0%, 38% { content: "qr.f"; }
  5.0%, 38% { content: "qr.fl"; }
  6.0%, 37% { content: "qr.flo"; }
  7.0%, 37% { content: "qr.flor"; }
  8.0%, 36% { content: "qr.flori"; }
  9.0%, 36% { content: "qr.floria"; }
  10.0%, 35% { content: "qr.florian"; }
  11.0%, 35% { content: "qr.florianm"; }
  12.0%, 35% { content: "qr.florianm."; }
  13.0%, 34% { content: "qr.florianm.c"; }
  14.0%, 34% { content: "qr.florianm.co"; }
  15.0%, 33% { content: "qr.florianm.com"; }
  16.0%, 33% { content: "qr.florianm.com/"; }
  17.0%, 32% { content: "qr.florianm.com/a"; }
  18.0%, 32% { content: "qr.florianm.com/ab"; }
  19.0%, 31% { content: "qr.florianm.com/abc"; }
  20.0%, 31% { content: "qr.florianm.com/abc1"; }
  21.0%, 30% { content: "qr.florianm.com/abc12"; }
  22.0%, 30% { content: "qr.florianm.com/abc123"; }
  41% { content: ""; }
  50%, 95% { content: "s"; }
  52%, 94% { content: "so"; }
  53%, 94% { content: "som"; }
  54%, 93% { content: "some"; }
  55%, 93% { content: "somet"; }
  56%, 92% { content: "someth"; }
  57%, 92% { content: "somethi"; }
  58%, 91% { content: "somethin"; }
  59%, 91% { content: "something"; }
  60%, 90% { content: "something."; }
  61%, 90% { content: "something.c"; }
  62%, 89% { content: "something.co"; }
  63%, 89% { content: "something.com"; }
  64%, 88% { content: "something.com/"; }
  65%, 88% { content: "something.com/s"; }
  66%, 87% { content: "something.com/so"; }
  67%, 87% { content: "something.com/som"; }
  68%, 86% { content: "something.com/some"; }
  69%, 86% { content: "something.com/somet"; }
  70%, 85% { content: "something.com/someth"; }
  71%, 85% { content: "something.com/somethi"; }
  72%, 84% { content: "something.com/somethin"; }
  73%, 84% { content: "something.com/something"; }
  74%, 83% { content: "something.com/somethinge"; }
  75%, 83% { content: "something.com/somethingel"; }
  76%, 82% { content: "something.com/somethingels"; }
  77%, 82% { content: "something.com/somethingelse"; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.typewriter {
  --caret: currentcolor;
}

.typewriter::before {
  content: "";
  animation: typing 9s infinite;
}

.typewriter::after {
  content: "";
  border-right: 1px solid var(--caret);
  animation: blink 1s linear infinite;
}

.typewriter.thick::after {
  border-right: 1ch solid var(--caret);
}

.typewriter.nocaret::after {
  border-right: 0;
}


@media (prefers-reduced-motion) {
  .typewriter::after {
    animation: none;
  }

  .typewriter::before {
    content: "qr.florianm.com/abc123";
    animation: sequencePopup 12s linear infinite;
  }
}