body {
  font-family: 'Source Sans Pro', sans-serif;
  background-color: #323133;
}
body:after {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 1000;
  background: repeating-linear-gradient(0deg, #111 0px, #111 1px, transparent 2px, transparent 5px);
  background-size: 100% 5px;
  -webkit-animation: lines 2s ease-out infinite;
          animation: lines 2s ease-out infinite;
  opacity: 0.3;
  mix-blend-mode: color-burn;
  pointer-events: none;
}
body .text, body .text > * {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
body .text > * {
  font-size: 40px;
  -webkit-animation: giggle 1s ease infinite;
          animation: giggle 1s ease infinite;
  mix-blend-mode: difference;
}
body .text .r {
  color: #f00;
  left: -0.5px;
}
body .text .g {
  color: #0f0;
  -webkit-animation-delay: -0.67s;
          animation-delay: -0.67s;
}
body .text .b {
  color: #00f;
  -webkit-animation-delay: -0.33s;
          animation-delay: -0.33s;
  left: 0.5px;
}

@-webkit-keyframes giggle {
  0%, 100% {
    -webkit-transform: translate(-50%, -50%) translateY(-2px);
            transform: translate(-50%, -50%) translateY(-2px);
  }
  50% {
    -webkit-transform: translate(-50%, -50%) translateY(2px);
            transform: translate(-50%, -50%) translateY(2px);
  }
}

@keyframes giggle {
  0%, 100% {
    -webkit-transform: translate(-50%, -50%) translateY(-2px);
            transform: translate(-50%, -50%) translateY(-2px);
  }
  50% {
    -webkit-transform: translate(-50%, -50%) translateY(2px);
            transform: translate(-50%, -50%) translateY(2px);
  }
}
@-webkit-keyframes lines {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 0px 25px;
  }
}
@keyframes lines {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 0px 25px;
  }
}
