:root {
	box-sizing: border-box;
	cursor: default;
}

::-moz-selection {
	color: #11111b;
	background-color: #dc6767;
}

::selection {
	color: #11111b;
	background-color: #dc6767;
}

html,
body {
	width: 100%;
	height: 100%;
	background-color: #11111b;
	color: #d33d3d;
	font-size: calc(6.4px + 0.8125vw);
}

.error-body {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.error-body:before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #d33d3d;
	mix-blend-mode: overlay;
	z-index: 1;
}
.error-body:after {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, #11111b 21px, transparent 1%) center,
		linear-gradient(#11111b 21px, transparent 1%) center, white;
	background-size: 22px 22px;
	background-position: center;
	opacity: 0.2;
	z-index: 1;
}
.error-body .background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	filter: grayscale(1);
	mix-blend-mode: luminosity;
}
.error-body .message {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	z-index: 3;
}
.error-body .message h1 {
	position: absolute;
	top: 10%;
	left: 0%;
	width: 100%;
	font-size: 10em;
	margin: 0;
	-webkit-animation: shake 600ms ease-in-out infinite alternate;
	animation: shake 600ms ease-in-out infinite alternate;
	text-shadow: 0 0 0.07em #d33d3d, -0.2em 0 2em rgba(211, 61, 61, 0.3),
		0.2em 0 2em rgba(211, 61, 61, 0.3);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.error-body .message h1:before {
	content: attr(t);
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0.34em);
	height: 0.1em;
	line-height: 0.5em;
	width: 100%;
	-webkit-animation: scan 500ms ease-in-out infinite alternate 534ms,
		glitch-anim 300ms ease-in-out infinite alternate;
	animation: scan 500ms ease-in-out infinite alternate 534ms,
		glitch-anim 300ms ease-in-out infinite alternate;
	overflow: hidden;
	opacity: 0.7;
}
.error-body .message h1:after {
	content: attr(t);
	position: absolute;
	top: -11px;
	left: 50%;
	transform: translate(-50%, 0.34em);
	height: 0.5em;
	line-height: 0.1em;
	width: 100%;
	-webkit-animation: scan 665ms ease-in-out infinite alternate 98ms,
		glitch-anim 300ms ease-in-out infinite alternate;
	animation: scan 665ms ease-in-out infinite alternate 98ms,
		glitch-anim 300ms ease-in-out infinite alternate;
	overflow: hidden;
	opacity: 0.8;
}
.error-body .message .bottom {
	position: absolute;
	top: 65%;
	left: 0;
	width: 100%;
}
.error-body .message p,
.error-body .message a {
	font-size: 2em;
	font-family: monospace;
	text-shadow: 0 0 5px #d33d3d;
	filter: blur(0.8px);
}
.error-body .message a {
	position: relative;
	color: #d33d3d;
	text-decoration: none;
	font-weight: 700;
	border: 2px solid #d33d3d;
	text-transform: uppercase;
	padding: 5px 30px;
	box-shadow: inset 0 0 0 0 rgba(211, 61, 61, 0.2);
	transition: 25ms ease-in-out all 0ms;
	overflow: hidden;
	-webkit-animation: attn 3s ease-in-out infinite;
	animation: attn 3s ease-in-out infinite;
}
.error-body .message a:hover {
	cursor: wait;
	box-shadow: inset 0 -2em 0 0 rgba(211, 61, 61, 0.2);
	transition: 225ms ease-in-out all 225ms;
	-webkit-animation: none;
	animation: none;
}
.error-body .message a:hover:before,
.error-body .message a:hover:after {
	transform: translate(-50%, 0) scale(0, 1);
}
.error-body .message a:active {
	box-shadow: inset 0 -2em 0 0 rgba(211, 61, 61, 0.5);
	transition: 225ms ease-in-out all 225ms;
}
.error-body .message a:before,
.error-body .message a:after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0) scale(1, 1);
	transform-origin: center;
	background-color: #11111b;
	width: 90%;
	height: 5px;
	transition: 225ms ease-in-out all;
	mix-blend-mode: hard-light;
}
.error-body .message a:before {
	top: -4px;
}
.error-body .message a:after {
	bottom: -4px;
}

