@font-face { font-family: 'Iosevka ASCII'; font-weight: 400; font-stretch: normal; font-style: normal; src: url('//cdn.kippi.at/font/Iosevka_ASCII-h5VvnoYs.woff2') format('woff2'); /* Wait for the font to be loaded before rendering text */ font-display: block; } * { /* Remove default padding and margin */ margin: 0; padding: 0; } body, html { /* Fill the whole viewport for centering */ width: 100%; height: 100%; background-color: black; font-family: 'Iosevka ASCII', system-ui, monospace; } .wrapper { /* Again fill the whole viewport and center everything inside wrapper */ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; } .container { /* Prevent text inside from getting too wide */ width: 61.8%; /* Prevent text being pushed out of the viewbox if viewport height gets <= container height */ max-height: 100%; } .container-spacer { /* Add some spacing at top and bottom to have it look better if we need to resort to scrolling */ padding-top: 32px; padding-bottom: 32px; } .subtext { color: white; position: relative; font-size: 64px; } .desc { color: gray; font-size: 16px; padding-top: 2em; } .glitch { color: white; position: relative; font-size: 256px; /* Remove annoying font padding at top which destroyed the centering, but still keep it at the bottom */ line-height: 0.875; margin-bottom: 32px; /* Have h1 as wide as content but still centered. Useful because then keyframe offsets are not calculated form the left edge of the container but left edge of text */ width: fit-content; margin-left: auto; margin-right: auto; } .glitch::before, .glitch::after { color: white; /* Fill with text of data-text attribute to enable setting the content from HTML, enabling to use the same CSS for every error page */ content: attr(data-text); /* Have the "glitch" elements overlay the text */ position: absolute; /* Needed for proper alignment of the glitch elements */ width: 100%; height: 100%; /* Needed to make the "shifting" glich effect work */ background: black; } .glitch::before { left: 0.03em; text-shadow: -0.02em 0 red; animation-name: glitch-animation-1; animation-duration: 2s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate-reverse; } .glitch::after { left: -0.03em; text-shadow: -0.02em 0 blue; animation-name: glitch-animation-2; /* Timed so that the lenght until the whole cycle repeats is long but there is still a noticeable change in every iteration giving the glitch effect a "pseduo-random" touch. */ animation-duration: 2.5s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate-reverse; } @keyframes glitch-animation-1 { 0% { clip: rect(0.3725em, auto, 0.7725em, auto); } 5% { clip: rect(0.6225em, auto, -0.0075em, auto); } 10% { clip: rect(-0.1275em, auto, 0.7425em, auto); } 15% { clip: rect(0.4125em, auto, 1.0725em, auto); } 20% { clip: rect(0.0125em, auto, 0.7225em, auto); } 25% { clip: rect(1.0125em, auto, 0.0925em, auto); } 30% { clip: rect(0.5925em, auto, 0.8625em, auto); } 35% { clip: rect(0.8625em, auto, 0.0625em, auto); } 40% { clip: rect(0.4025em, auto, -0.0175em, auto); } 45% { clip: rect(1.2625em, auto, 0.3025em, auto); } 50% { clip: rect(0.1225em, auto, 1.1625em, auto); } 55% { clip: rect(0.5525em, auto, 0.6625em, auto); } 60% { clip: rect(0.1825em, auto, 0.5325em, auto); } 65% { clip: rect(0.8725em, auto, 0.2525em, auto); } 70% { clip: rect(0.6325em, auto, -0.1375em, auto); } 75% { clip: rect(0.5925em, auto, 0.6225em, auto); } 80% { clip: rect(0.9125em, auto, 0.7325em, auto); } 85% { clip: rect(0.9625em, auto, 0.0825em, auto); } 90% { clip: rect(-0.0275em, auto, 0.9925em, auto); } 95% { clip: rect(1.3025em, auto, 1.1125em, auto); } 100% { clip: rect(0.2525em, auto, -0.0275em, auto); } } @keyframes glitch-animation-2 { 0% { clip: rect(0.8325em, auto, 1.2225em, auto); } 5% { clip: rect(0.8025em, auto, 0.0325em, auto); } 10% { clip: rect(0.3425em, auto, 0.9825em, auto); } 15% { clip: rect(0.7225em, auto, 0.1325em, auto); } 20% { clip: rect(0.4325em, auto, 0.6425em, auto); } 25% { clip: rect(0.7125em, auto, 0.6125em, auto); } 30% { clip: rect(0.2925em, auto, 0.9225em, auto); } 35% { clip: rect(1.1825em, auto, 0.62em, auto);} 40% { clip: rect(0.1625em, auto, 0.5325em, auto); } 45% { clip: rect(1.3125em, auto, 0.8425em, auto); } 50% { clip: rect(0.1525em, auto, 0.7725em, auto); } 55% { clip: rect(0.9725em, auto, 1.0325em, auto); } 60% { clip: rect(0.2825em, auto, 0.1725em, auto); } 65% { clip: rect(0.5325em, auto, 1.1525em, auto); } 70% { clip: rect(0.2325em, auto, 1.0025em, auto); } 75% { clip: rect(0.2025em, auto, 1.0425em, auto); } 80% { clip: rect(0.4125em, auto, -0.0775em, auto); } 85% { clip: rect(1.0625em, auto, 1.0925em, auto); } 90% { clip: rect(1.1625em, auto, 1.0025em, auto); } 95% { clip: rect(0.7025em, auto, 0.3425em, auto); } 100% { clip: rect(0.6225em, auto, 0.6525em, auto); } }