.reveal {
  white-space-collapse: preserve-breaks;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  animation: typing 2s steps(60, end); 
}

@keyframes move {
  25% {
    opacity: 0;
    transform: translateY(55px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes slide-up {
	0% {
		opacity: 0;
		transform: translateY(250px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes grow {
  0% { max-height: var(--lineHeight); }
  100% { max-height: calc(var(--lineHeight) * var(--lines)); }
}

@keyframes carriageReturn {
  0% { top: 0; }
  100% { top: calc(var(--lineHeight) * var(--lines)); }
}

@keyframes type {
  0% { width: 100%; }
  100% { width: 0%; }
}

@keyframes caret {
  0% {  }
  100% {  }
}

.typewriter {
  --bgColor: white;
  --lines: 500;
  --lineHeight: 2rem;
  --timePerLine: 2s;
  --widthCh: 60;
  --width: calc(var(--widthCh) * 1ch);
  --time: calc(var(--lines) * var(--timePerLine));
  animation: grow var(--time) steps(var(--lines));
  animation-fill-mode: forwards;
  /* background: var(--bgColor);   */
  line-height: var(--lineHeight);
  max-height: var(--lineHeight);
  overflow: hidden;
  position: relative;
  width: 100%;
}

.typewriter::before {
  content: "";
  animation: 
    type var(--timePerLine) linear infinite, 
    carriageReturn var(--time) steps(var(--lines)) var(--lines),
    caret 0.5s steps(2) infinite;
  background: var(--color-primary);
  /* border-left: 2px solid; */
  bottom: 0;
  height: 2rem;
  position: absolute;
  right: 0;
  width: 100%;
}

@keyframes bounce-out {
  from {opacity: 0;}
    to {opacity: 1; transform: scale(1);}
}