body {
	position: relative;
	top: 0;
	background-color: black;
	left: 0;
}

 @font-face {
    font-family: Suikoden;
    src: url('fonts/SuikodenText.ttf');
  }

 select#scripts {
  	width: 300px;
  	top: 100px;
  	font-family: Suikoden;
  	color: black;
  }

.overlay {
	position: relative;
	top: 0px;
	left: 0;
	width: 100%;
	height: 100%;
}

button#playButton {
	width: 100px;
	margin: 20px;
	left: 300px;
	position: absolute;
		transform: translate(-43%);
	-moz-transform: translate(-43%);
	-webkit-transform: translate(-43%);
}

.overlay #scriptInput {
	position: absolute;
	top: 400px;
	left: 300px;
	width: auto;
	height: auto;
	border-width: 2px;
	color: white;
}


div#volunteer {
	position: absolute;
	font-family: Arial;
	font-size: 9px;
	color: white;
	bottom: 0%;
	left: 50%;
	transform: translateX(-50%);
}


div#title.yadayada {
	position: absolute;
	font-family: Suikoden 
	src: url('./fonts/SuikodenText.ttf');
	font-size: 80px;
	top: 175px;
	left: 50%;
	transform: translate(-43%);
	-moz-transform: translate(-43%);
	-webkit-transform: translate(-43%);
	color: red;
	animation: colorChange 10s;
	-moz-animation: colorChange 10s;
	-webkit-animation: colorChange 10s;
	-ms-animation: colorChange 10s;
	
}

@keyframes colorChange {
	from {color: white;}
	to {color: red;}
}

@-moz-keyframes colorChange {
	from {color: white;}
	to {color: red;}
}

@-webkit-keyframes colorChange {
	from {color: white;}
	to {color: red;}
}

@-ms-keyframes colorChange {
	from {color: white;}
	to {color: red;}

}



canvas {
	position: absolute;
	top: 80px;
	left: 250px;
	z-index: -1;

}