@keyframes fadein-scale {
    0% {
      /* filter: blur(1em); */
      opacity: 0;
      transform-origin: 50% 60%;
      transform: scale(2);
    }
    90% {
        opacity: 1;
      }
    100% {
      /* filter: blur(0); */
      opacity: 1;
      transform-origin: 50% 60%;
      transform: scale(1);
    }
  }

  @keyframes fadein-reveal-right {
    0% {
      /* filter: blur(1em); */
      opacity: 0;
      transform: scale(1.2);
    }
    100% {
      /* filter: blur(0); */
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes fadein-move-right {
    0% {
      /* filter: blur(1em); */
      opacity: 0;
      transform: translateX(-100%);
    }
    100% {
      /* filter: blur(0); */
      opacity: 1;
      transform:  translateX(0);
    }
  }

  @keyframes fadein-move-up {
    0% {
      /* filter: blur(1em); */
      opacity: 0;
      transform: translateY(100%);
    }
    100% {
      /* filter: blur(0); */
      opacity: 1;
      transform:  translateY(0);
    }
  }

  @keyframes show {
    0% {opacity: 0;};
    100% {opacity: 1;};
    }


@keyframes hide {
    0% {opacity: initial;};
    100% {opacity: 0;};
    }

  .typewritter {
    font: 400 20px/24px 'Barlow';
    padding-inline: 3px;
  }

  .typewritter span {
    display: inline-block;
    white-space: pre;
  }

  .typewritter span .hidden {
    opacity: 0;
  }

  .second-state.typewritter span .hidden {
    animation: hide 1s forwards 1;
  }

  .typewritter.nmn span .show,
  .typewritter.glasajte span .show {
    opacity: 0;
    animation: fadein-reveal-right 1s forwards 1;
  }

  .typewritter.nmn:nth-child(2) span .show,
  .typewritter.glasajte:nth-child(2) span .show {
    opacity: 0;
    animation: fadein-reveal-right 3s forwards 1;
  }

  .typewritter.godina span .show {
    opacity: 0;
    animation: fadein-scale 1s forwards 1;
  }

  .typewritter.godina:nth-child(2) span .show {
    opacity: 0;
    animation: fadein-scale 1s forwards 1;
    animation-delay: 0.5s;
  }

  .typewritter.zl-st span .show {
    opacity: 0;
    animation: fadein-move-up 1s forwards 1;
  }

  .typewritter.zl-st:nth-child(2) span .show {
    opacity: 0;
    animation: fadein-move-up 2s forwards 1;
  }
