@font-face {
  font-family: 'Share Tech Mono';
  src: url('fonts/Share Tech Mono Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  background: #000;
  color: #0f0;
  font-family: 'Share Tech Mono', monospace;
  margin: 0;
  padding: 2rem;
}

/* Wrapper for the blinking cursor */
.typewriter {
  display: inline-block;
  border-right: 0.15em solid #0f0;
  white-space: nowrap;
  overflow: hidden;
}

/* The animated typing text */
.typing-text {
  display: inline-block;
  width: 0ch;
  overflow: hidden;
  white-space: nowrap;
  --steps: 28;
  animation:
    typing 3s steps(var(--steps), end) forwards,
    blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  from { width: 0ch; }
  to   { width: calc(var(--steps) * 1ch); }
}

@keyframes blink-caret {
  0%, 100% { border-color: transparent; }
  50% { border-color: #0f0; }
}