/* Typewriter effect */
@keyframes typing {
  0.0000%, 6.6667%   { content: ""; }
  13.3333%           { content: "d"; }
  20%                { content: "di"; }
  26.6667%           { content: "dig"; }
  33.3333%           { content: "digi"; }
  40%                { content: "digit"; }
  46.6667%           { content: "digita"; }
  53.3333%, 100%     { content: "digital"; }
}

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

.typewriter {
  --caret: currentcolor;
}

.typewriter::before {
  content: "";
  animation: typing 3s steps(15, end) 1 forwards;
}

.typewriter::after {
  content: "";
  border-right: 1px solid var(--caret);
  animation: blink 0.53s linear 0s 5.5 normal forwards;
}

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

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


@media (prefers-reduced-motion) {
  .typewriter::after {
    animation: none;
  }
  
  @keyframes sequencePopup {
    0%, 100% { content: "developer"; }
    25% { content: "writer"; }
    50% { content: "reader"; }
    75% { content: "human"; }
  }

  .typewriter::before {
    content: "developer";
    animation: sequencePopup 12s linear infinite;
  }
}