/*

  Glitchy Text from https://css-tricks.com/glitch-effect-text-images-svg/

  (TEXT) PARAMS
  =================
  1. Namespace
  2. Intensity
  3. Text color
  4. Background color (flat)
  5. Highlight #1 color
  6. Highlight #2 color
  7. Width (px)
  8. Height (px)
*/


.content {
  color: #FFF;
  font-family: 'Oswald', sans-serif;
  font-size: 100px;

  position: relative;
}
@keyframes glitch-anim-1 {
  0% {
    clip: rect(26px, 1084px, 8px, 0);
  }
  5.8823529412% {
    clip: rect(97px, 1084px, 97px, 0);
  }
  11.7647058824% {
    clip: rect(55px, 1084px, 105px, 0);
  }
  17.6470588235% {
    clip: rect(76px, 1084px, 65px, 0);
  }
  23.5294117647% {
    clip: rect(53px, 1084px, 80px, 0);
  }
  29.4117647059% {
    clip: rect(108px, 1084px, 92px, 0);
  }
  35.2941176471% {
    clip: rect(51px, 1084px, 52px, 0);
  }
  41.1764705882% {
    clip: rect(86px, 1084px, 111px, 0);
  }
  47.0588235294% {
    clip: rect(91px, 1084px, 48px, 0);
  }
  52.9411764706% {
    clip: rect(6px, 1084px, 26px, 0);
  }
  58.8235294118% {
    clip: rect(98px, 1084px, 9px, 0);
  }
  64.7058823529% {
    clip: rect(43px, 1084px, 67px, 0);
  }
  70.5882352941% {
    clip: rect(108px, 1084px, 79px, 0);
  }
  76.4705882353% {
    clip: rect(34px, 1084px, 102px, 0);
  }
  82.3529411765% {
    clip: rect(69px, 1084px, 68px, 0);
  }
  88.2352941176% {
    clip: rect(101px, 1084px, 105px, 0);
  }
  94.1176470588% {
    clip: rect(7px, 1084px, 4px, 0);
  }
  100% {
    clip: rect(55px, 1084px, 57px, 0);
  }
}
@keyframes glitch-anim-2 {
  0% {
    clip: rect(46px, 1084px, 68px, 0);
  }
  5.8823529412% {
    clip: rect(115px, 1084px, 79px, 0);
  }
  11.7647058824% {
    clip: rect(66px, 1084px, 48px, 0);
  }
  17.6470588235% {
    clip: rect(69px, 1084px, 107px, 0);
  }
  23.5294117647% {
    clip: rect(49px, 1084px, 99px, 0);
  }
  29.4117647059% {
    clip: rect(88px, 1084px, 71px, 0);
  }
  35.2941176471% {
    clip: rect(41px, 1084px, 107px, 0);
  }
  41.1764705882% {
    clip: rect(2px, 1084px, 29px, 0);
  }
  47.0588235294% {
    clip: rect(88px, 1084px, 77px, 0);
  }
  52.9411764706% {
    clip: rect(69px, 1084px, 50px, 0);
  }
  58.8235294118% {
    clip: rect(90px, 1084px, 60px, 0);
  }
  64.7058823529% {
    clip: rect(98px, 1084px, 112px, 0);
  }
  70.5882352941% {
    clip: rect(40px, 1084px, 46px, 0);
  }
  76.4705882353% {
    clip: rect(32px, 1084px, 47px, 0);
  }
  82.3529411765% {
    clip: rect(62px, 1084px, 48px, 0);
  }
  88.2352941176% {
    clip: rect(60px, 1084px, 5px, 0);
  }
  94.1176470588% {
    clip: rect(24px, 1084px, 76px, 0);
  }
  100% {
    clip: rect(115px, 1084px, 74px, 0);
  }
}
.content:before, .content:after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: black;
  clip: rect(0, 0, 0, 0);
}
.content:after {
  left: 2px;
  text-shadow: -1px 0 red;
  animation: glitch-anim-1 2s infinite linear alternate-reverse;
}
.content:before {
  left: -2px;
  text-shadow: 2px 0 blue;
  animation: glitch-anim-2 3s infinite linear alternate-reverse;
}