@-webkit-keyframes scan {
	from,
	20%,
	100% {
		height: 0;
		transform: translate(-50%, 0.44em);
	}
	10%,
	15% {
		height: 1em;
		line-height: 0.2em;
		transform: translate(-55%, 0.24em);
	}
}

@keyframes scan {
	from,
	20%,
	100% {
		height: 0;
		transform: translate(-50%, 0.44em);
	}
	10%,
	15% {
		height: 1em;
		line-height: 0.2em;
		transform: translate(-55%, 0.24em);
	}
}
@keyframes pulse {
	from {
		text-shadow: 0 0 0 #d33d3d, 0 0 0 rgba(211, 61, 61, 0.3),
			0 0 0 rgba(211, 61, 61, 0.3);
	}

	to {
		text-shadow: 0 0 0.07em #d33d3d, -0.2em 0 2em rgba(211, 61, 61, 0.3),
			0.2em 0 2em rgba(211, 61, 61, 0.3);
	}
}
@-webkit-keyframes attn {
	0%,
	100% {
		opacity: 1;
	}
	30%,
	35% {
		opacity: 0.4;
	}
}
@keyframes attn {
	0%,
	100% {
		opacity: 1;
	}
	30%,
	35% {
		opacity: 0.4;
	}
}
@-webkit-keyframes shake {
	0%,
	100% {
		transform: translate(-1px, 0);
	}
	10% {
		transform: translate(2px, 1px);
	}
	30% {
		transform: translate(-3px, 2px);
	}
	35% {
		transform: translate(2px, -3px);
		filter: blur(4px);
	}
	45% {
		transform: translate(2px, 2px) skewY(-8deg) scale(0.96, 1);
		filter: blur(0);
	}
	50% {
		transform: translate(-3px, 1px);
	}
}
@keyframes shake {
	0%,
	100% {
		transform: translate(-1px, 0);
	}
	10% {
		transform: translate(2px, 1px);
	}
	30% {
		transform: translate(-3px, 2px);
	}
	35% {
		transform: translate(2px, -3px);
		filter: blur(4px);
	}
	45% {
		transform: translate(2px, 2px) skewY(-8deg) scale(0.96, 1);
		filter: blur(0);
	}
	50% {
		transform: translate(-3px, 1px);
	}
}
@-webkit-keyframes glitch-anim {
	0% {
		clip: rect(10px, 9999px, 40px, 0);
	}
	10% {
		clip: rect(20px, 9999px, 71px, 0);
	}
	20% {
		clip: rect(27px, 9999px, 61px, 0);
	}
	30% {
		clip: rect(95px, 9999px, 3px, 0);
	}
	40% {
		clip: rect(86px, 9999px, 47px, 0);
	}
	50% {
		clip: rect(70px, 9999px, 23px, 0);
	}
	60% {
		clip: rect(28px, 9999px, 45px, 0);
	}
	70% {
		clip: rect(71px, 9999px, 94px, 0);
	}
	80% {
		clip: rect(85px, 9999px, 65px, 0);
	}
	90% {
		clip: rect(71px, 9999px, 16px, 0);
	}
	100% {
		clip: rect(83px, 9999px, 54px, 0);
	}
}
@keyframes glitch-anim {
	0% {
		clip: rect(10px, 9999px, 40px, 0);
	}
	10% {
		clip: rect(20px, 9999px, 71px, 0);
	}
	20% {
		clip: rect(27px, 9999px, 61px, 0);
	}
	30% {
		clip: rect(95px, 9999px, 3px, 0);
	}
	40% {
		clip: rect(86px, 9999px, 47px, 0);
	}
	50% {
		clip: rect(70px, 9999px, 23px, 0);
	}
	60% {
		clip: rect(28px, 9999px, 45px, 0);
	}
	70% {
		clip: rect(71px, 9999px, 94px, 0);
	}
	80% {
		clip: rect(85px, 9999px, 65px, 0);
	}
	90% {
		clip: rect(71px, 9999px, 16px, 0);
	}
	100% {
		clip: rect(83px, 9999px, 54px, 0);
	}
}