:root {
	--duration: 5s;
	--delay: 10s;
  --steps: 5;
  --iter: infinite;
}
body {
  font-family: "Roboto", monospace;
  margin: 0;
}

.glitch {
  background: #000 no-repeat center;
  background-size: 0;
  height: 100vh;
  position: relative;
  overflow: hidden;
  z-index: 10;
}
.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 var(--duration) linear var(--iter) alternate both;
  content: "";
}
@keyframes glitch-before {
  0% {
    clip-path: polygon(0% 25.2242602226%, 100% 25.2242602226%, 100% 27.2860505638%, 0% 27.2860505638%);
    transform: translate(2.9106599413%, 2.4708613238%);
  }
  2% {
    clip-path: polygon(0% 12.6509320253%, 100% 12.6509320253%, 100% 14.6797348682%, 0% 14.6797348682%);
    transform: translate(3.6150332236%, 0.8188958449%);
  }
  4% {
    clip-path: polygon(0% 60.847301534%, 100% 60.847301534%, 100% 62.9659909466%, 0% 62.9659909466%);
    transform: translate(12.8543864149%, 1.7885198756%);
  }
  6% {
    clip-path: polygon(0% 88.5850117523%, 100% 88.5850117523%, 100% 91.7224001531%, 0% 91.7224001531%);
    transform: translate(25.9874937562%, -1.5643747151%);
  }
  8% {
    clip-path: polygon(0% 75.887859481%, 100% 75.887859481%, 100% 81.7938906207%, 0% 81.7938906207%);
    transform: translate(-7.5650383675%, 0.1428856959%);
  }
  10% {
    clip-path: polygon(0% 15.2128221601%, 100% 15.2128221601%, 100% 21.7190670229%, 0% 21.7190670229%);
    transform: translate(-37.1975636789%, -2.4040123436%);
  }
  12% {
    clip-path: polygon(0% 45.6518256478%, 100% 45.6518256478%, 100% 50.2934993281%, 0% 50.2934993281%);
    transform: translate(17.7454411434%, 0.6524446565%);
  }
  14% {
    clip-path: polygon(0% 60.3300336182%, 100% 60.3300336182%, 100% 69.1601493493%, 0% 69.1601493493%);
    transform: translate(25.8409181079%, 0.9202007276%);
  }
  16% {
    clip-path: polygon(0% 70.6641237163%, 100% 70.6641237163%, 100% 73.3098963593%, 0% 73.3098963593%);
    transform: translate(32.3664379217%, -0.8723392475%);
  }
  18% {
    clip-path: polygon(0% 87.0028059262%, 100% 87.0028059262%, 100% 88.6036633475%, 0% 88.6036633475%);
    transform: translate(-27.8583454823%, 2.4295358631%);
  }
  20%, 100% {
    clip-path: none;
    transform: none;
  }
} 
.glitch::after {
  animation: glitch-after var(--duration) linear var(--iter) alternate both;
  content: "";
}
@keyframes glitch-after {
  0% {
    clip-path: polygon(0% 31.7182975813%, 100% 31.7182975813%, 100% 39.3152024448%, 0% 39.3152024448%);
    transform: translate(-0.9872854764%, 0.7742472758%);
  }
  2% {
    clip-path: polygon(0% 64.0703497442%, 100% 64.0703497442%, 100% 67.0197601074%, 0% 67.0197601074%);
    transform: translate(26.7582829642%, -1.991576569%);
  }
  4% {
    clip-path: polygon(0% 58.3937760779%, 100% 58.3937760779%, 100% 64.1678873613%, 0% 64.1678873613%);
    transform: translate(-23.9314453772%, -0.6874102903%);
  }
  6% {
    clip-path: polygon(0% 9.8119867907%, 100% 9.8119867907%, 100% 19.656841102%, 0% 19.656841102%);
    transform: translate(6.5549226302%, 1.3981364131%);
  }
  8% {
    clip-path: polygon(0% 71.4571444393%, 100% 71.4571444393%, 100% 72.4773672738%, 0% 72.4773672738%);
    transform: translate(-27.0030509579%, -2.3839079287%);
  }
  10% {
    clip-path: polygon(0% 29.2629486051%, 100% 29.2629486051%, 100% 32.4224738545%, 0% 32.4224738545%);
    transform: translate(31.1649566115%, 1.0353341229%);
  }
  12% {
    clip-path: polygon(0% 72.6778392125%, 100% 72.6778392125%, 100% 79.8194099582%, 0% 79.8194099582%);
    transform: translate(-0.7699001763%, 1.468911227%);
  }
  14% {
    clip-path: polygon(0% 61.510553186%, 100% 61.510553186%, 100% 62.5352020391%, 0% 62.5352020391%);
    transform: translate(-23.3221949969%, -0.2474127553%);
  }
  16% {
    clip-path: polygon(0% 15.2274737889%, 100% 15.2274737889%, 100% 21.5230790031%, 0% 21.5230790031%);
    transform: translate(-17.1620086991%, -1.2803334604%);
  }
  18% {
    clip-path: polygon(0% 24.6015345028%, 100% 24.6015345028%, 100% 30.783404509%, 0% 30.783404509%);
    transform: translate(10.1211019972%, -1.9474135728%);
  }
  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 var(--duration) steps(var(--steps), jump-end) var(--delay) var(--iter) alternate both;
}
@keyframes rgb-shift-r {
  0% {
    transform: translate(-1.2554278376%, 0.2412714085%);
  }
  2% {
    transform: translate(-1.7844654924%, -0.395026485%);
  }
  4% {
    transform: translate(-0.8010514459%, 0.242916573%);
  }
  6% {
    transform: translate(1.5813527547%, 0.1276777963%);
  }
  8% {
    transform: translate(-0.1374115%, 0.1518532565%);
  }
  10% {
    transform: translate(1.3011188557%, -0.2352080092%);
  }
  12% {
    transform: translate(1.8178460092%, 0.3455656096%);
  }
  14% {
    transform: translate(-0.5289590619%, 0.1157938372%);
  }
  16% {
    transform: translate(0.1924406585%, -0.1155815778%);
  }
  18% {
    transform: translate(0.9227973618%, 0.3027696707%);
  }
  20%, 100% {
    transform: none;
  }
}
}
.glitch .r::before {
  background: #f00;
}
.glitch .g {
  animation: rgb-shift-g var(--duration) steps(var(--steps), jump-end) var(--delay) var(--iter) alternate both;
}
@keyframes rgb-shift-g {
  0% {
    transform: translate(0.1968239168%, -0.4293755063%);
  }
  2% {
    transform: translate(1.535965675%, 0.2148712014%);
  }
  4% {
    transform: translate(-1.2430966399%, 0.3579092459%);
  }
  6% {
    transform: translate(1.1100669743%, -0.4142489389%);
  }
  8% {
    transform: translate(-1.0649614759%, -0.2408288212%);
  }
  10% {
    transform: translate(1.6151526548%, -0.4768985953%);
  }
  12% {
    transform: translate(-0.8744098344%, -0.0997201001%);
  }
  14% {
    transform: translate(1.4061045489%, -0.0750078171%);
  }
  16% {
    transform: translate(-1.646736317%, 0.1754612731%);
  }
  18% {
    transform: translate(1.5199372083%, 0.4769879243%);
  }
  20%, 100% {
    transform: none;
  }
}
}
.glitch .g::before {
  background: #0f0;
}
.glitch .b {
  animation: rgb-shift-b var(--duration) steps(var(--steps), jump-end) var(--delay) var(--iter) alternate both;
}
@keyframes rgb-shift-b {
  0% {
    transform: translate(1.1438070598%, 0.2921311876%);
  }
  2% {
    transform: translate(-1.76733396%, 0.044162668%);
  }
  4% {
    transform: translate(1.3486081732%, -0.2110741891%);
  }
  6% {
    transform: translate(1.0192934587%, -0.2081631708%);
  }
  8% {
    transform: translate(1.2672011155%, -0.0797027423%);
  }
  10% {
    transform: translate(-0.0405851455%, 0.4628859612%);
  }
  12% {
    transform: translate(-1.3419482093%, 0.4747709212%);
  }
  14% {
    transform: translate(-0.2721463498%, 0.2242225625%);
  }
  16% {
    transform: translate(-0.5241691889%, -0.4284272244%);
  }
  18% {
    transform: translate(1.5166595824%, -0.3703569386%);
  }
  20%, 100% {
    transform: none;
  }
}
.glitch .b::before {
  background: #00f;
}