body {
	background-color: black;
}

.text_obey {
	color: white;
	text-align: center;
	font-size: 20em;
	font-family: Arial, sans-serif;
	font-weight: bolder;
	position: relative;
	display: inline-block;
}

/* Create two offset "ghost" layers */
.text_obey::before,
.text_obey::after {
	content: attr(data-text);
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	overflow: hidden;
	color: white;
	clip: rect(0, 900px, 0, 0);
}

/* Red offset ghost */
.text_obey::before {
	left: 2px;
	text-shadow: -2px 0 red;
	animation: glitchTop 0.5s infinite linear alternate-reverse;
}

/* Blue offset ghost */
.text_obey::after {
	left: -2px;
	text-shadow: 2px 0 blue;
	animation: glitchBottom 1s infinite linear alternate-reverse;
}

/* Keyframes for random clipping and shifting */
@keyframes glitchTop {
	0% { clip: rect(42px, 9999px, 44px, 0); transform: translate(0); }
	10% { clip: rect(12px, 9999px, 85px, 0); transform: translate(-5px, -5px); }
	20% { clip: rect(85px, 9999px, 140px, 0); transform: translate(5px, 5px); }
	30% { clip: rect(12px, 9999px, 60px, 0); transform: translate(-5px, 5px); }
	40% { clip: rect(60px, 9999px, 80px, 0); transform: translate(5px, -5px); }
	50%, 100% { clip: rect(0, 9999px, 9999px, 0); transform: translate(0); }
}

@keyframes glitchBottom {
	0% { clip: rect(12px, 9999px, 80px, 0); transform: translate(0); }
	10% { clip: rect(85px, 9999px, 140px, 0); transform: translate(5px, 5px); }
	20% { clip: rect(12px, 9999px, 60px, 0); transform: translate(-5px, -5px); }
	30% { clip: rect(60px, 9999px, 80px, 0); transform: translate(5px, -5px); }
	40% { clip: rect(42px, 9999px, 44px, 0); transform: translate(-5px, 5px); }
	50%, 100% { clip: rect(0, 9999px, 9999px, 0); transform: translate(0); }
}

.center {
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}