.glitch {
    background: #000 no-repeat center;
    background-size: 0;
    height: 100vh;
    position: relative;
    overflow: hidden;
  }
  .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 1s linear infinite alternate both;
    content: "";
  }
  @keyframes glitch-before {
    0% {
      clip-path: polygon(0% 45.5493615837%, 100% 45.5493615837%, 100% 46.6980000482%, 0% 46.6980000482%);
      transform: translate(7.2119340212%, -0.2038141803%);
    }
    2% {
      clip-path: polygon(0% 49.5223567997%, 100% 49.5223567997%, 100% 56.7191978243%, 0% 56.7191978243%);
      transform: translate(-5.1901015012%, 0.132429986%);
    }
    4% {
      clip-path: polygon(0% 42.6234872157%, 100% 42.6234872157%, 100% 47.1579742987%, 0% 47.1579742987%);
      transform: translate(-6.0403499385%, 0.1167771696%);
    }
    6% {
      clip-path: polygon(0% 69.3628615493%, 100% 69.3628615493%, 100% 73.6048690627%, 0% 73.6048690627%);
      transform: translate(4.4794585616%, -0.2336876543%);
    }
    8% {
      clip-path: polygon(0% 40.3204673293%, 100% 40.3204673293%, 100% 48.5724083842%, 0% 48.5724083842%);
      transform: translate(-2.7510739636%, -0.0929174472%);
    }
    10% {
      clip-path: polygon(0% 29.8728608009%, 100% 29.8728608009%, 100% 34.9262057415%, 0% 34.9262057415%);
      transform: translate(6.5026489476%, 0.4399831797%);
    }
    12% {
      clip-path: polygon(0% 50.7268082427%, 100% 50.7268082427%, 100% 52.8071513709%, 0% 52.8071513709%);
      transform: translate(1.8077660956%, 0.4372276579%);
    }
    14% {
      clip-path: polygon(0% 34.1435559233%, 100% 34.1435559233%, 100% 38.6464081657%, 0% 38.6464081657%);
      transform: translate(-6.4296205371%, -0.0192984335%);
    }
    16% {
      clip-path: polygon(0% 33.940501324%, 100% 33.940501324%, 100% 36.5029451725%, 0% 36.5029451725%);
      transform: translate(-1.3591839766%, 0.2229655977%);
    }
    18% {
      clip-path: polygon(0% 17.4701165877%, 100% 17.4701165877%, 100% 19.3283757996%, 0% 19.3283757996%);
      transform: translate(4.0270078906%, -0.3679543763%);
    }
    20%, 100% {
      clip-path: none;
      transform: none;
    }
  }
  .glitch::after {
    animation: glitch-after 643ms linear infinite alternate both;
    content: "";
  }
  @keyframes glitch-after {
    0% {
      clip-path: polygon(0% 80.0227128726%, 100% 80.0227128726%, 100% 85.8429395635%, 0% 85.8429395635%);
      transform: translate(7.0139534081%, 0.4322214832%);
    }
    2% {
      clip-path: polygon(0% 40.2566251768%, 100% 40.2566251768%, 100% 47.3500184714%, 0% 47.3500184714%);
      transform: translate(3.0880077983%, -0.261662587%);
    }
    4% {
      clip-path: polygon(0% 22.4680463207%, 100% 22.4680463207%, 100% 32.3503702938%, 0% 32.3503702938%);
      transform: translate(2.4548385444%, 0.4903699935%);
    }
    6% {
      clip-path: polygon(0% 66.6728808114%, 100% 66.6728808114%, 100% 71.1280124864%, 0% 71.1280124864%);
      transform: translate(-1.3121991985%, -0.3800481446%);
    }
    8% {
      clip-path: polygon(0% 17.2751240866%, 100% 17.2751240866%, 100% 20.1392551718%, 0% 20.1392551718%);
      transform: translate(-7.3412112096%, 0.2583870877%);
    }
    10% {
      clip-path: polygon(0% 3.5099146327%, 100% 3.5099146327%, 100% 12.4718559303%, 0% 12.4718559303%);
      transform: translate(-0.1917293711%, -0.4268006626%);
    }
    12% {
      clip-path: polygon(0% 53.1712100136%, 100% 53.1712100136%, 100% 61.4724986908%, 0% 61.4724986908%);
      transform: translate(0.8500820774%, -0.0553112981%);
    }
    14% {
      clip-path: polygon(0% 30.3917312441%, 100% 30.3917312441%, 100% 39.9862164611%, 0% 39.9862164611%);
      transform: translate(-5.9526815208%, -0.1435612964%);
    }
    16% {
      clip-path: polygon(0% 38.3787426981%, 100% 38.3787426981%, 100% 44.56403492%, 0% 44.56403492%);
      transform: translate(7.7998905375%, -0.3448825739%);
    }
    18% {
      clip-path: polygon(0% 4.7718626925%, 100% 4.7718626925%, 100% 14.5908970719%, 0% 14.5908970719%);
      transform: translate(1.8470390646%, 0.3926613945%);
    }
    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(0.5128212618%, -0.1956092407%);
    }
    2% {
      transform: translate(-1.992532765%, -0.4886539805%);
    }
    4% {
      transform: translate(-1.4042572291%, 0.0428057528%);
    }
    6% {
      transform: translate(-0.3667884985%, 0.4903541952%);
    }
    8% {
      transform: translate(-1.3698893835%, 0.2741549108%);
    }
    10% {
      transform: translate(-1.3341327815%, 0.1033244686%);
    }
    12% {
      transform: translate(-0.2224231936%, -0.4481930849%);
    }
    14% {
      transform: translate(-0.0179314569%, 0.4021795492%);
    }
    16% {
      transform: translate(-0.616086124%, 0.374630139%);
    }
    18% {
      transform: translate(1.0322357517%, 0.4031034684%);
    }
    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(-1.5078161161%, 0.0748228188%);
    }
    2% {
      transform: translate(-0.1419358352%, 0.1462345424%);
    }
    4% {
      transform: translate(-1.0620432207%, -0.1434140493%);
    }
    6% {
      transform: translate(-1.2535885413%, -0.454133809%);
    }
    8% {
      transform: translate(-0.2051246936%, 0.2369934049%);
    }
    10% {
      transform: translate(1.8944393234%, 0.0420995724%);
    }
    12% {
      transform: translate(-0.7382306396%, -0.0720663408%);
    }
    14% {
      transform: translate(-0.1088627497%, 0.195421058%);
    }
    16% {
      transform: translate(-1.7878128167%, -0.0561609501%);
    }
    18% {
      transform: translate(-1.4901297751%, 0.2018490893%);
    }
    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.3346382648%, 0.4860733365%);
    }
    2% {
      transform: translate(0.7561996456%, 0.0568172645%);
    }
    4% {
      transform: translate(-0.5582116197%, 0.1414915877%);
    }
    6% {
      transform: translate(-0.2941710552%, 0.1022789866%);
    }
    8% {
      transform: translate(0.9641095599%, 0.2429881811%);
    }
    10% {
      transform: translate(1.3400272546%, -0.0170231982%);
    }
    12% {
      transform: translate(-0.0127120888%, -0.209697329%);
    }
    14% {
      transform: translate(1.7289723677%, -0.2123084155%);
    }
    16% {
      transform: translate(0.2915321831%, -0.4074389948%);
    }
    18% {
      transform: translate(-0.5529976608%, -0.1574604378%);
    }
    20%, 100% {
      transform: none;
    }
  }
  .glitch .b::before {
    background: #00f;
  }



  /*---text---*/

