@import url("https://fonts.cdnfonts.com/css/doctor-glitch");
@keyframes fadeInAnimation {
	0% {
		opacity: 0;
		background: #000000;
	}
	50% {
		opacity: 0;
		background: #490000;
	}
	100% {
		opacity: 1;
		background: #49000000;
	}
}
* {
	cursor: default;
}
body {
	animation: fadeInAnimation ease 5s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	-webkit-animation: fadeInAnimation ease 5s;
	overflow: hidden;
	margin: 0;
	cursor: not-allowed;
	text-align: center;
}
p {
	font-family: "Doctor Glitch";
	color: #dc6464;
	letter-spacing: 0.3em;
}
.dimScreen {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100; /* Just to keep it at the very top */
}
.col {
	position: absolute;
	width: 100%;
	top: 40%;
	margin: auto;
	text-align: center;
}
a,
a:hover,
a:visited {
	color: white;
	text-decoration: none;
}
h1 {
	font-family: "Doctor Glitch";
	position: relative;
	color: white;
	font-size: 2em;
	letter-spacing: 0.2em;
	animation: glitch-skew 1s infinite linear alternate-reverse;
	-webkit-animation: glitch-skew 1s infinite linear alternate-reverse;
}
.button-grid {
	display: grid;
	grid-template-columns: repeat(3, auto);
	grid-gap: 15px; /* Adjust this value for the desired spacing between buttons */
	justify-content: center;
	position: absolute;
	bottom: 50%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	animation: fadeInAnimation 3s forwards;
}
#button {
	position: relative;
	-webkit-backdrop-filter: blur(10px);
	-webkit-box-shadow: 9px 13px 41px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 9px 13px 41px 0px rgba(0, 0, 0, 0.5);
	box-shadow: 9px 13px 41px 0px rgba(0, 0, 0, 0.5);
	margin-top: 5px;
	background-color: rgba(66, 32, 32, 0.6);
	backdrop-filter: blur(6px);
	border-radius: 12px;
	border-top: 4px hidden #8f1111;
	border-left: 4px groove #8f1111;
	border-right: 4px ridge #8f1111;
	border-bottom: 4px ridge #8f1111;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	color: #ffffff;
	font-size: 15px;
	font-family: "Space Mono", monospace;
	padding: 3px 15px 3px 15px;
	text-decoration: none;
	z-index: 6;
	transition: box-shadow 0.5s, transform 0.2s ease-out;
	background-repeat: no-repeat;
	background-size: 24px 24px;
	background-position: 5px center;
	transform-origin: center center;
	white-space: nowrap;
	flex: 1;
}
.glitch::before {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	left: 2px;
	text-shadow: -2px 0 #ff0000;
	clip: rect(44px, 450px, 56px, 0);
	animation: glitch-anim 5s infinite linear alternate-reverse;
}
.glitch::after {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	left: -2px;
	text-shadow: -2px 0 #ff0000, 2px 2px #ff0000;
	animation: glitch-anim2 1s infinite linear alternate-reverse;
}
@keyframes glitch-anim {
	0% {
		clip: rect(11px, 9999px, 65px, 0);
		transform: skew(0.37deg);
	}
	5% {
		clip: rect(39px, 9999px, 22px, 0);
		transform: skew(0.54deg);
	}
	10% {
		clip: rect(24px, 9999px, 12px, 0);
		transform: skew(0.54deg);
	}
	15% {
		clip: rect(54px, 9999px, 63px, 0);
		transform: skew(0.27deg);
	}
	20% {
		clip: rect(16px, 9999px, 98px, 0);
		transform: skew(0.74deg);
	}
	25% {
		clip: rect(94px, 9999px, 64px, 0);
		transform: skew(0.26deg);
	}
	30% {
		clip: rect(1px, 9999px, 45px, 0);
		transform: skew(0.57deg);
	}
	35% {
		clip: rect(74px, 9999px, 23px, 0);
		transform: skew(0.49deg);
	}
	40% {
		clip: rect(81px, 9999px, 91px, 0);
		transform: skew(0.03deg);
	}
	45% {
		clip: rect(13px, 9999px, 5px, 0);
		transform: skew(0.92deg);
	}
	50% {
		clip: rect(25px, 9999px, 31px, 0);
		transform: skew(0.15deg);
	}
	55% {
		clip: rect(96px, 9999px, 60px, 0);
		transform: skew(0.3deg);
	}
	60% {
		clip: rect(16px, 9999px, 61px, 0);
		transform: skew(0.88deg);
	}
	65% {
		clip: rect(93px, 9999px, 5px, 0);
		transform: skew(0.51deg);
	}
	70% {
		clip: rect(17px, 9999px, 33px, 0);
		transform: skew(0.44deg);
	}
	75% {
		clip: rect(81px, 9999px, 70px, 0);
		transform: skew(0.45deg);
	}
	80% {
		clip: rect(6px, 9999px, 81px, 0);
		transform: skew(0.4deg);
	}
	85% {
		clip: rect(53px, 9999px, 74px, 0);
		transform: skew(0.45deg);
	}
	90% {
		clip: rect(14px, 9999px, 21px, 0);
		transform: skew(0.67deg);
	}
	95% {
		clip: rect(93px, 9999px, 28px, 0);
		transform: skew(0.1deg);
	}
	100% {
		clip: rect(19px, 9999px, 71px, 0);
		transform: skew(0.02deg);
	}
}
@keyframes glitch-anim2 {
	0% {
		clip: rect(82px, 9999px, 6px, 0);
		transform: skew(0.54deg);
	}
	5% {
		clip: rect(50px, 9999px, 43px, 0);
		transform: skew(0.36deg);
	}
	10% {
		clip: rect(22px, 9999px, 61px, 0);
		transform: skew(0.24deg);
	}
	15% {
		clip: rect(40px, 9999px, 81px, 0);
		transform: skew(0.17deg);
	}
	20% {
		clip: rect(99px, 9999px, 32px, 0);
		transform: skew(0.28deg);
	}
	25% {
		clip: rect(7px, 9999px, 14px, 0);
		transform: skew(0.56deg);
	}
	30% {
		clip: rect(95px, 9999px, 68px, 0);
		transform: skew(0.38deg);
	}
	35% {
		clip: rect(95px, 9999px, 16px, 0);
		transform: skew(0.79deg);
	}
	40% {
		clip: rect(7px, 9999px, 17px, 0);
		transform: skew(0.29deg);
	}
	45% {
		clip: rect(83px, 9999px, 41px, 0);
		transform: skew(0.77deg);
	}
	50% {
		clip: rect(60px, 9999px, 92px, 0);
		transform: skew(0.8deg);
	}
	55% {
		clip: rect(38px, 9999px, 60px, 0);
		transform: skew(0.02deg);
	}
	60% {
		clip: rect(95px, 9999px, 93px, 0);
		transform: skew(0.54deg);
	}
	65% {
		clip: rect(57px, 9999px, 1px, 0);
		transform: skew(0.41deg);
	}
	70% {
		clip: rect(15px, 9999px, 51px, 0);
		transform: skew(0.06deg);
	}
	75% {
		clip: rect(50px, 9999px, 57px, 0);
		transform: skew(1deg);
	}
	80% {
		clip: rect(59px, 9999px, 20px, 0);
		transform: skew(0.19deg);
	}
	85% {
		clip: rect(3px, 9999px, 75px, 0);
		transform: skew(0.73deg);
	}
	90% {
		clip: rect(39px, 9999px, 5px, 0);
		transform: skew(0.92deg);
	}
	95% {
		clip: rect(81px, 9999px, 96px, 0);
		transform: skew(0.67deg);
	}
	100% {
		clip: rect(68px, 9999px, 88px, 0);
		transform: skew(0.75deg);
	}
}
@keyframes glitch-skew {
	0% {
		transform: skew(-3deg);
	}
	10% {
		transform: skew(4deg);
	}
	20% {
		transform: skew(-4deg);
	}
	30% {
		transform: skew(-2deg);
	}
	40% {
		transform: skew(-3deg);
	}
	50% {
		transform: skew(-1deg);
	}
	60% {
		transform: skew(-1deg);
	}
	70% {
		transform: skew(0deg);
	}
	80% {
		transform: skew(2deg);
	}
	90% {
		transform: skew(-2deg);
	}
	100% {
		transform: skew(1deg);
	}
}