@import "https://fonts.googleapis.com/css?family=Orbitron";
/*

	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)
*/
html, body {
  background-color: #000;
  text-align: center;
  padding: 10%;
}

.content {
  color: #62C85B;
  font-family: 'Orbitron', sans-serif;
  font-size: 100px;
  font-weight: bold;
  color: #61F5A1;
  position: relative;
}
@keyframes glitch-anim-1 {
  0% {
    clip: rect(60px, 1084px, 74px, 0);
  }
  5.8823529412% {
    clip: rect(80px, 1084px, 6px, 0);
  }
  11.7647058824% {
    clip: rect(24px, 1084px, 53px, 0);
  }
  17.6470588235% {
    clip: rect(48px, 1084px, 40px, 0);
  }
  23.5294117647% {
    clip: rect(5px, 1084px, 95px, 0);
  }
  29.4117647059% {
    clip: rect(93px, 1084px, 45px, 0);
  }
  35.2941176471% {
    clip: rect(106px, 1084px, 17px, 0);
  }
  41.1764705882% {
    clip: rect(57px, 1084px, 101px, 0);
  }
  47.0588235294% {
    clip: rect(42px, 1084px, 72px, 0);
  }
  52.9411764706% {
    clip: rect(41px, 1084px, 74px, 0);
  }
  58.8235294118% {
    clip: rect(52px, 1084px, 27px, 0);
  }
  64.7058823529% {
    clip: rect(85px, 1084px, 62px, 0);
  }
  70.5882352941% {
    clip: rect(106px, 1084px, 110px, 0);
  }
  76.4705882353% {
    clip: rect(93px, 1084px, 42px, 0);
  }
  82.3529411765% {
    clip: rect(63px, 1084px, 50px, 0);
  }
  88.2352941176% {
    clip: rect(73px, 1084px, 77px, 0);
  }
  94.1176470588% {
    clip: rect(61px, 1084px, 43px, 0);
  }
  100% {
    clip: rect(48px, 1084px, 95px, 0);
  }
}
@keyframes glitch-anim-2 {
  0% {
    clip: rect(101px, 1084px, 82px, 0);
  }
  5.8823529412% {
    clip: rect(69px, 1084px, 54px, 0);
  }
  11.7647058824% {
    clip: rect(38px, 1084px, 30px, 0);
  }
  17.6470588235% {
    clip: rect(55px, 1084px, 86px, 0);
  }
  23.5294117647% {
    clip: rect(111px, 1084px, 61px, 0);
  }
  29.4117647059% {
    clip: rect(103px, 1084px, 48px, 0);
  }
  35.2941176471% {
    clip: rect(69px, 1084px, 2px, 0);
  }
  41.1764705882% {
    clip: rect(15px, 1084px, 101px, 0);
  }
  47.0588235294% {
    clip: rect(54px, 1084px, 15px, 0);
  }
  52.9411764706% {
    clip: rect(11px, 1084px, 82px, 0);
  }
  58.8235294118% {
    clip: rect(61px, 1084px, 103px, 0);
  }
  64.7058823529% {
    clip: rect(60px, 1084px, 39px, 0);
  }
  70.5882352941% {
    clip: rect(50px, 1084px, 28px, 0);
  }
  76.4705882353% {
    clip: rect(55px, 1084px, 80px, 0);
  }
  82.3529411765% {
    clip: rect(41px, 1084px, 106px, 0);
  }
  88.2352941176% {
    clip: rect(68px, 1084px, 8px, 0);
  }
  94.1176470588% {
    clip: rect(54px, 1084px, 23px, 0);
  }
  100% {
    clip: rect(34px, 1084px, 73px, 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;
}