:root {
  --f-size: 15;
  --f-unit: 1vmin;
  --f: calc(var(--f-size) * var(--f-unit));
  --bg: #181717;
}

*, *::after, *::before {
  box-sizing: border-box;
}

p {
  flex: 1;
  line-height: 1;
  margin: auto;
  color: #ffffff;
  text-align: center;
  transform: scaleX(var(--scale, 1));
  animation: glitch-p 11s infinite alternate;
}
p::before, p::after {
  --top: 0;
  --left: 0;
  --v-height: 30%;
  --n-tenth: calc(var(--f-size) * .1 * var(--top));
  --t-cut: calc(var(--n-tenth) / var(--f-size) * 100%);
  --b-cut: calc(var(--t-cut) + var(--v-height));
  content: attr(data-text);
  position: absolute;
  width: 100%;
  left: 0;
  text-align: center;
  transform: translateX(calc(var(--left) * 100%));
  filter: drop-shadow(0 0 transparent);
  text-shadow: calc(var(--left) * -3em) 0 0.02em lime, calc(var(--left) * -6em) 0 0.02em #ff00e1;
  background-color: var(--bg);
  clip-path: polygon(0% var(--t-cut), 100% var(--t-cut), 100% var(--b-cut), 0% var(--b-cut));
}
p::before {
  animation: glitch-b 1.7s infinite alternate-reverse;
}
p::after {
  animation: glitch-a 3.1s infinite alternate;
}

@keyframes glitch-p {
  17% {
    --scale: .87;
  }
  31% {
    --scale: 1.1;
  }
  37% {
    --scale: 1.3;
  }
  47% {
    --scale: .91;
  }
  87% {
    --scale: 1;
  }
}
@keyframes glitch-a {
  10%, 30%, 50%, 70%, 90% {
    --top: 0;
    --left: 0;
  }
  0% {
    --v-height: 15%;
  }
  20% {
    --left: .005;
  }
  40% {
    --left: .01;
    --v-height: 20%;
    --top: 3;
  }
  60% {
    --left: .03;
    --v-height: 25%;
    --top: 6;
  }
  80% {
    --left: .07;
    --v-height: 5%;
    --top: 8;
  }
  100% {
    --left: .083;
    --v-height: 30%;
    --top: 1;
  }
}
@keyframes glitch-b {
  10%, 30%, 50%, 70%, 90% {
    --top: 0;
    --left: 0;
  }
  0% {
    --v-height: 15%;
    --top: 10;
  }
  20% {
    --left: -.005;
  }
  40% {
    --left: -.01;
    --v-height: 17%;
    --top: 3;
  }
  60% {
    --left: -.03;
    --v-height: 35%;
    --top: 6;
  }
  80% {
    --left: -.07;
    --v-height: 5%;
    --top: 8;
  }
  100% {
    --left: -.083;
    --v-height: 30%;
    --top: 1;
  }
}