body {
    background: #67c15e;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
  
}

.typewriter h1 {
    direction: rtl;
    float: right;
    color: #fff;
    font-family: monospace;
    font-size: 26px;
    overflow: hidden;
    border-left: .35em solid #fff;
  
    white-space: nowrap;
    margin: 0 auto;
  
    letter-spacing: .02em;
    animation:
        typing 3s steps(20, end),
        blink-caret .5s step-end infinite;
}

@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

@keyframes blink-caret {

    0% {
        border-color: transparent
    }

    50% {
        border-color: #fff
    }
}


.loader {
  width: 54px;
height: 54px;
    position: absolute;
    border-radius: 4px;
    margin-bottom: 155px;
    background-color: #fff;
    background-image: radial-gradient(circle 5px, #67c15e 100%, transparent 0), radial-gradient(circle 5px, #67c15e 100%, transparent 0), radial-gradient(circle 5px, #67c15e 100%, transparent 0), radial-gradient(circle 5px, #67c15e 100%, transparent 0), radial-gradient(circle 5px, #67c15e 100%, transparent 0), radial-gradient(circle 5px, #67c15e 100%, transparent 0);
    background-repeat: no-repeat;  animation: move 4s linear infinite , rotate 2s linear infinite;
}

@keyframes rotate {
  0% , 20%{ transform: rotate(0deg)}
  30% , 40% { transform: rotate(90deg)}
  50% , 60% { transform: rotate(180deg)}
  70% , 80% { transform: rotate(270deg)}
  90%,  100% { transform: rotate(360deg)}
}
@keyframes move {
  0% ,  9%{
      background-position:
      -12px -15px,  -12px 0px, -12px 15px,
      12px -15px,  12px 0px,  12px 15px;
  }
  10% , 25%{
      background-position:
      0px -15px,  -12px 0px, -12px 15px,
      34px -15px,  12px 0px,  12px 15px;
  }
  30% , 45%{
      background-position:
      0px -34px, -12px -10px, -12px 12px,
      34px -15px, 12px -10px, 12px 12px;
  }
  50% , 65% {
      background-position:
      0px -34px, -12px -34px, -12px 12px,
      34px -12px, 0px -10px, 12px 12px;
  }
  70% , 85% {
      background-position:
      0px -34px, -12px -34px, 0px 12px,
      34px -12px, 0px -10px, 34px 12px;
  }
 90% , 100% {
      background-position:
      0px -34px, -12px -34px, 0px 0px,
      34px -12px, 0px 0px, 34px 12px;
  }
}
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 
.fade-in {
   opacity:0;  /* make things invisible upon start */
   animation:fadeIn ease-in 1;
   animation-fill-mode:forwards;
   animation-duration:1.4s;
  }
 
.fade-in.delayed {
  animation-delay: 1.4s;
}