@font-face{
	font-family: visitor;
	src: url('/visitor.woff');
}

@font-face{
	font-family: mario;
	src: url('New Super Mario Font U.woff');
}
	
@keyframes fadeOut {
	0% {opacity:1;}
	100% {opacity:0;}
}

.fadeOut {
	animation:fadeOut 1s linear 0s 1 alternate;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
}

* {
	margin: 0px;
	padding: 0px;
}

a {
	text-decoration: none;
	color:#3399ff;
}

a:hover {
	text-decoration: none;
	color:#ff9900;
}

body {
	background-color:#110500;
	color:#ffffff;
	font-family:mario;
	font-size: 40px;
	overflow:hidden;
}

#flexContainer {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-around;
	align-items:stretch;
}
	#flexContainer div {
		transition: width 2s, height 1s;
	}

	#leftSide, #rightSide {
		width:45vw;
	}

	#middle {
		width:10vw;
		background-color:#000;
		position:relative;
		display:flex;
		flex-direction:column;
	}
		#endingFlag { /* Doesn't work because it renders behind the SVG */
			box-shadow: inset 0px 0px 5px #000;
		}
		
		#middleLanes {
			flex-grow:1;
			display:flex;
			padding-bottom:10px;
		}
			
			.middleLane {
				width:50%;
				background-image: url("train_track_03.png");
				background-size: 100%;
			}
			
			@keyframes wobbly {
				0% {transform:rotate(-8deg)}
				100% {transform:rotate(8deg)}
			}
			
			.nonWobblyImageContainer {
				position:relative;
				top: calc(100% - 3.4vw);
				transition:top .1s;
				transition-timing-function:linear;
				background-image: url("yellow_dash.png");
				background-position: 0% 60%;
				background-repeat: repeat-x;
			}
			
			.middleLane img {
				animation-name: wobbly;
				animation-iteration-count: infinite;
				animation-direction: alternate;
				animation-timing-function: ease;
				width:80%;
				padding:10%;
				filter:drop-shadow(0px 0px 5px #000);
				opacity:1;
				transition:opacity .2s;
			}
			
			.middleLane img:hover {
				opacity:.5;
			}
			
			#leftLaneImage {animation-delay:1.5s; animation-duration:2s;}
			#rightLaneImage {animation-delay:0s; animation-duration:3s;}
		
		#middleBottom {
			z-index:1;
			font-size:16px;
			font-family:visitor;
			padding-top:5px;
			padding-bottom:5px;
		}
			#timers {
				padding-bottom:20px;
			}
			
				#record-timer {
					color:#0d0;
					text-shadow:#0d0 0px 0px 5px;
				}
				#current-timer {
					color:#d90;
					text-shadow:#d90 0px 0px 5px;
				}
		
			#volumeControl {
				width:90%;
			}

	#leftSide, #middle, #rightSide {
		height:calc(100vh - 22px);
		position:relative;
		text-align:center;
		box-sizing:border-box;
		font-size:5vw;
		text-shadow:#fff 0px 0px .3vw;
		flex-grow:1;
		/* transition:width 2s; */ /* Gets set at #flexContainer div */
		overflow:hidden;
	}
	
	.teamTitle {
		z-index:10;
	}
	
	@keyframes blurryLava {
		0% {filter:blur(6px)}
		20% {filter:blur(4px)}
		40% {filter:blur(16px)}
		60% {filter:blur(0px)}
		80% {filter:blur(0px)}
		100% {filter:blur(22px)}
	}
	
	#leftLava, #rightLava {
		position:absolute;
		top:0px;
		left:0px;
		height:200%;
		width:100%;
		transform:rotateX(75deg);
		transform-origin: 50% 33%;
		background-image:url("lavaseamless.jpg");
		z-index:-4;
		/*animation:blurryLava 16s ease 0s infinite alternate;*/
	}
	
	.lavaGradient {
		position:absolute;
		top:-4px;
		left:0px;
		height:100%;
		width:100%;
		background: -moz-linear-gradient(top, rgba(17,5,0,1) 0%, rgba(17,5,0,0) 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(17,5,0,1)), color-stop(100%,rgba(17,5,0,0)));
		background: -webkit-linear-gradient(top, rgba(17,5,0,1) 0%,rgba(17,5,0,0) 100%);
		background: -o-linear-gradient(top, rgba(17,5,0,1) 0%,rgba(17,5,0,0) 100%);
		background: -ms-linear-gradient(top, rgba(17,5,0,1) 0%,rgba(17,5,0,0) 100%);
		background: linear-gradient(to bottom, rgba(17,5,0,1) 0%,rgba(17,5,0,0) 100%);
	}
	
	#leftTrack, #rightTrack {
		position:absolute;
		bottom:0px;
		left:0px;
		height:400%;
		margin-top:-320%;
		width:200%;
		margin-left:-50%;
		transform:matrix3d(1,0,0.00,0,0.00,1,0.00,-.0011,0,0,1,0,0,0,0,1);
		transform-origin: 50% 100%;
		background-image:url("train_track_03.png");
		background-position:center;
		background-repeat:repeat-y;
		z-index:-2;
		transition:transform 1s;
		/*animation:blurryLava 16s ease 0s infinite alternate;*/
	}
	
	.trackGradient {
		height:50%;
		background: -moz-linear-gradient(top, rgba(17,5,0,1) 0%, rgba(17,5,0,0) 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(17,5,0,1)), color-stop(100%,rgba(17,5,0,0)));
		background: -webkit-linear-gradient(top, rgba(17,5,0,1) 0%,rgba(17,5,0,0) 100%);
		background: -o-linear-gradient(top, rgba(17,5,0,1) 0%,rgba(17,5,0,0) 100%);
		background: -ms-linear-gradient(top, rgba(17,5,0,1) 0%,rgba(17,5,0,0) 100%);
		background: linear-gradient(to bottom, rgba(17,5,0,1) 0%,rgba(17,5,0,0) 100%);
	}
	
	#pseudoTrackLeft {
		position:absolute;
		bottom:0px;
		left:0px;
		height:400%;
		margin-top:-320%;
		width:200%;
		margin-left:-50%;
		transform:matrix3d(1,0,0.00,0,0.00,1,0.00,-.0011,0,0,1,0,0,0,0,1);
		transform-origin: 50% 100%;
		z-index:-2;
		opacity:.5;
		transition:transform 1s;
		background-image:url("goal.png");
		background-repeat:repeat-x;
		background-position:0% -50%;
	}
		
		#leftEndingWall, #rightEndingWall{
			font-family:Arial;
			width:100%;
			height:200%;
			position:absolute;
			opacity:0;
			top:0%;
			left:0px;
			transform:matrix3d(1,0,0.00,0,0.00,1,0.00,.00022,0,0,1,0,0,0,0,1);
			transform-origin: 50% 0%;
			/*background-image:url("concrete_wall.jpg");*/
			background-position:center;
			background-repeat:repeat;
			mask: url("#masking");
			color:#000;
			overflow:hidden;
		}
	
	#leftInfo, #rightInfo {
		position:absolute;
		top:0px;
		font-size:14px;
		font-family:visitor;
		text-align:left;
	}
	
	#leftInfo {left:0px;}
	#rightInfo {right:0px;}

	#credits {
		display:flex;
		justify-content:space-around;
		align-self:flex-end;
		padding:2px;
		font-size:16px;
		width:100vw;
		height:24px;
		box-sizing:border-box;
		text-align:center;
		background-color:#000;
		font-family:visitor;
		z-index:100;
	}
	
	canvas {
		position:absolute;
		top:0px;
		left:0px;
		height:100%;
		width:100%;
		z-index:-1;
	}


