body {
  font-family:'Times New Roman', Times, serif;
}

.glitch {
  margin: 10% auto 0 auto;
  display: table;
  font-size: 7vw;
  font-weight: 700;
  text-transform: uppercase;
  position: relative;

  text-shadow: 0.05em 0 0 #556FB5,
    -0.025em -0.05em 0 #AEDDCD,
    0.025em 0.05em 0 #E4508F;

  animation: glitch 900ms infinite;
}

.glitch span {
  position: absolute;
  top: 0;
  left: 0;
}

@keyframes glitch {
  0% {
    text-shadow: 0.05em 0 0 #556FB5,
      -0.05em -0.025em 0 #AEDDCD,
      -0.025em 0.05em 0 #E4508F;
  }
  10% {
    text-shadow: 0.05em 0 0 #556FB5,
      -0.05em -0.025em 0 #AEDDCD,
      -0.025em 0.05em 0 #E4508F;
  }
  20% {
    text-shadow: -0.05em -0.025em 0 #556FB5,
      0.025em 0.025em 0 #AEDDCD,
      -0.05em -0.05em 0 #E4508F;
  }
  40% {
    text-shadow: -0.05em -0.025em 0 #556FB5,
      0.025em 0.025em 0 #AEDDCD,
      -0.05em -0.05em 0 #E4508F;
  }
  50% {
    text-shadow: 0.025em 0.05em 0 #556FB5,
      0.05em 0 0 #AEDDCD, 0 -0.05em 0 #E4508F;
  }
  60% {
    text-shadow: 0.025em 0.05em 0 #556FB5,
      0.05em 0 0 #AEDDCD, 0 -0.05em 0 #E4508F;
  }
  70% {
    text-shadow: -0.025em 0 0 #556FB5,
      -0.025em -0.025em 0 #AEDDCD,
      -0.025em -0.05em 0 #E4508F;
  }
  90% {
    text-shadow: -0.025em 0 0 #556FB5,
      -0.025em -0.025em 0 #AEDDCD,
      -0.025em -0.05em 0 #E4508F;
  }
  100% {
    text-shadow: 0.05em 0 0 #556FB5,
      -0.05em -0.025em 0 #AEDDCD,
      -0.025em 0.05em 0 #E4508F;
  }
}

.glitch span{
  clip-path: polygon(0 80%, 100% 20%, 100% 100%, 0 100%);
  transform: translate(0.0125em, 0.025em);
  opacity: 0.8;
}


@media screen and (max-width: 480px){
.glitch {
  margin: 50% auto 0 auto;
}

}

@media screen and (min-width: 480px) and (max-width: 768px){
  .glitch {
    margin: 30% auto 0 auto;
 }
}