responsive glitch and margin bottom of last section

Author: Isl0m

glitch.css

@@ -0,0 +1,215 @@
+:root {
+  --glitch-offset: 1px;
+}
+@media (min-width: 768px) {
+  :root {
+    --glitch-offset: 17px;
+  }
+}
+@media (min-width: 780px) {
+  :root {
+    --glitch-offset: 8px;
+  }
+}
+@media (min-width: 820px) {
+  :root {
+    --glitch-offset: 4px;
+  }
+}
+@media (min-width: 1024px) {
+  :root {
+    --glitch-offset: 75px;
+  }
+}
+@media (min-width: 1200px) {
+  :root {
+    --glitch-offset: 125px;
+  }
+}
+@media (min-width: 1440px) {
+  :root {
+    --glitch-offset: 212px;
+  }
+}
+
+.glitch:after,
+.glitch:before {
+  content: attr(data-text);
+  position: absolute;
+  top: 0;
+  color: #fff;
+  overflow: hidden;
+}
+
+.glitch:after {
+  left: var(--glitch-offset);
+  text-shadow: -1px 0 #ff1b1b;
+  animation: glitch1 2s infinite ease;
+}
+
+.glitch:before {
+  left: var(--glitch-offset);
+  text-shadow: 1px 0 #2124ff;
+  animation: glitch2 10s infinite ease;
+}
+
+@keyframes glitch1 {
+  0% {
+    clip-path: inset(65% 0 8% 0);
+  }
+  4% {
+    clip-path: inset(5% 0 70% 0);
+  }
+  8% {
+    clip-path: inset(60% 0 27% 0);
+  }
+  12% {
+    clip-path: inset(37% 0 18% 0);
+  }
+  16% {
+    clip-path: inset(42% 0 13% 0);
+  }
+  20% {
+    clip-path: inset(46% 0 9% 0);
+  }
+  24% {
+    clip-path: inset(34% 0 67% 0);
+  }
+  28% {
+    clip-path: inset(3% 0 26% 0);
+  }
+  32% {
+    clip-path: inset(2% 0 31% 0);
+  }
+  36% {
+    clip-path: inset(87% 0 2% 0);
+  }
+  40% {
+    clip-path: inset(15% 0 47% 0);
+  }
+  44% {
+    clip-path: inset(97% 0 2% 0);
+  }
+  48% {
+    clip-path: inset(48% 0 49% 0);
+  }
+  52% {
+    clip-path: inset(88% 0 11% 0);
+  }
+  56% {
+    clip-path: inset(31% 0 65% 0);
+  }
+  60% {
+    clip-path: inset(42% 0 58% 0);
+  }
+  64% {
+    clip-path: inset(17% 0 76% 0);
+  }
+  68% {
+    clip-path: inset(78% 0 6% 0);
+  }
+  72% {
+    clip-path: inset(1% 0 48% 0);
+  }
+  76% {
+    clip-path: inset(73% 0 1% 0);
+  }
+  80% {
+    clip-path: inset(80% 0 7% 0);
+  }
+  84% {
+    clip-path: inset(14% 0 81% 0);
+  }
+  88% {
+    clip-path: inset(83% 0 1% 0);
+  }
+  92% {
+    clip-path: inset(32% 0 60% 0);
+  }
+  96% {
+    clip-path: inset(86% 0 5% 0);
+  }
+  100% {
+    clip-path: inset(63% 0 17% 0);
+  }
+}
+@keyframes glitch2 {
+  0% {
+    clip-path: inset(9% 0 71% 0);
+  }
+  4% {
+    clip-path: inset(2% 0 33% 0);
+  }
+  8% {
+    clip-path: inset(75% 0 19% 0);
+  }
+  12% {
+    clip-path: inset(97% 0 3% 0);
+  }
+  16% {
+    clip-path: inset(22% 0 59% 0);
+  }
+  20% {
+    clip-path: inset(74% 0 8% 0);
+  }
+  24% {
+    clip-path: inset(65% 0 11% 0);
+  }
+  28% {
+    clip-path: inset(6% 0 54% 0);
+  }
+  32% {
+    clip-path: inset(2% 0 6% 0);
+  }
+  36% {
+    clip-path: inset(10% 0 57% 0);
+  }
+  40% {
+    clip-path: inset(21% 0 46% 0);
+  }
+  44% {
+    clip-path: inset(30% 0 9% 0);
+  }
+  48% {
+    clip-path: inset(25% 0 35% 0);
+  }
+  52% {
+    clip-path: inset(25% 0 35% 0);
+  }
+  56% {
+    clip-path: inset(14% 0 45% 0);
+  }
+  60% {
+    clip-path: inset(38% 0 15% 0);
+  }
+  64% {
+    clip-path: inset(5% 0 64% 0);
+  }
+  68% {
+    clip-path: inset(86% 0 9% 0);
+  }
+  72% {
+    clip-path: inset(17% 0 30% 0);
+  }
+  76% {
+    clip-path: inset(99% 0 2% 0);
+  }
+  80% {
+    clip-path: inset(20% 0 15% 0);
+  }
+  84% {
+    clip-path: inset(70% 0 30% 0);
+  }
+  88% {
+    clip-path: inset(36% 0 43% 0);
+  }
+  92% {
+    clip-path: inset(61% 0 33% 0);
+  }
+  96% {
+    clip-path: inset(50% 0 17% 0);
+  }
+  100% {
+    clip-path: inset(19% 0 47% 0);
+  }
+}