body {
  background: #182028;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

h1 {
  font-size: 9vmin;
  color: #8bf;
  text-align: left;
  font-family: Lato, sans-serif;
  font-weight: 700;
  margin: 1rem 0 1rem 2rem;
}

/* Typewriter effect 1 */
@keyframes typing {
  0.0000%,
  27.3488% {
    content: "";
  }
  1.1395%,
  26.2093% {
    content: "p";
  }
  2.2791%,
  25.0698% {
    content: "pr";
  }
  3.4186%,
  23.9302% {
    content: "pro";
  }
  4.5581%,
  22.7907% {
    content: "prog";
  }
  5.6977%,
  21.6512% {
    content: "progr";
  }
  6.8372%,
  20.5116% {
    content: "progre";
  }
  7.9767%,
  19.3721% {
    content: "progres";
  }
  9.1163%,
  18.2326% {
    content: "progress";
  }
  10.2558%,
  17.0930% {
    content: "progress...";
  }
  /*
  30.7674%,
  51.2791% {
    content: "";
  }
  31.9070%,
  50.1395% {
    content: "w";
  }
  33.0465%,
  49.0000% {
    content: "wr";
  }
  34.1860%,
  47.8605% {
    content: "wri";
  }
  35.3256%,
  46.7209% {
    content: "writ";
  }
  36.4651%,
  45.5814% {
    content: "write";
  }
  37.6047%,
  44.4419% {
    content: "writer";
  }

  54.6977%,
  75.2093% {
    content: "";
  }
  55.8372%,
  74.0698% {
    content: "r";
  }
  56.9767%,
  72.9302% {
    content: "re";
  }
  58.1163%,
  71.7907% {
    content: "rea";
  }
  59.2558%,
  70.6512% {
    content: "read";
  }
  60.3953%,
  69.5116% {
    content: "reade";
  }
  61.5349%,
  68.3721% {
    content: "reader";
  }

  78.6279%,
  96.8605% {
    content: "";
  }
  79.7674%,
  95.7209% {
    content: "h";
  }
  80.9070%,
  94.5814% {
    content: "hu";
  }
  82.0465%,
  93.4419% {
    content: "hum";
  }
  83.1860%,
  92.3023% {
    content: "huma";
  }
  84.3256%,
  91.1628% {
    content: "human";
  }
  */
}

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

.typewriter {
  --caret: currentcolor;
}

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

.typewriter::after {
  content: "";
  border-right: 1px solid var(--caret);
  animation: blink 0.5s 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;
  }

  @keyframes sequencePopup {
    0%,
    100% {
      content: "developer";
    }
    25% {
      content: "writer";
    }
    50% {
      content: "reader";
    }
    75% {
      content: "human";
    }
  }

  .typewriter::before {
    content: "developer";
    animation: sequencePopup 12s linear infinite;
  }
}
/* https://codepen.io/alvaromontoro/pen/rNwVpdd */