/* */

.glitch {
  position: relative;
  margin: 0 auto; }

.glitch::before,
.glitch::after {
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate-reverse;
  overflow: hidden;
  position: absolute;
  top: 0;
  clip: rect(0, 900px, 0, 0);
  content: attr(data-text); }

.glitch::after {
  animation-name: glitch-animation;
  animation-duration: 3.44s;
  left: 4px;
  text-shadow: 2.6px 0px 1px rgba(151, 91, 222, 0.6), -1.9px 0px 1px rgba(152, 222, 91, 0.3);
   }

.glitch::before {
  animation-name: glitch-animation-2;
  animation-duration: 0.78s;
  left: -4px;
  text-shadow: 2px 0px 0px rgba(151, 91, 222, 0.3), -1.5px 0px 0px rgba(152, 222, 91, 0.7);
 }

@keyframes glitch-animation {
  0% {
    clip: rect(42px, 9999px, 44px, 0); }
  5% {
    clip: rect(12px, 9999px, 59px, 0); }
  10% {
    clip: rect(48px, 9999px, 29px, 0); }
  15.0% {
    clip: rect(42px, 9999px, 73px, 0); }
  20% {
    clip: rect(63px, 9999px, 27px, 0); }
  25% {
    clip: rect(34px, 9999px, 55px, 0); }
  30.0% {
    clip: rect(86px, 9999px, 73px, 0); }
  35% {
    clip: rect(20px, 9999px, 20px, 0); }
  40% {
    clip: rect(26px, 9999px, 60px, 0); }
  45% {
    clip: rect(25px, 9999px, 66px, 0); }
  50% {
    clip: rect(57px, 9999px, 98px, 0); }
  55.0% {
    clip: rect(5px, 9999px, 46px, 0); }
  60.0% {
    clip: rect(82px, 9999px, 31px, 0); }
  65% {
    clip: rect(54px, 9999px, 27px, 0); }
  70% {
    clip: rect(28px, 9999px, 99px, 0); }
  75% {
    clip: rect(45px, 9999px, 69px, 0); }
  80% {
    clip: rect(23px, 9999px, 85px, 0); }
  85.0% {
    clip: rect(54px, 9999px, 84px, 0); }
  90% {
    clip: rect(45px, 9999px, 47px, 0); }
  95% {
    clip: rect(37px, 9999px, 20px, 0); }
  100% {
    clip: rect(4px, 9999px, 91px, 0); } }

@keyframes glitch-animation-2 {
  0% {
    clip: rect(65px, 9999px, 100px, 0); }
  5% {
    clip: rect(52px, 9999px, 74px, 0); }
  10% {
    clip: rect(79px, 9999px, 85px, 0); }
  15.0% {
    clip: rect(75px, 9999px, 5px, 0); }
  20% {
    clip: rect(67px, 9999px, 61px, 0); }
  25% {
    clip: rect(14px, 9999px, 79px, 0); }
  30.0% {
    clip: rect(1px, 9999px, 66px, 0); }
  35% {
    clip: rect(86px, 9999px, 30px, 0); }
  40% {
    clip: rect(23px, 9999px, 98px, 0); }
  45% {
    clip: rect(85px, 9999px, 72px, 0); }
  50% {
    clip: rect(71px, 9999px, 75px, 0); }
  55.0% {
    clip: rect(2px, 9999px, 48px, 0); }
  60.0% {
    clip: rect(30px, 9999px, 16px, 0); }
  65% {
    clip: rect(59px, 9999px, 50px, 0); }
  70% {
    clip: rect(41px, 9999px, 62px, 0); }
  75% {
    clip: rect(2px, 9999px, 82px, 0); }
  80% {
    clip: rect(47px, 9999px, 73px, 0); }
  85.0% {
    clip: rect(3px, 9999px, 27px, 0); }
  90% {
    clip: rect(26px, 9999px, 55px, 0); }
  95% {
    clip: rect(42px, 9999px, 97px, 0); }
  100% {
    clip: rect(38px, 9999px, 49px, 0); } }


.glitch2 { position: relative; margin: 0 auto;} .glitch2::before, .glitch2::after { animation-iteration-count: infinite; animation-timing-function: linear; animation-direction: alternate-reverse; overflow: hidden; position: absolute; top: 0; clip: rect(0, 900px, 0, 0); content: attr(data-text); } .glitch2::after { animation-name: glitch-animation-2; animation-duration: 3.12s; left: 15px; text-shadow: 2.6px 0px 1px rgba(151, 91, 222, 0.6), -1.9px 0px 1px rgba(152, 222, 91, 0.3); } .glitch2::before { animation-name: glitch-animation; animation-duration: 5.78s; left: 7px; text-shadow: 2px 0px 0px rgba(151, 91, 222, 0.3), -1.5px 0px 0px rgba(152, 222, 91, 0.7); }

