#textBox
	.textSec
		span.text T
		span.text h
		span.text a
		span.text t
		span.text '
		span.text s
	.textSec
		span.text i
		span.text t
		span.text ,
	.textSec
		span.text m
		span.text a
		span.text n
		span.text .
	.textSec
		span.text G
		span.text a
		span.text m
		span.text e
	.textSec
		span.text o
		span.text v
		span.text e
		span.text r
		span.text ,
	.textSec
		span.text m
		span.text a
		span.text n
		span.text .
	.textSec
		span.text G
		span.text a
		span.text m
		span.text e
	.textSec
		span.text o
		span.text v
		span.text e
		span.text r
		span.text !
	.textSec
		span.text W
		span.text h
		span.text a
		span.text t
	.textSec
		span.text t
		span.text h
		span.text e
	.textSec
		span.text *
		span.text *
		span.text *
		span.text *
	.textSec
		span.text a
		span.text r
		span.text e
	.textSec
		span.text w
		span.text e
	.textSec
		span.text g
		span.text o
		span.text n
		span.text n
		span.text a
	.textSec
		span.text d
		span.text o
	.textSec
		span.text n
		span.text o
		span.text w
		span.text ?
	.textSec
		span.text W
		span.text h
		span.text a
		span.text t
	.textSec
		span.text a
		span.text r
		span.text e
	.textSec
		span.text w
		span.text e
	.textSec
		span.text g
		span.text o
		span.text n
		span.text n
		span.text a
	.textSec
		span.text d
		span.text o
		span.text ?

@import url('https://fonts.googleapis.com/css?family=Audiowide|Monoton|Quantico:700');
body {
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	background-color: RGB(24, 25, 26);
	display: flex;
	align-items: center;
	position: relative;
	&:before {
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-image: url(https://i.imgsafe.org/732a1b0d39.jpg);
		background-size: contain;
		background-position: center center;
		background-repeat: no-repeat;
		z-index: -1;
		opacity: .15;
	}
}

#textBox {
	max-width: 70%;
	display: block;
	height: auto;
	margin: 0 auto;
	text-align: center;
	color: whitesmoke;
	line-height: 150%;
	font-variant: small-caps;
	font-family: 'Audiowide';
	font-size: calc(5px + 4vw);
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	.textSec {
		margin: 0 15px 0 15px;
		span {
			transition: all .1s ease;
			margin: .5px;
			-webkit-filter: brightness(120%);
		}
	}
}

var otTitle = document.getElementById("textBox"),
		sSpan = document.getElementsByClassName('text').length,
		letters = document.getElementsByClassName('text'),
		whichLetter = 0,
		trailAmount = 7;


//Used to get random colors
function getRandomColor() {
	var letters = '0123456789ABCDEF';
	var color = '#';
	for (var i = 0; i < 6; i++) {
		color += letters[Math.floor(Math.random() * 16)];
	}
	return color;
}

//Animate color change 
setInterval(function() {
	var rColor = getRandomColor();
	var tColor = getRandomColor();
	if (whichLetter < sSpan + trailAmount) {
		if (whichLetter > (trailAmount - 1)) {
			letters[(whichLetter - trailAmount)].style.color = 'whitesmoke';
		}
		if (whichLetter < sSpan) {
			letters[whichLetter].style.color = rColor;
			letters[whichLetter].style.textShadow = '0px 0px 10px ' + tColor;
		}
		whichLetter++;
	} else if (whichLetter > sSpan + (trailAmount - 1)) whichLetter = 0;
}, 75)