/* @-moz-keyframes noise {
  0% {
    background-position: -48px -73px;
  }
  10% {
    background-position: 99px -58px;
  }
  20% {
    background-position: -68px 91px;
  }
  30% {
    background-position: -96px 44px;
  }
  40% {
    background-position: 86px -78px;
  }
  50% {
    background-position: -65px 27px;
  }
  60% {
    background-position: -94px 84px;
  }
  70% {
    background-position: 23px 68px;
  }
  80% {
    background-position: -51px -10px;
  }
  90% {
    background-position: -63px 67px;
  }
}
@-webkit-keyframes noise {
  0% {
    background-position: -54px -50px;
  }
  10% {
    background-position: 7px -20px;
  }
  20% {
    background-position: 2px 37px;
  }
  30% {
    background-position: 28px 82px;
  }
  40% {
    background-position: 44px 91px;
  }
  50% {
    background-position: -95px 87px;
  }
  60% {
    background-position: -97px -11px;
  }
  70% {
    background-position: 42px -30px;
  }
  80% {
    background-position: -31px 41px;
  }
  90% {
    background-position: 91px 20px;
  }
}
@keyframes noise {
  0% {
    background-position: -83px 92px;
  }
  10% {
    background-position: 14px -16px;
  }
  20% {
    background-position: 13px -57px;
  }
  30% {
    background-position: 83px 60px;
  }
  40% {
    background-position: 36px 87px;
  }
  50% {
    background-position: 56px -42px;
  }
  60% {
    background-position: -45px 14px;
  }
  70% {
    background-position: -69px 40px;
  }
  80% {
    background-position: 51px 34px;
  }
  90% {
    background-position: 85px 20px;
  }
} */



.background-404 {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  font-weight: 100;
  letter-spacing: 0.3em;
  background-image: url('/img/noise.png');
  text-shadow: 2px 0 1px #f6050a, -2px 0 1px #1cf2f2;
  -moz-animation: noise 0.3s infinite;
  -webkit-animation: noise 0.3s infinite;
  animation: noise 0.3s infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.glitch {
  color: white;
  font-size: 160px;
  position: relative;
  margin: 0 auto;
}

.glitch.small-text {
  font-size: 30px;
}

@keyframes noise-anim {
  0% {
    clip-path: inset(58% 0 11% 0);
  }
  5% {
    clip-path: inset(81% 0 6% 0);
  }
  10% {
    clip-path: inset(98% 0 3% 0);
  }
  15% {
    clip-path: inset(43% 0 16% 0);
  }
  20% {
    clip-path: inset(45% 0 32% 0);
  }
  25% {
    clip-path: inset(82% 0 15% 0);
  }
  30% {
    clip-path: inset(20% 0 33% 0);
  }
  35% {
    clip-path: inset(50% 0 44% 0);
  }
  40% {
    clip-path: inset(89% 0 8% 0);
  }
  45% {
    clip-path: inset(29% 0 60% 0);
  }
  50% {
    clip-path: inset(97% 0 2% 0);
  }
  55% {
    clip-path: inset(29% 0 42% 0);
  }
  60% {
    clip-path: inset(25% 0 67% 0);
  }
  65% {
    clip-path: inset(4% 0 87% 0);
  }
  70% {
    clip-path: inset(15% 0 70% 0);
  }
  75% {
    clip-path: inset(67% 0 23% 0);
  }
  80% {
    clip-path: inset(38% 0 31% 0);
  }
  85% {
    clip-path: inset(59% 0 29% 0);
  }
  90% {
    clip-path: inset(34% 0 39% 0);
  }
  95% {
    clip-path: inset(65% 0 23% 0);
  }
  100% {
    clip-path: inset(28% 0 73% 0);
  }
}
.glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  text-shadow: -1px 0 red;
  top: 0;
  color: white;
  background: url('/img/noise.png');
  overflow: hidden;
  animation: noise-anim 2s infinite linear alternate-reverse;
  width: 100%;
}

@keyframes noise-anim-2 {
  0% {
    clip-path: inset(27% 0 37% 0);
  }
  5% {
    clip-path: inset(62% 0 30% 0);
  }
  10% {
    clip-path: inset(77% 0 21% 0);
  }
  15% {
    clip-path: inset(13% 0 35% 0);
  }
  20% {
    clip-path: inset(38% 0 2% 0);
  }
  25% {
    clip-path: inset(55% 0 43% 0);
  }
  30% {
    clip-path: inset(34% 0 26% 0);
  }
  35% {
    clip-path: inset(16% 0 60% 0);
  }
  40% {
    clip-path: inset(51% 0 35% 0);
  }
  45% {
    clip-path: inset(46% 0 54% 0);
  }
  50% {
    clip-path: inset(17% 0 31% 0);
  }
  55% {
    clip-path: inset(77% 0 17% 0);
  }
  60% {
    clip-path: inset(26% 0 46% 0);
  }
  65% {
    clip-path: inset(78% 0 18% 0);
  }
  70% {
    clip-path: inset(87% 0 12% 0);
  }
  75% {
    clip-path: inset(41% 0 41% 0);
  }
  80% {
    clip-path: inset(57% 0 4% 0);
  }
  85% {
    clip-path: inset(10% 0 90% 0);
  }
  90% {
    clip-path: inset(17% 0 13% 0);
  }
  95% {
    clip-path: inset(39% 0 24% 0);
  }
  100% {
    clip-path: inset(22% 0 9% 0);
  }
}
.glitch::before {
  content: attr(data-text);
  position: absolute;
  left: -2px;
  text-shadow: 1px 0 blue;
  top: 0;
  color: white;
  background: url('/img/noise.png');
  overflow: hidden;
  animation: noise-anim-2 15s infinite linear alternate-reverse;
}