.glitch3 {
  position: relative;
  margin: 0 auto;}

.glitch3::before,
.glitch3::after {
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate-reverse;
  overflow: hidden;
  position: absolute;
  top: 0;
  clip: rect(0, 900px, 0, 0);
  content: attr(data-text); }

.glitch3::after {
  animation-name: glitch-animation-2;
  animation-duration: 0.8s;
  left: 15px;
  text-shadow: 2.6px 0px 1px rgba(151, 91, 222, 0.6), -1.9px 0px 1px rgba(152, 222, 91, 0.3);
  }

.glitch3::before {
  animation-name: glitch-animation;
  animation-duration: 1s;
  left: 2px;
  text-shadow: 2px 0px 0px rgba(151, 91, 222, 0.3), -1.5px 0px 0px rgba(152, 222, 91, 0.7);
 }



.glitch0 {
  position: relative;
  margin: 0 auto;}

.glitch0::before,
.glitch0::after {
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate-reverse;
  overflow: hidden;
  position: absolute;
  top: 0;
  clip: rect(0, 900px, 0, 0);
  content: "failed to access server      -      an exception  has  occured" }

.glitch0::after {
  animation-name: glitch-animation-2;
  animation-duration: 0.8s;
  left: -5px;
  text-shadow: 2.6px 0px 1px rgba(251, 91, 2, 0.3), -1.9px 0px 1px rgba(15, 22, 9, 0.2);
  }

.glitch0::before {
  animation-name: glitch-animation;
  animation-duration: 1.42s;
  left: 2px;
  text-shadow: 2px 0px 0px rgba(51, 91, 222, 0.2), -1.5px 0px 0px rgba(152, 22, 91, 0.4);
 }

.glitchp {
  position: relative;
  margin: 0 auto;}

.glitchp::before,
.glitchp::after {
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate-reverse;
  overflow: hidden;
  position: absolute;
  top: 0;
  clip: rect(0, 900px, 0, 0);
  content: "!|" }

.glitchp::after {
  animation-name: glitch-animation-2;
  animation-duration: 0.8s;
  left: -5px;
  text-shadow: 2.6px 0px 1px rgba(251, 91, 2, 0.3), -1.9px 0px 1px rgba(15, 22, 9, 0.2);
  }

.glitchp::before {
  animation-name: glitch-animation;
  animation-duration: 1.42s;
  left: 2px;
  text-shadow: 2px 0px 0px rgba(51, 91, 222, 0.2), -1.5px 0px 0px rgba(152, 22, 91, 0.4);
 }


.tracking {
	text-shadow: 4px 0px 0px rgba(151, 91, 222, 0.3), -6px 0px 0px rgba(152, 222, 91, 0.1);
}

.trackingwide {
	text-shadow: 15px 0px 0px rgba(151, 91, 222, 0.3), -18px 0px 0px rgba(152, 222, 91, 0.2);
}


.trackfx1 { 
	   opacity:0.9;
		 -webkit-animation-name: trackanim;
	    -webkit-animation-duration: 0.15s;
		-webkit-animation-iteration-count: infinite;
	    -webkit-animation-timing-function: linear;
		}

.trackfx2 { 
	   opacity:0.95;
		 -webkit-animation-name: trackanim;
	    -webkit-animation-duration: 0.2s;
		-webkit-animation-iteration-count: infinite;
	    -webkit-animation-timing-function: linear;
		}

.trackfx3 { 
		 -webkit-animation-name: trackanim;
	    -webkit-animation-duration: 0.5s;
		-webkit-animation-iteration-count: infinite;
	    -webkit-animation-timing-function: ease-in-out;
		}

@-webkit-keyframes trackanim {
	from { 
			text-shadow:   4px 0px 0px rgba(151, 91, 222, 0.6), -3px 0px 3px rgba(152, 222, 91, 0.8);
		  
	}
	to {
			text-shadow:  0.6px 0px 3px rgba(151, 91, 222, 0.8), -4px 0px 0px rgba(152, 222, 91, 0.6);
	}
		to {
			text-shadow:  3px 0px 0px rgba(151, 91, 222, 0.4), -2px 0px 0px rgba(152, 222, 91, 0.7);
	}
}


