/* H2 Glitch Effect */
@import url('https://fonts.googleapis.com/css?family=Fira+Mono:400');

h2 {
  position: relative;
  font-size: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: var(--accent-color);
  border-bottom: 1px solid var(--accent-color);
  padding-bottom: 0.5rem;
  transition: color var(--transition-time), border-color var(--transition-time);
  /* Keeping the site's current font */
  font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
}

h2.glitching {
  animation: glitch 0.5s linear infinite;
}

@keyframes glitch{
  2%,64%{
    transform: translate(2px,0) skew(0deg);
  }
  4%,60%{
    transform: translate(-2px,0) skew(0deg);
  }
  62%{
    transform: translate(0,0) skew(5deg);
  }
}

h2.glitching:before,
h2.glitching:after{
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: inherit;
}

h2.glitching:before{
  animation: glitchTop 0.5s linear infinite;
  clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  text-shadow: 1px 0 var(--glitch-shadow-1);
}

@keyframes glitchTop{
  2%,64%{
    transform: translate(2px,-2px);
  }
  4%,60%{
    transform: translate(-2px,2px);
  }
  62%{
    transform: translate(13px,-1px) skew(-13deg);
  }
}

h2.glitching:after{
  animation: glitchBotom 0.75s linear infinite;
  clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
  text-shadow: -1px 0 var(--glitch-shadow-2);
}

@keyframes glitchBotom{
  2%,64%{
    transform: translate(-2px,0);
  }
  4%,60%{
    transform: translate(-2px,0);
  }
  62%{
    transform: translate(-22px,5px) skew(21deg);
  }
}