:root {
  --accent-color: #4f46e5;
}

.typewriter {
  --caret: var(--accent-color);
  color: var(--accent-color);
  font-weight: 10px;
  text-shadow: 0 0 20px rgba(79, 70, 229, 0.4);
}

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

.typewriter::after {
  content: "";
  border-right: 0.15em solid var(--caret);
  animation: blink 0.7s steps(2) infinite;
  margin-left: 2px;
}

@keyframes typing {
  0%,
  2% {
    content: "";
  }
  3% {
    content: "m";
  }
  4% {
    content: "mo";
  }
  5% {
    content: "mod";
  }
  6% {
    content: "mode";
  }
  7% {
    content: "moder";
  }
  8% {
    content: "modern";
  }
  9% {
    content: "moderne";
  }
  10% {
    content: "moderne ";
  }
  11% {
    content: "moderne w";
  }
  12% {
    content: "moderne we";
  }
  13% {
    content: "moderne web";
  }
  14% {
    content: "moderne webs";
  }
  15% {
    content: "moderne websi";
  }
  16% {
    content: "moderne websit";
  }
  17% {
    content: "moderne website";
  }
  18%,
  30% {
    content: "moderne websites";
  }
  32%,
  34% {
    content: "";
  }
  35% {
    content: "s";
  }
  36% {
    content: "sn";
  }
  37% {
    content: "sne";
  }
  38% {
    content: "snel";
  }
  39% {
    content: "snell";
  }
  40% {
    content: "snelle";
  }
  41% {
    content: "snelle ";
  }
  42% {
    content: "snelle w";
  }
  43% {
    content: "snelle web";
  }
  44% {
    content: "snelle web-";
  }
  45% {
    content: "snelle web-o";
  }
  46% {
    content: "snelle web-p";
  }
  47% {
    content: "snelle web-op";
  }
  48% {
    content: "snelle web-opl";
  }
  49% {
    content: "snelle web-oplo";
  }
  50% {
    content: "snelle web-oplos";
  }
  51% {
    content: "snelle web-oploss";
  }
  52% {
    content: "snelle web-oplossi";
  }
  53% {
    content: "snelle web-oplossin";
  }
  54% {
    content: "snelle web-oplossing";
  }
  55% {
    content: "snelle web-oplossinge";
  }
  56%,
  65% {
    content: "snelle web-oplossingen";
  }
  67%,
  69% {
    content: "";
  }
  70% {
    content: "t";
  }
  71% {
    content: "to";
  }
  72% {
    content: "toe";
  }
  73% {
    content: "toek";
  }
  74% {
    content: "toeko";
  }
  75% {
    content: "toekom";
  }
  76% {
    content: "toekoms";
  }
  77% {
    content: "toekomst";
  }
  78% {
    content: "toekomstb";
  }
  79% {
    content: "toekomstbe";
  }
  80% {
    content: "toekomstbes";
  }
  81% {
    content: "toekomstbest";
  }
  82% {
    content: "toekomstbeste";
  }
  83% {
    content: "toekomstbesten";
  }
  84% {
    content: "toekomstbestend";
  }
  85% {
    content: "toekomstbestendi";
  }
  86% {
    content: "toekomstbestendig";
  }
  87% {
    content: "toekomstbestendige";
  }
  88% {
    content: "toekomstbestendige ";
  }
  89% {
    content: "toekomstbestendige s";
  }
  90% {
    content: "toekomstbestendige si";
  }
  91% {
    content: "toekomstbestendige sit";
  }
  92% {
    content: "toekomstbestendige site";
  }
  93%,
  98% {
    content: "toekomstbestendige sites";
  }
  100% {
    content: "";
  }
}

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