@-webkit-keyframes flicker {
	from {
		opacity: 0.9;
	}
	4% {
		opacity: 1;
	}
	6% {
		opacity: 0.94;
	}
	8% {
		opacity: 1;
	}
	10% {
		opacity: 0.8;
	}
	11% {
		opacity: 1;
	}
	12% {
		opacity: 0.85;
	}
	14% {
		opacity: 0.93;
	}
	16% {
		opacity: 1;
	}
	17% {
		opacity: 0.9;
	}
	19% {
		opacity: 0.75;
	}
	20% {
		opacity: 1;
	}
	24% {
		opacity: 1;
	}
	26% {
		opacity: 0.78;
	}
	28% {
		opacity: 0.9;
	}
	38% {
		opacity: 0.7;
	}
	40% {
		opacity: 0.95;
	}
	42% {
		opacity: 1;
	}
	44% {
		opacity: 0.9;
	}
	46% {
		opacity: 1;
	}
	56% {
		opacity: 1;
	}
	58% {
		opacity: 0.84;
	}
	60% {
		opacity: 1;
	}
	68% {
		opacity: 1;
	}
	70% {
		opacity: 0.76; 
	}
	72% {
		opacity: 1;
	}
	93% {
		opacity: 1;
	}
	95% {
		opacity: 0.9; 
	}
	97% {
		opacity: 0.84;
	}
	to {
		opacity: 1;
	}
}


@-webkit-keyframes stutter {
	from {
		opacity: 1;
	}
	4% {
		opacity: 1;
	}
	6% {
		opacity: 1;
	}
	8% {
		opacity: 0.9;
	}
	10% {
		opacity: 1;
	}
	11% {
		opacity: 1;
	}
	12% {
		opacity: 1;
	}
	14% {
		opacity: 1;
	}
	16% {
		opacity: 1;
	}
	17% {
		opacity: 1;
	}
	19% {
		opacity: 0.8;
	}
	20% {
		opacity: 1;
	}
	24% {
		opacity: 1;
	}
	26% {
		opacity: 1;
	}
	28% {
		opacity: 1;
	}
	38% {
		opacity: 1;
	}
	40% {
		opacity: 0.9;
	}
	42% {
		opacity: 1;
	}
	44% {
		opacity: 1;
	}
	46% {
		opacity: 1;
	}
	56% {
		opacity: 1;
	}
	58% {
		opacity: 1;
	}
	60% {
		opacity: 1;
	}
	68% {
		opacity: 1;
	}
	70% {
		opacity: 1; 
	}
	72% {
		opacity: 1;
	}
	93% {
		opacity: 1;
	}
	95% {
		opacity: 1; 
	}
	97% {
		opacity: 1;
	}
	to {
		opacity: 0.9;
	}
}
		
.vfx1 { opacity: 0.8; 
		 -webkit-animation-name: flicker;
	 -webkit-animation-duration: 1.8s;
		-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
		}

.vfx2 { opacity: 0.9; 
		 -webkit-animation-name: flicker;
    	 -webkit-animation-duration: 0.4s;
		-webkit-animation-iteration-count: infinite;
    	-webkit-animation-timing-function: linear;
		}

.vfx3 { opacity: 1; 
		 -webkit-animation-name: flicker;
	    -webkit-animation-duration: 0.6s;
		-webkit-animation-iteration-count: infinite;
	    -webkit-animation-timing-function: ease-in-out;
		}

.fx1 { opacity: 0.9; 
		 -webkit-animation-name: stutter;
	     -webkit-animation-duration: 0.6s;
		-webkit-animation-iteration-count: infinite;
	    -webkit-animation-timing-function: linear;
		}
.fx2 { opacity: 1; 
		 -webkit-animation-name: flicker;
	     -webkit-animation-duration: 0.05s;
		-webkit-animation-iteration-count: infinite;
	    -webkit-animation-timing-function: linear;
		}

#bye {
    -moz-animation: cssAnimation 0s ease-in 1.4s forwards; 
    
    -webkit-animation: cssAnimation 0s ease-in 1.4s forwards;
    
    -o-animation: cssAnimation 0s ease-in 1.4s forwards;
    
    animation: cssAnimation 0s ease-in 1.4s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes cssAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
}
@-webkit-keyframes cssAnimation {
    to {
        width:0;
        height:0;
        visibility:hidden;
    }
}
		
