@import url('https://fonts.googleapis.com/css?family=Bebas+Neue&display=swap');
 * {
	 padding: 0;
	 margin: 0;
	 box-sizing: border-box;
}
 html {
	 font-size: 6.25%;
}
 /* .container {
	 top: 0;
	 bottom: 0;
	 left: 0;
	 right: 0;
	 position: absolute;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 background-color: rgb(13 19 33);
} */
 .preorder-btn {
	 color: #00040e;
	 text-decoration: none;
	 position: relative;
	 z-index: 100;
	 padding: 30px 90px;
	 text-transform: uppercase;
	 letter-spacing: 2px;
	 font-size: 48rem;
	 font-family: 'Bebas Neue';
	 transition: 0.4s;
}
 .preorder-btn span {
	 position: relative;
}
 .preorder-btn span::before, .preorder-btn span::after {
	 top: 0;
	 bottom: 0;
	 left: 0;
	 right: 0;
	 visibility: hidden;
	 content: attr(data-text);
	 position: absolute;
	 background: #00040e;
	 animation-duration: 5s;
	 animation-timing-function: linear;
	 animation-iteration-count: infinite;
	 animation-direction: alternate-reverse;
}
 .preorder-btn span::before {
	 right: -5px;
	 text-shadow: 1px 0 #fc03e8;
	 animation-name: glitch1;
}
 .preorder-btn span::after {
	 left: -5px;
	 text-shadow: -1px 0 #0fc;
	 animation-name: glitch2;
}
 .preorder-btn::before {
	 top: 0;
	 bottom: 0;
	 left: 0;
	 right: 0;
	 content: '';
	 position: absolute;
	 z-index: -100;
	 border: 3px solid #00040e;
	 transform: skew(-20deg);
}
 .preorder-btn::after {
	 top: 0;
	 bottom: 0;
	 left: 0;
	 right: 0;
	 content: '';
	 position: absolute;
	 z-index: -200;
	 border: 3px solid #6bd0f2;
	 transform: skew(-20deg) translate(10px, -10px);
	 transition: 0.4s;
}
 .preorder-btn:hover {
	 color: #fff;
}
 .preorder-btn:hover span::before, .preorder-btn:hover span::after {
	 visibility: visible;
}
 .preorder-btn:hover::before {
	 background-color: #00040e;
}
 .preorder-btn:hover::after {
	 transform: skew(-20deg);
}
 @keyframes glitch1 {
	 0% {
		 clip-path: inset(56% 0 35% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 2% {
		 clip-path: inset(26% 0 11% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 4% {
		 clip-path: inset(66% 0 66% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 6% {
		 clip-path: inset(49% 0 11% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 8% {
		 clip-path: inset(30% 0 99% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 10% {
		 clip-path: inset(52% 0 63% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 12% {
		 clip-path: inset(42% 0 33% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 14% {
		 clip-path: inset(38% 0 41% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 16% {
		 clip-path: inset(67% 0 50% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 18% {
		 clip-path: inset(22% 0 9% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 20% {
		 clip-path: inset(91% 0 96% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 22% {
		 clip-path: inset(20% 0 60% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 24% {
		 clip-path: inset(41% 0 8% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 26% {
		 clip-path: inset(6% 0 30% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 28% {
		 clip-path: inset(12% 0 76% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 30% {
		 clip-path: inset(9% 0 19% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 32% {
		 clip-path: inset(69% 0 30% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 34% {
		 clip-path: inset(46% 0 70% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 36% {
		 clip-path: inset(100% 0 8% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 38% {
		 clip-path: inset(17% 0 42% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 40% {
		 clip-path: inset(100% 0 44% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 42% {
		 clip-path: inset(23% 0 91% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 44% {
		 clip-path: inset(57% 0 25% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 46% {
		 clip-path: inset(68% 0 4% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 48% {
		 clip-path: inset(24% 0 39% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 50% {
		 clip-path: inset(73% 0 18% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 52% {
		 clip-path: inset(3% 0 79% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 54% {
		 clip-path: inset(56% 0 94% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 56% {
		 clip-path: inset(75% 0 17% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 58% {
		 clip-path: inset(42% 0 2% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 60% {
		 clip-path: inset(99% 0 93% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 62% {
		 clip-path: inset(36% 0 23% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 64% {
		 clip-path: inset(13% 0 24% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 66% {
		 clip-path: inset(22% 0 30% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 68% {
		 clip-path: inset(62% 0 82% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 70% {
		 clip-path: inset(90% 0 3% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 72% {
		 clip-path: inset(13% 0 32% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 74% {
		 clip-path: inset(33% 0 78% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 76% {
		 clip-path: inset(94% 0 72% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 78% {
		 clip-path: inset(67% 0 2% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 80% {
		 clip-path: inset(85% 0 77% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 82% {
		 clip-path: inset(56% 0 42% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 84% {
		 clip-path: inset(19% 0 69% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 86% {
		 clip-path: inset(33% 0 99% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 88% {
		 clip-path: inset(90% 0 52% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 90% {
		 clip-path: inset(70% 0 7% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 92% {
		 clip-path: inset(9% 0 44% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 94% {
		 clip-path: inset(12% 0 11% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 96% {
		 clip-path: inset(44% 0 76% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 98% {
		 clip-path: inset(83% 0 12% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
	 100% {
		 clip-path: inset(52% 0 49% 0);
	}
	 50% {
		 transform: scaleY(1.5);
	}
}
 @keyframes glitch2 {
	 0% {
		 clip-path: inset(68% 0 1% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 2% {
		 clip-path: inset(71% 0 100% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 4% {
		 clip-path: inset(13% 0 68% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 6% {
		 clip-path: inset(34% 0 52% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 8% {
		 clip-path: inset(15% 0 50% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 10% {
		 clip-path: inset(89% 0 66% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 12% {
		 clip-path: inset(58% 0 27% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 14% {
		 clip-path: inset(68% 0 30% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 16% {
		 clip-path: inset(53% 0 4% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 18% {
		 clip-path: inset(59% 0 35% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 20% {
		 clip-path: inset(17% 0 45% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 22% {
		 clip-path: inset(13% 0 71% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 24% {
		 clip-path: inset(71% 0 6% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 26% {
		 clip-path: inset(52% 0 19% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 28% {
		 clip-path: inset(44% 0 96% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 30% {
		 clip-path: inset(73% 0 93% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 32% {
		 clip-path: inset(39% 0 4% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 34% {
		 clip-path: inset(88% 0 95% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 36% {
		 clip-path: inset(27% 0 92% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 38% {
		 clip-path: inset(9% 0 13% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 40% {
		 clip-path: inset(73% 0 86% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 42% {
		 clip-path: inset(82% 0 32% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 44% {
		 clip-path: inset(46% 0 44% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 46% {
		 clip-path: inset(67% 0 44% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 48% {
		 clip-path: inset(25% 0 87% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 50% {
		 clip-path: inset(6% 0 42% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 52% {
		 clip-path: inset(73% 0 18% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 54% {
		 clip-path: inset(49% 0 56% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 56% {
		 clip-path: inset(65% 0 88% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 58% {
		 clip-path: inset(33% 0 82% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 60% {
		 clip-path: inset(48% 0 79% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 62% {
		 clip-path: inset(89% 0 97% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 64% {
		 clip-path: inset(22% 0 59% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 66% {
		 clip-path: inset(31% 0 1% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 68% {
		 clip-path: inset(42% 0 47% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 70% {
		 clip-path: inset(10% 0 89% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 72% {
		 clip-path: inset(19% 0 27% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 74% {
		 clip-path: inset(25% 0 59% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 76% {
		 clip-path: inset(13% 0 46% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 78% {
		 clip-path: inset(29% 0 41% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 80% {
		 clip-path: inset(45% 0 95% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 82% {
		 clip-path: inset(55% 0 10% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 84% {
		 clip-path: inset(23% 0 17% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 86% {
		 clip-path: inset(21% 0 55% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 88% {
		 clip-path: inset(81% 0 96% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 90% {
		 clip-path: inset(71% 0 8% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 92% {
		 clip-path: inset(95% 0 10% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 94% {
		 clip-path: inset(55% 0 80% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 96% {
		 clip-path: inset(60% 0 39% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 98% {
		 clip-path: inset(19% 0 91% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
	 100% {
		 clip-path: inset(89% 0 74% 0);
	}
	 100% {
		 transform: skewX(-30deg);
	}
}
 