@import url(https://fonts.bunny.net/css?family=jetbrains-mono:500,800);

:root {
	 font-size: 20px;
     font-family: 'JetBrains Mono', monospace;
	 line-height: 1.5;
	 color: rgba(255, 255, 255, 0.25);
}
 body {
	 height: 100vh;
	 overflow : hidden;
	 display: flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	 text-align: center;
	 background: #333;
}
 a {
	 color: white;
	 display: inline;
	 text-decoration : none;
}
 #error {
	 margin-bottom: 1rem;
	 font-size: 2rem;
	 font-weight: 500;
	 text-transform: uppercase;
	 letter-spacing: 0.075em;
	 color: #c94d4d;
	 animation: pulse 4s infinite alternate;
	 position: relative;
}
 @keyframes pulse {
	 from {
		 opacity: 0.5;
	}
	 50% {
		 opacity: 0.5;
	}
}
 #error::before {
	 content: '';
	 width: 0.75rem;
	 height: 50vh;
	 margin-bottom: 0.75em;
	 position: absolute;
	 left: 50%;
	 bottom: 100%;
	 transform: translateX(-50%);
	 background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 60%, transparent 100%);
}
 #desc {
	 margin: 2em 0 1em;
}
 .error-num, .error-num__clip, .error-num__clip::before, .error-num__clip-left {
	 position: relative;
	 font-size: 10rem;
	 letter-spacing: -0.01em;
	 color: white;
	 animation: colorSplit 1.25s steps(2, end) infinite;
}
 @keyframes colorSplit {
	 25% {
		 text-shadow: -0.02em 0 0 #ed008c, 0.025em 0 0 #0087ef;
	}
	 75% {
		 text-shadow: -0.035em 0 0 #ed008c, 0.04em 0 0 #0087ef;
	}
}
 .error-num__clip, .error-num__clip::before, .error-num__clip-left {
	 position: absolute;
	 top: 0;
	 left: -2px;
	 z-index: 10;
	 color: #333;
	 overflow: visible;
	 clip-path: polygon(0% 0%, 100% 0, 100% 25%, 0 25%, 0 30%, 100% 30%, 100% 50%, 0 50%, 0 60%, 100% 60%, 100% 65%, 0 65%, 0 80%, 100% 80%, 100% 85%, 0 85%, 0% 0%);
	 animation: glitch 1s steps(2, start) infinite;
}
 @keyframes glitch {
	 30% {
		 left: 0;
	}
	 to {
		 left: 0;
	}
}
 .error-num__clip::before {
	 content: '503';
	 left: 0.05em;
	 color: white;
	 z-index: 9;
	 clip-path: polygon(0% 0%, 100% 0, 100% 26%, 0 26%, 0 29%, 100% 29%, 100% 51%, 0 51%, 0 59%, 100% 59%, 100% 66%, 0 66%, 0 79%, 100% 79%, 100% 86%, 0 86%, 0% 0%);
}