source ⟩ hypertext ⟩ public ⟩ error ⟩ error.css

:root {
	--background: #0a0000;
	--background-light: #160000;
	--text: red;
	--accent: red;
	--accent-translucent: rgba(255, 0, 0, 0.5);
	--background-gradient: repeating-linear-gradient(
			45deg,
			var(--background-light) 0%,
			var(--background-light) 10%,
			var(--background) 0%,
			var(--background) 50%
		)
		0 / 15px 15px;
}

body {
	display: flex;
	align-items: center;
	justify-content: center;

	font-family: var(--serif);

	background: var(--background-gradient);
	background-position: 0 0;

	animation: bgscroll 1.5s linear infinite;
}

h1 {
	margin-block-start: 0;

	font-size: 1.7em;
	font-weight: normal;
	letter-spacing: 1.25px !important;
}

h1 strong {
	font-size: 1.5em;
	font-weight: normal;
	letter-spacing: 5px;
	text-transform: uppercase;
}

div.bilingual {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.bilingual > :first-child {
	padding-inline-end: 1em;
	border-inline-end: 1px solid red;
}

.bilingual > :last-child {
	padding-inline-start: 1em;
}

.accent {
	color: var(--accent);
}

h2 {
	text-align: center;
	font-variant: small-caps;
}

img, video {
	display: block;
	
	max-inline-size: 100%;
	margin-inline: auto;
}

a,
h1,
.accent,
h2 {
	text-shadow: 0 0 5px var(--accent-translucent),
		0 0 10px var(--accent-translucent), 0 0 15px var(--accent-translucent),
		0 0 20px var(--accent-translucent);
}

a:hover,
h1:hover,
.accent:hover,
h2:hover {
	animation: neon 1.5s ease-in-out infinite alternate;
}

/* keyframes for animations */

@keyframes bgscroll {
	from {
		background-position: 15px 0;
	}
	to {
		background-position: 0 0;
	}
}

@keyframes neon {
	from {
		text-shadow: 0 0 5px var(--accent-translucent),
			0 0 10px var(--accent-translucent),
			0 0 15px var(--accent-translucent),
			0 0 20px var(--accent-translucent);
	}
	to {
		text-shadow: 0 0 2.5px var(--accent-translucent),
			0 0 5px var(--accent-translucent),
			0 0 7.5px var(--accent-translucent),
			0 0 10px var(--accent-translucent);
	}
}

@keyframes neon2 {
	from {
		text-shadow: 0 0 5px var(--accent2_translucent),
			0 0 10px var(--accent2_translucent),
			0 0 15px var(--accent2_translucent),
			0 0 20px var(--accent2_translucent);
	}
	to {
		text-shadow: 0 0 2.5px var(--accent2_translucent),
			0 0 5px var(--accent2_translucent),
			0 0 7.5px var(--accent2_translucent),
			0 0 10px var(--accent2_translucent);
	}
}

@keyframes neon3 {
	from {
		text-shadow: 0 0 5px var(--accent3_translucent),
			0 0 10px var(--accent3_translucent),
			0 0 15px var(--accent3_translucent),
			0 0 20px var(--accent3_translucent);
	}
	to {
		text-shadow: 0 0 2.5px var(--accent3_translucent),
			0 0 5px var(--accent3_translucent),
			0 0 7.5px var(--accent3_translucent),
			0 0 10px var(--accent3_translucent);
	}
}