/* */
@font-face {
  font-family: 'VCR-OSD-Mono';
    src:  url('/VCR-OSD-Mono.ttf.woff') format('woff'),
    url('/VCR-OSD-Mono.ttf.svg#VCR-OSD-Mono') format('svg'),
    url('/VCR-OSD-Mono.ttf.eot'),
    url('/VCR-OSD-Mono.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
}



.hero {
  font-size: clamp(40px, 10vw, 100px);
  line-height: 1;
  display: inline-block;
  color: #fff;
  z-index: 2;
  letter-spacing: 10px;

  /* Bright things in dark environments usually cast that light, giving off a glow */
  filter: drop-shadow(0 1px 3px);
}

.demo {
  height: 100px;
  background: #fff;
}

.layers {
  position: relative;
}

.layers::before,
.layers::after {
  content: attr(data-text);
  position: absolute;
  width: 101.1%;
  z-index: -1;
}

.layers::before {
  top: 2px;
  left: 5px;
  color: #e0287d;
}

.layers::after {
  top: -1px;
  left: -8px;
  color: #1bc7fb;
}

.single-path {
  clip-path: polygon(
    0% 12%,
    53% 12%,
    53% 26%,
    25% 26%,
    25% 86%,
    31% 86%,
    31% 0%,
    53% 0%,
    53% 84%,
    92% 84%,
    92% 82%,
    70% 82%,
    70% 29%,
    78% 29%,
    78% 65%,
    69% 65%,
    69% 66%,
    77% 66%,
    77% 45%,
    85% 45%,
    85% 26%,
    97% 26%,
    97% 28%,
    84% 28%,
    84% 34%,
    54% 34%,
    54% 89%,
    30% 89%,
    30% 58%,
    83% 58%,
    83% 5%,
    68% 5%,
    68% 36%,
    62% 36%,
    62% 1%,
    12% 1%,
    12% 34%,
    60% 34%,
    60% 57%,
    98% 57%,
    98% 83%,
    1% 83%,
    1% 53%,
    91% 53%,
    91% 84%,
    8% 84%,
    8% 83%,
    4% 83%
  );
}

.paths {
  animation: paths 5s step-end infinite;
}

@keyframes paths {
  0% {
    clip-path: polygon(
      0% 43%,
      83% 43%,
      83% 22%,
      23% 22%,
      23% 24%,
      91% 24%,
      91% 26%,
      18% 26%,
      18% 83%,
      29% 83%,
      29% 17%,
      41% 17%,
      41% 39%,
      18% 39%,
      18% 82%,
      54% 82%,
      54% 88%,
      19% 88%,
      19% 4%,
      39% 4%,
      39% 14%,
      76% 14%,
      76% 52%,
      23% 52%,
      23% 35%,
      19% 35%,
      19% 8%,
      36% 8%,
      36% 31%,
      73% 31%,
      73% 16%,
      1% 16%,
      1% 56%,
      50% 56%,
      50% 8%
    );
  }

  5% {
    clip-path: polygon(
      0% 29%,
      44% 29%,
      44% 83%,
      94% 83%,
      94% 56%,
      11% 56%,
      11% 64%,
      94% 64%,
      94% 70%,
      88% 70%,
      88% 32%,
      18% 32%,
      18% 96%,
      10% 96%,
      10% 62%,
      9% 62%,
      9% 84%,
      68% 84%,
      68% 50%,
      52% 50%,
      52% 55%,
      35% 55%,
      35% 87%,
      25% 87%,
      25% 39%,
      15% 39%,
      15% 88%,
      52% 88%
    );
  }

  30% {
    clip-path: polygon(
      0% 53%,
      93% 53%,
      93% 62%,
      68% 62%,
      68% 37%,
      97% 37%,
      97% 89%,
      13% 89%,
      13% 45%,
      51% 45%,
      51% 88%,
      17% 88%,
      17% 54%,
      81% 54%,
      81% 75%,
      79% 75%,
      79% 76%,
      38% 76%,
      38% 28%,
      61% 28%,
      61% 12%,
      55% 12%,
      55% 62%,
      68% 62%,
      68% 51%,
      0% 51%,
      0% 92%,
      63% 92%,
      63% 4%,
      65% 4%
    );
  }

  45% {
    clip-path: polygon(
      0% 33%,
      2% 33%,
      2% 69%,
      58% 69%,
      58% 94%,
      55% 94%,
      55% 25%,
      33% 25%,
      33% 85%,
      16% 85%,
      16% 19%,
      5% 19%,
      5% 20%,
      79% 20%,
      79% 96%,
      93% 96%,
      93% 50%,
      5% 50%,
      5% 74%,
      55% 74%,
      55% 57%,
      96% 57%,
      96% 59%,
      87% 59%,
      87% 65%,
      82% 65%,
      82% 39%,
      63% 39%,
      63% 92%,
      4% 92%,
      4% 36%,
      24% 36%,
      24% 70%,
      1% 70%,
      1% 43%,
      15% 43%,
      15% 28%,
      23% 28%,
      23% 71%,
      90% 71%,
      90% 86%,
      97% 86%,
      97% 1%,
      60% 1%,
      60% 67%,
      71% 67%,
      71% 91%,
      17% 91%,
      17% 14%,
      39% 14%,
      39% 30%,
      58% 30%,
      58% 11%,
      52% 11%,
      52% 83%,
      68% 83%
    );
  }

  76% {
    clip-path: polygon(
      0% 26%,
      15% 26%,
      15% 73%,
      72% 73%,
      72% 70%,
      77% 70%,
      77% 75%,
      8% 75%,
      8% 42%,
      4% 42%,
      4% 61%,
      17% 61%,
      17% 12%,
      26% 12%,
      26% 63%,
      73% 63%,
      73% 43%,
      90% 43%,
      90% 67%,
      50% 67%,
      50% 41%,
      42% 41%,
      42% 46%,
      50% 46%,
      50% 84%,
      96% 84%,
      96% 78%,
      49% 78%,
      49% 25%,
      63% 25%,
      63% 14%
    );
  }

  90% {
    clip-path: polygon(
      0% 41%,
      13% 41%,
      13% 6%,
      87% 6%,
      87% 93%,
      10% 93%,
      10% 13%,
      89% 13%,
      89% 6%,
      3% 6%,
      3% 8%,
      16% 8%,
      16% 79%,
      0% 79%,
      0% 99%,
      92% 99%,
      92% 90%,
      5% 90%,
      5% 60%,
      0% 60%,
      0% 48%,
      89% 48%,
      89% 13%,
      80% 13%,
      80% 43%,
      95% 43%,
      95% 19%,
      80% 19%,
      80% 85%,
      38% 85%,
      38% 62%
    );
  }

  1%,
  7%,
  33%,
  47%,
  78%,
  93% {
    clip-path: none;
  }
}

.movement {
  /* Normally this position would be absolute & on the layers, set to relative here so we can see it on the div */
  position: relative;
  animation: movement 8s step-end infinite;
}

@keyframes movement {
  0% {
    top: 0px;
    left: -6px;
  }

  15% {
    top: 1px;
    left: 2px;
  }
  
  35% {
    top: -4px;
    left: -5px;
  }

  50% {
    top: 0px;
    left: 8px;
  }

  65% {
    top: 3px;
    left: -3px;
  }

  100% {
    top: 0px;
    left: -5px;
  }
}

.opacity {
  animation: opacity 5s step-end infinite;
}

@keyframes opacity {
  0% {
    opacity: 0.1;
  }

  5% {
    opacity: 0.3;
  }

  30% {
    opacity: 0.4;
  }

  45% {
    opacity: 0.1;
  }

  76% {
    opacity: 0.2;
  }

  90% {
    opacity: 0.3;
  }

  1%,
  7%,
  33%,
  47%,
  78%,
  93% {
    opacity: 0;
  }
}

.font {
  animation: font 7s step-end infinite;
}

@keyframes font {
  0% {
    font-weight: 100;
    color: #e0287d;
    filter: blur(3px);
  }

  20% {
    font-weight: 200;
    color: #fff;
    filter: blur(1px);
  }

  50% {
    font-weight: 300;
    color: #1bc7fb;
    filter: blur(2px);
  }

  60% {
    font-weight: 100;
    color: #fff;
    filter: blur(2px);
  }

  90% {
    font-weight: 500;
    color: #e0287d;
    filter: blur(6px);
  }
}

.bigglitch span {
  animation: paths 2s step-end infinite;
}


.bigglitch::before {
  animation: paths 2s step-end infinite, opacity 5s step-end infinite,
    font 3s step-end infinite, movement 10s step-end infinite;
}

.bigglitch::after {
  animation: paths 2s step-end infinite, opacity 5s step-end infinite,
    font 4s step-end infinite, movement 8s step-end infinite;
}


.altglitch span {
  animation: paths 3s step-end infinite;
}


.altglitch::before {
  animation: paths 3s step-end infinite, opacity 5.5s step-end infinite,
    font 3s step-end infinite, movement 9s step-end infinite;
}

.altglitch::after {
  animation: paths 3s step-end infinite, opacity 5.5s step-end infinite,
    font 4s step-end infinite, movement 7s step-end infinite;
}


.hero-container {
  position: relative;
  padding: 200px 0;
  text-align: center;
}

  .button-container {
    position: relative;
    width: 300px; /* adjust as needed */
    height: 50px; /* adjust as needed */
  }

  .load-more {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #007BFF; /* blue */
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    z-index: 1; /* behind error button */
  }

  .error-button {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: red;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    z-index: 2; /* on top */
    text-align: center;
    line-height: 50px; /* vertically center text */
  }