@keyframes overlayStart {
	0% {font-size:0vw; text-shadow:#a30 0vw 0vw 0px;}
	10%	{font-size:14vw; text-shadow:#a30 .48vw .48vw 0px;}
	49%	{font-size:15vw; text-shadow:#a30 .5vw .5vw 0px;}
	50% {font-size:0vw; text-shadow:#a30 0vw 0vw 0px;}
	60%	{font-size:28vw; text-shadow:#a30 .7vw .7vw 0px;}
	85% {filter:blur(0px); opacity:1;}
	99%	{font-size:30vw; text-shadow:#a30 .8vw .8vw 0px;}
	100% {font-size:0vw; text-shadow:#a30 0vw 0vw 0px; filter:blur(20px); opacity:0;}
}
	
#overlay {
	width:100vw;
	box-sizing:border-box;
	margin-top:10vw;
	position:absolute;
	top:0px;
	left:0px;
	color:#f90;
	font-size:15vw;
	text-align:center;
	text-shadow:#a30 .5vw .5vw 0px;
}
	
#menuOverlay {
	width:100vw;
	height:100vw;
	box-sizing:border-box;
	position:absolute;
	top:0px;
	left:0px;
	background-color:rgba(0,0,0,.5);
	z-index:10;
}

#menu {
	width:80vw;
	height:80vh;
	margin:100px 10vw;
	background-color:#222;
	box-shadow:#000 0px 0px 15px;
	font-family:"Exo 2";
	text-align:center;
}

#menu h1 {
	font-family:"mario";
	color:#f90;
	text-shadow:#a30 3px 5px 0px;
}

#menu hr {
	margin-left:64px;
	margin-right:64px; /* Super Margin 64. Ah forget it. */
	margin-bottom:32px;
	border-left:none;
	border-right:none;
	border-top:1px solid #111;
	border-bottom:1px solid #363636;
}

#menuScreens {
	display:flex;
	overflow:hidden;
}

	.menuScreen {
		transition:margin .8s;
		min-width:100%;
	}

	.menuScreen h4 {
		display:block;
	}

	.menuScreen p {
		font-size:16px;
		margin-bottom:64px;
		color:#666;
	}

	.menuScreen button {
		display:inline-block;
		cursor:pointer;
		border:none;
		background-color:#191919;
		border-bottom:#111 solid 2px;
		color:#fff;
		font-family:"Exo 2";
	}

	#menuScreenA {
		/* flex:1; */
	}

	#menuScreenA button,
	#menuScreenB button {
		font-size:1em;
		margin:16px 64px;
		padding:16px;
		width:45%;
	}

	#menuScreenA button i,
	#menuScreenB button i {
		float:left;
	}

	#menuScreenA button:hover,
	#menuScreenB button:hover {
		background-color:#b60;
		border-bottom:#930 solid 2px;
		box-shadow:#b60 0px 0px 25px;
	}

	#menuScreenA button:active,
	#menuScreenB button:active {
		background-color:#a50;
		border-bottom:#620 solid 1px;
		margin-top:17px;
		box-shadow:#c70 0px 0px 25px;
	}

	#menuScreenB {
		/* flex:0; */
	}


#leftSide input, #rightSide input {
	display:none;
}