body{
  overflow-x: hidden;
  font-family: JetBrains Mono;
  color: #33ff10;
  background: #000;
  margin: 40px 0px;
}
div{
  width: 100%;
  max-width: 100%;
  text-align: center;
  animation: gradient 6.4s infinite ease-in-out;
  letter-spacing: 10px;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 18px;
  text-indent: 5px;    
}

.s1{
  font-size: 18px
}
.s2{
  font-size: 28px
}
.s3{
  font-size: 32px
}
.s4{
  font-size: 36px
}
.s4{
  font-size: 40px
}
.s5{
  font-size: 44px
}
.s6{
  font-size: 48px
}



.a01{ 
  animation-delay: 0.1s;
}
.a02{
  animation-delay: 0.2s;  
}

.a03{
  animation-delay: 0.3s;  
}

.a04{
  animation-delay: 0.4s;  
}

.a05{
  animation-delay: 0.5s;  
}

.a06{
  animation-delay: 0.6s;  
}

  
@keyframes gradient{
  0%{
    letter-spacing: 10px;
    text-indent: 10px;
  }
  40%{
    letter-spacing: 40px;
    text-indent: 40px;    
  }

  80%{
    letter-spacing: 10px;
    text-indent: 10px;    
  }
  
  
  100%{
    letter-spacing: 10px;
    text-indent: 10px;    
  }
  
}

@media (max-width: 760px) {
  body {
    width: 100%;
    margin: 16px 0;
  }

  div {
    letter-spacing: 0.02em;
    text-indent: 0;
    font-size: clamp(14px, 4vw, 18px);
  }

  @keyframes gradient {
    0%,
    80%,
    100% {
      letter-spacing: 0.02em;
      text-indent: 0;
    }

    40% {
      letter-spacing: 0.1em;
      text-indent: 0;
    }
  }
}