temp

$slider-name: typing-slider
$slides: 1
$typing-duration: 5s
$tab-letters: 14 //number of characters in each paragraph
$slider-font-size: 5rem
$background: #FFCC00

@keyframes cursor
  from, to
    border-color: transparent
  50%
    border-color: black

@keyframes typing
  from
    width: 100%
  90%, to
    width: 0

@keyframes slide
  #{calc(100% / $slides)}
    font-size: $slider-font-size
    letter-spacing: 3px
  to
    font-size: 0
    letter-spacing: 0

.landing-body
  font-family: Consolas, monospace
  font-weight: bold
  text-align: center
  white-space: nowrap

.landing-body h1
  position: relative
  display: inline
  font-size: 0
  text-transform: uppercase
  letter-spacing: 0
  animation: slide $typing-duration * $slides step-start infinite

.landing-body h1::after
  content: ""
  position: absolute
  top: 0
  right: 0
  bottom: 0
  border-left: 3px solid black
  // background-color: $background;
  animation: typing $typing-duration infinite, cursor 1s infinite

@each $letters in $tab-letters
  $i: index($tab-letters, $letters)
  .landing-body h1:nth-child(#{$i})
    animation-delay:  $typing-duration * ($i - 1)
    &::after
      animation-delay: $typing-duration * ($i - 1)
      animation-timing-function: steps(#{$letters}), step-end