body {
  margin: 0;
}

.front {
position:absolute;
height:100%;
top:10px;
background: inherit;
}


.glitch {
  background: #000 no-repeat center;
  background-size: cover;
  height: 1300px;
  position: relative;
  overflow: hidden;
  background-attachment: fixed;
}
.glitch::before, .glitch::after,
.glitch .channel {
  background: inherit;
  background-size: cover;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.glitch::before {
  animation: glitch-before 3s linear infinite alternate both;
  content: "";
}
@keyframes glitch-before {
  0% {
    clip-path: polygon(0% 79.3491703862%, 100% 79.3491703862%, 100% 81.0645186686%, 0% 81.0645186686%);
    transform: translate(5.517166478%, -0.2954047953%);
  }
  2% {
    clip-path: polygon(0% 22.1959107144%, 100% 22.1959107144%, 100% 30.3060742603%, 0% 30.3060742603%);
    transform: translate(-0.5327237362%, 0.2310223589%);
  }
  4% {
    clip-path: polygon(0% 78.7048967909%, 100% 78.7048967909%, 100% 88.3239690049%, 0% 88.3239690049%);
    transform: translate(-4.5474145578%, -0.2977202004%);
  }
  6% {
    clip-path: polygon(0% 34.3678779102%, 100% 34.3678779102%, 100% 39.0902231558%, 0% 39.0902231558%);
    transform: translate(1.3742191632%, 0.0244943473%);
  }
  8% {
    clip-path: polygon(0% 34.1375625495%, 100% 34.1375625495%, 100% 37.3294228235%, 0% 37.3294228235%);
    transform: translate(-3.415035083%, 0.0916370006%);
  }
  10% {
    clip-path: polygon(0% 78.6824405991%, 100% 78.6824405991%, 100% 87.321254468%, 0% 87.321254468%);
    transform: translate(7.3583563808%, 0.4321677398%);
  }
  12% {
    clip-path: polygon(0% 59.6023825141%, 100% 59.6023825141%, 100% 68.4902427988%, 0% 68.4902427988%);
    transform: translate(-7.9642462039%, -0.1440891345%);
  }
  14% {
    clip-path: polygon(0% 6.6247160181%, 100% 6.6247160181%, 100% 16.1161667424%, 0% 16.1161667424%);
    transform: translate(-4.359995176%, -0.4788974753%);
  }
  16% {
    clip-path: polygon(0% 66.589470598%, 100% 66.589470598%, 100% 69.8402215831%, 0% 69.8402215831%);
    transform: translate(-6.4341928633%, 0.0419330391%);
  }
  18% {
    clip-path: polygon(0% 32.9714277491%, 100% 32.9714277491%, 100% 39.7767939099%, 0% 39.7767939099%);
    transform: translate(-2.3146979651%, -0.407304894%);
  }
  20%, 100% {
    clip-path: none;
    transform: none;
  }
}
.glitch::after {
  animation: glitch-after 3s linear infinite alternate both;
  content: "";
}
@keyframes glitch-after {
  0% {
    clip-path: polygon(0% 45.8372999911%, 100% 45.8372999911%, 100% 48.5540325138%, 0% 48.5540325138%);
    transform: translate(-0.6871399305%, -0.4529251708%);
  }
  2% {
    clip-path: polygon(0% 53.7785040661%, 100% 53.7785040661%, 100% 54.9434852014%, 0% 54.9434852014%);
    transform: translate(2.6396679167%, 0.2164093377%);
  }
  4% {
    clip-path: polygon(0% 42.8486150997%, 100% 42.8486150997%, 100% 47.8345555259%, 0% 47.8345555259%);
    transform: translate(-1.2370025761%, -0.2406743322%);
  }
  6% {
    clip-path: polygon(0% 89.0572338331%, 100% 89.0572338331%, 100% 94.1996758369%, 0% 94.1996758369%);
    transform: translate(2.4540084584%, 0.4034933103%);
  }
  8% {
    clip-path: polygon(0% 36.5999453174%, 100% 36.5999453174%, 100% 41.7474933746%, 0% 41.7474933746%);
    transform: translate(5.5655684839%, 0.499303022%);
  }
  10% {
    clip-path: polygon(0% 87.784257954%, 100% 87.784257954%, 100% 96.0917827653%, 0% 96.0917827653%);
    transform: translate(0.3987153771%, -0.0780327144%);
  }
  12% {
    clip-path: polygon(0% 28.3205408705%, 100% 28.3205408705%, 100% 37.8961690667%, 0% 37.8961690667%);
    transform: translate(-7.449682864%, 0.4248195998%);
  }
  14% {
    clip-path: polygon(0% 55.854013538%, 100% 55.854013538%, 100% 56.9304331757%, 0% 56.9304331757%);
    transform: translate(-5.7031446077%, -0.3837665043%);
  }
  16% {
    clip-path: polygon(0% 24.30079743%, 100% 24.30079743%, 100% 26.7464549216%, 0% 26.7464549216%);
    transform: translate(3.5134846286%, -0.3654895186%);
  }
  18% {
    clip-path: polygon(0% 68.368728278%, 100% 68.368728278%, 100% 70.8925231848%, 0% 70.8925231848%);
    transform: translate(-5.0466389176%, -0.4073606638%);
  }
  20%, 100% {
    clip-path: none;
    transform: none;
  }
}
.glitch .channel {
  mix-blend-mode: screen;
}
.glitch .channel::before {
  bottom: 0;
  content: "";
  display: block;
  mix-blend-mode: multiply;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
.glitch .r {
  animation: rgb-shift-r 3s steps(1, jump-end) infinite alternate both;
}
@keyframes rgb-shift-r {
  0% {
    transform: translate(1.8029846967%, 0.250561917%);
  }
  2% {
    transform: translate(-1.2014546388%, 0.3836752256%);
  }
  4% {
    transform: translate(0.7032768654%, 0.4087407177%);
  }
  6% {
    transform: translate(1.1660001562%, 0.41034398%);
  }
  8% {
    transform: translate(-0.392732968%, 0.1339857791%);
  }
  10% {
    transform: translate(-0.9440276492%, -0.2408109142%);
  }
  12% {
    transform: translate(-0.95318591%, 0.2899648895%);
  }
  14% {
    transform: translate(-0.0734410518%, 0.243971474%);
  }
  16% {
    transform: translate(0.5846893197%, 0.2633486802%);
  }
  18% {
    transform: translate(1.8811281294%, 0.1481796051%);
  }
  20%, 100% {
    transform: none;
  }
}
.glitch .r::before {
  background: #f00;
}
.glitch .g {
  animation: rgb-shift-g 3s steps(1, jump-end) infinite alternate both;
}
@keyframes rgb-shift-g {
  0% {
    transform: translate(-0.5131392948%, -0.480882579%);
  }
  2% {
    transform: translate(1.132910526%, -0.4438871433%);
  }
  4% {
    transform: translate(0.1356402905%, 0.4791958911%);
  }
  6% {
    transform: translate(-1.6599991773%, -0.2808721254%);
  }
  8% {
    transform: translate(-0.9870970602%, -0.4496017153%);
  }
  10% {
    transform: translate(-1.5683024682%, 0.4107409708%);
  }
  12% {
    transform: translate(1.7083044645%, -0.4515697918%);
  }
  14% {
    transform: translate(-1.5264792452%, -0.3325159285%);
  }
  16% {
    transform: translate(0.5620816189%, -0.0478154445%);
  }
  18% {
    transform: translate(-0.6392805443%, -0.0196457663%);
  }
  20%, 100% {
    transform: none;
  }
}
.glitch .g::before {
  background: #0f0;
}
.glitch .b {
  animation: rgb-shift-b 3s steps(1, jump-end) infinite alternate both;
}
@keyframes rgb-shift-b {
  0% {
    transform: translate(-1.9581463541%, -0.332323073%);
  }
  2% {
    transform: translate(0.8810823264%, 0.3056788877%);
  }
  4% {
    transform: translate(-0.6355566356%, 0.3997058269%);
  }
  6% {
    transform: translate(1.3454820646%, -0.1668825871%);
  }
  8% {
    transform: translate(-1.0016094507%, 0.1421634922%);
  }
  10% {
    transform: translate(-0.7359233882%, 0.4722058831%);
  }
  12% {
    transform: translate(0.2539216136%, -0.4666293412%);
  }
  14% {
    transform: translate(-1.4882718473%, 0.0571218314%);
  }
  16% {
    transform: translate(-1.4153239518%, -0.1919494992%);
  }
  18% {
    transform: translate(-1.5279357629%, 0.0106655147%);
  }
  20%, 100% {
    transform: none;
  }
}
.glitch .b::before {
  background: #00f;
}