@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker:wght@400&family=Courier+Prime:wght@400;700&display=swap');

    .zine-font {
      font-family: 'Permanent Marker', cursive;
    }

    .mono-font {
      font-family: 'Courier Prime', monospace;
    }

    .punk-border {
      border: 3px solid #000;
      box-shadow: 4px 4px 0px #000;
    }

    .zine-bg {
      background: linear-gradient(45deg, transparent 40%, rgba(0, 0, 0, 0.1) 41%, rgba(0, 0, 0, 0.1) 59%, transparent 60%), linear-gradient(-45deg, transparent 40%, rgba(0, 0, 0, 0.05) 41%, rgba(0, 0, 0, 0.05) 59%, transparent 60%);
    }

    .nav-active {
      background-color: #F97316;
      color: #000;
    }

    .nav-active-arrow {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-top: 8px solid #F97316;
    }

    h1 {
      font-size: large;
    }

    .corrupt {
      display: none;
    }

    .default {
      display: block;
    }

    /* CORRUPT VERSION */

    @keyframes noise-anim {
      0% {
        clip: rect(66px, 9999px, 90px, 0);
      }

      5% {
        clip: rect(35px, 9999px, 66px, 0);
      }

      10% {
        clip: rect(29px, 9999px, 28px, 0);
      }

      15% {
        clip: rect(51px, 9999px, 36px, 0);
      }

      20% {
        clip: rect(14px, 9999px, 55px, 0);
      }

      25% {
        clip: rect(66px, 9999px, 94px, 0);
      }

      30% {
        clip: rect(86px, 9999px, 18px, 0);
      }

      35% {
        clip: rect(71px, 9999px, 92px, 0);
      }

      40% {
        clip: rect(68px, 9999px, 95px, 0);
      }

      45% {
        clip: rect(59px, 9999px, 14px, 0);
      }

      50% {
        clip: rect(35px, 9999px, 98px, 0);
      }

      55% {
        clip: rect(80px, 9999px, 40px, 0);
      }

      60% {
        clip: rect(22px, 9999px, 19px, 0);
      }

      65% {
        clip: rect(20px, 9999px, 1px, 0);
      }

      70% {
        clip: rect(21px, 9999px, 18px, 0);
      }

      75% {
        clip: rect(7px, 9999px, 72px, 0);
      }

      80% {
        clip: rect(74px, 9999px, 64px, 0);
      }

      85% {
        clip: rect(99px, 9999px, 22px, 0);
      }

      90% {
        clip: rect(17px, 9999px, 94px, 0);
      }

      95% {
        clip: rect(52px, 9999px, 11px, 0);
      }

      100% {
        clip: rect(85px, 9999px, 26px, 0);
      }
    }

    .glitch-noise:after {
      content: attr(data-text);
      position: absolute;
      left: 2px;
      text-shadow: -1px 0 red;
      top: 0;
      color: white;
      overflow: hidden;
      clip: rect(0, 900px, 0, 0);
      animation: noise-anim 2s infinite linear alternate-reverse;
    }

    @keyframes noise-anim-2 {
      0% {
        clip: rect(29px, 9999px, 89px, 0);
      }

      5% {
        clip: rect(80px, 9999px, 57px, 0);
      }

      10% {
        clip: rect(77px, 9999px, 90px, 0);
      }

      15% {
        clip: rect(73px, 9999px, 45px, 0);
      }

      20% {
        clip: rect(59px, 9999px, 42px, 0);
      }

      25% {
        clip: rect(33px, 9999px, 36px, 0);
      }

      30% {
        clip: rect(81px, 9999px, 100px, 0);
      }

      35% {
        clip: rect(10px, 9999px, 30px, 0);
      }

      40% {
        clip: rect(42px, 9999px, 58px, 0);
      }

      45% {
        clip: rect(82px, 9999px, 25px, 0);
      }

      50% {
        clip: rect(68px, 9999px, 6px, 0);
      }

      55% {
        clip: rect(30px, 9999px, 49px, 0);
      }

      60% {
        clip: rect(39px, 9999px, 64px, 0);
      }

      65% {
        clip: rect(42px, 9999px, 38px, 0);
      }

      70% {
        clip: rect(60px, 9999px, 79px, 0);
      }

      75% {
        clip: rect(92px, 9999px, 97px, 0);
      }

      80% {
        clip: rect(54px, 9999px, 16px, 0);
      }

      85% {
        clip: rect(82px, 9999px, 76px, 0);
      }

      90% {
        clip: rect(29px, 9999px, 25px, 0);
      }

      95% {
        clip: rect(80px, 9999px, 35px, 0);
      }

      100% {
        clip: rect(77px, 9999px, 18px, 0);
      }
    }

    .glitch-noise:before {
      content: attr(data-text);
      position: absolute;
      left: -2px;
      text-shadow: 1px 0 blue;
      top: 0;
      color: white;
      overflow: hidden;
      clip: rect(0, 900px, 0, 0);
      animation: noise-anim-2 3s infinite linear alternate-reverse;
    }

    .glitch-layering {
      position: relative;
    }

    .glitch-layer-top {
      position: absolute;
      z-index: 3;
    }

    .glitch-layer-middle {
      position: absolute;
      z-index: 2;
    }

    .glitch-layer-bottom {
      position: absolute;
      z-index: -1;
    }