.glitch {
	position: relative;
	color: var(--font-primary);
	font-size: 60px;
}

.line:not(:first-child) {
	position: absolute;
	top: 0;
	left: 0;
}

/* Individual nth-child styles */
.line:nth-child(1) {
	animation:
		clip 3000ms -300ms linear infinite,
		glitch1 500ms -100ms linear infinite;
}

.line:nth-child(2) {
	animation:
		clip 3000ms -600ms linear infinite,
		glitch2 500ms -200ms linear infinite;
}

.line:nth-child(3) {
	animation:
		clip 3000ms -900ms linear infinite,
		glitch3 500ms -300ms linear infinite;
}

.line:nth-child(4) {
	animation:
		clip 3000ms -1200ms linear infinite,
		glitch4 500ms -400ms linear infinite;
}

.line:nth-child(5) {
	animation:
		clip 3000ms -1500ms linear infinite,
		glitch5 500ms -500ms linear infinite;
}

.line:nth-child(6) {
	animation:
		clip 3000ms -1800ms linear infinite,
		glitch6 500ms -600ms linear infinite;
}

.line:nth-child(7) {
	animation:
		clip 3000ms -2100ms linear infinite,
		glitch7 500ms -700ms linear infinite;
}

.line:nth-child(8) {
	animation:
		clip 3000ms -2400ms linear infinite,
		glitch8 500ms -800ms linear infinite;
}

.line:nth-child(9) {
	animation:
		clip 3000ms -2700ms linear infinite,
		glitch9 500ms -900ms linear infinite;
}

.line:nth-child(10) {
	animation:
		clip 3000ms -3000ms linear infinite,
		glitch10 500ms -1000ms linear infinite;
}

/* Glitch animations */
@keyframes glitch1 {
	0%, 80%, 100% {
		transform: translateX(0);
		color: var(--special-color);
	}
	85% {
		transform: translateX(-2px);
		color: var(--special-color);
	}
	90% {
		transform: translateX(3px);
		color: var(--special-color);
	}
	95% {
		transform: translateX(-1px);
		color: var(--special-color);
	}
}

@keyframes glitch2 {
	0%, 80%, 100% {
		transform: translateX(0);
		color: var(--special-color);
	}
	85% {
		transform: translateX(4px);
		color: var(--special-color);
	}
	90% {
		transform: translateX(-3px);
		color: var(--special-color);
	}
	95% {
		transform: translateX(2px);
		color: var(--special-color);
	}
}

@keyframes glitch3 {
	0%, 80%, 100% {
		transform: translateX(0);
		color: var(--special-color);
	}
	85% {
		transform: translateX(-5px);
		color: var(--special-color);
	}
	90% {
		transform: translateX(2px);
		color: var(--special-color);
	}
	95% {
		transform: translateX(-2px);
		color: var(--special-color);
	}
}

@keyframes glitch4 {
	0%, 80%, 100% {
		transform: translateX(0);
		color: var(--special-color);
	}
	85% {
		transform: translateX(1px);
		color: var(--special-color);
	}
	90% {
		transform: translateX(-4px);
		color: var(--special-color);
	}
	95% {
		transform: translateX(3px);
		color: var(--special-color);
	}
}

@keyframes glitch5 {
	0%, 80%, 100% {
		transform: translateX(0);
		color: var(--special-color);
	}
	85% {
		transform: translateX(-3px);
		color: var(--special-color);
	}
	90% {
		transform: translateX(5px);
		color: var(--special-color);
	}
	95% {
		transform: translateX(-1px);
		color: var(--special-color);
	}
}

/* Duplicate or customize more glitch animations as needed */
@keyframes glitch6 {
	0%, 80%, 100% { transform: translateX(0); color: var(--special-color); }
	85% { transform: translateX(2px); color: var(--special-color); }
	90% { transform: translateX(-2px); color: var(--special-color); }
	95% { transform: translateX(1px); color: var(--special-color);; }
}

@keyframes glitch7 {
	0%, 80%, 100% { transform: translateX(0); color: var(--special-color); }
	85% { transform: translateX(-4px); color: var(--special-color); }
	90% { transform: translateX(4px); color: var(--special-color); }
	95% { transform: translateX(-2px); color: var(--special-color); }
}

@keyframes glitch8 {
	0%, 80%, 100% { transform: translateX(0); color: var(--special-color); }
	85% { transform: translateX(3px); color: var(--special-color); }
	90% { transform: translateX(-5px); color: var(--special-color); }
	95% { transform: translateX(2px); color: var(--special-color); }
}

@keyframes glitch9 {
	0%, 80%, 100% { transform: translateX(0); color: var(--special-color); }
	85% { transform: translateX(-1px); color: var(--special-color); }
	90% { transform: translateX(3px); color: var(--special-color); }
	95% { transform: translateX(-3px); color: var(--special-color); }
}

@keyframes glitch10 {
	0%, 80%, 100% { transform: translateX(0); color: var(--special-color); }
	85% { transform: translateX(5px); color: var(--special-color); }
	90% { transform: translateX(-1px); color: var(--special-color); }
	95% { transform: translateX(1px); color: var(--special-color); }
}

@keyframes clip {
	0% {
		clip-path: polygon(0 -20%, 100% -20%, 100% 0%, 0 0);
	}
	100% {
		clip-path: polygon(0 100%, 100% 100%, 100% 120%, 0 120%);
	}
}

canvas {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.error-modal {
	position: absolute;
	padding: 20px;
	background-color: #330;
	border: 2px solid var(--special-color);
	border-radius: 10px;
	z-index: 8;
	display: none;
}

.error-title {
	font-size: 24px;
	font-weight: bold;
	color: var(--special-color);
	margin-bottom: 10px;
	z-index: 9;
}

.error-message {
	font-size: 18px;
	color: var(--special-color);
	z-index: 9;
}