@import url(https://fonts.googleapis.com/css?family=Abril+Fatface|Roboto:400,400italic,500,500italic);

@-webkit-keyframes wiggle {
    0% { -webkit-transform: skewX(24deg); } 
    10% { -webkit-transform: skewX(-8deg); }
    20% { -webkit-transform: skewX(55deg); }
    30% { -webkit-transform: skewX(-90deg); }
    40% { -webkit-transform: skewX(29deg); }
    50% { -webkit-transform: skewX(-90deg); }
    60% { -webkit-transform: skewX(3deg); }
    70% { -webkit-transform: skewX(-2deg); }
    80% { -webkit-transform: skewX(1deg); }
    90% { -webkit-transform: skewX(10deg); }
    100% { -webkit-transform: skewX(0deg); }
}


.glitchtext {
  position:relative;
  text-align:center;
  cursor:pointer;
  color:rgba(255,255,255,0.95);
  text-shadow:2px 2px var(--magenta),
             -2px -2px var(--cyan),
             -1px 2px var(--yellow);
}

.glitchtext:hover {
  -webkit-animation: wiggle 0.2s 2;
  /*transition:all ease-out 0.1s;*/
  text-shadow:30px 13px var(--magenta),
             -38px -4px var(--cyan),
             -2px -4px var(--yellow);

}

.glitchtext.animate {
  -webkit-animation: wiggle 0.2s 2;
  animation: wiggle 0.2s 2;

  text-shadow:30px 13px var(--magenta),
             -38px -4px var(--cyan),
             -2px -4px var(--yellow);
}