index.css

* {
	margin: 0;
	padding: 0;
}

html,body {
	margin: 0;
	padding: 0;
}

html {
	height: 100%;
	width: 100%;
}

body {
	height: 100%;
	width: 100%;
	overflow: hidden;
	background-color: #000000;
	background-image: url(res/background/body_background.jpg);
	font-family: Arial;
	font-size: 100%;
}

#display {
	height: 600px;
	width: 1280px;
	box-shadow: 0 0 200px 200px #1A6300;
	overflow: hidden;
	/*transform: scale(0.5);*/
	position: relative;
	background-color: #000000;
	height: 100%;
	width: 100%;
	cursor: crosshair;
}

#camera, #world {
	backface-visibility: hidden;
    left: 50%;
    position: absolute;
    top: 50%;
}

#camera div {
	position: absolute;
}

#camera div.cube, #camera div.cuboid, #camera, #world {
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
}

@keyframes debugFade {
	from { opacity: 0; color: #FFFFFF }
	to   { opacity: 1; color: #1A6300 } 
}

@keyframes debugAni {
	from { color: #000000 }
	to   { color: #1A6300 } 
}

#debug {
	list-style-type: none;
	font-size: 12px;
	position: absolute;
	left: 30px;
	top: 30px;
	color: #FFFFFF;
	border: 10px solid #1A6300;
	width: 300px;
	/*animation: .2s debugAni infinite;*/
	z-index: 1000000;
	background-color: #1A6300;
	box-shadow: 0 0 2px #000000;
	display: none;
}

#debug:hover {
	animation: .5s debugFade;	
}

#debug li {
	float: left;
	margin: 0 10px;
	width: 300px;
}

@-webkit-keyframes hideInfo1 {
	0%   { top: 0 }
	80%  { top: 0 }
	100% { top: -50%}
}

@-webkit-keyframes fadeOutInfo2 {
	0%   { opacity: 1 }
	80%  { opacity: 1 }
	100% { opacity: 0.5 }
}

#infoSplit1, #infoSplit2 {
	position: absolute;
	left: 0;
	z-index: 10000;
	height: 50%;
	width: 100%;
	background-color: #002AFF;
	background-image: -webkit-linear-gradient(bottom, #002AFF, #001FBF);
	color: #CCCCCC;
	display: block;
}

#infoSplit1 {
	top: -50%;
	-webkit-animation: 3s hideInfo1;
}

#infoSplit2 {
	bottom: 0;
	opacity: 0.5;
	-webkit-animation: 3s fadeOutInfo2;
	transition: 0.5s ease opacity;
}

#infoSplit2:hover {
	opacity: 1;
}

#infoSplit1 div, #infoSplit2 div {
	height: 200px;
	width: 100%;
	position: absolute;
}

#infoSplit1 div {
	bottom: 0;
}

#infoSplit2 div {
	top: 0;
}

#infoSplit1 h1 {
	line-height: 200px;
	cursor: default;
}

#infoSplit2 p {
	line-height: 100px;
	cursor: default;
}

#infoSplit1 h1 {
	text-align: center;
	font-size: 3em;
}

#infoSplit2 p {
	font-size: 1.5em;
	text-align: center;
	border-top: 1px solid #5974FF;
}

@-webkit-keyframes cube_animation1 {
	50% { background-color: blue; border-radius: 90%; opacity: 0.5 }
}

@-webkit-keyframes cube_animation2 {
	50% { background-color: #ff00ee; border-radius: 90%; opacity: 0.5 }
}

@-webkit-keyframes cube_animation3 {
	50% {
		background-size: 32px;
		background:
			radial-gradient(black 10%, transparent 16%) 0 0,
			radial-gradient(black 10%, transparent 16%) 8px 8px,
			radial-gradient(rgba(255,255,255,.1) 15%, transparent 50%) 0 1px,
			radial-gradient(rgba(255,255,255,.1) 15%, transparent 50%) 8px 9px rgba(0, 255, 148, 0.5);
		background-position: 150% 150%;
	}
}

@-webkit-keyframes cube_animation4 {
	50%  { box-shadow: 0 0 50px #FFFFFF; background-color: #000000  }
}

@-webkit-keyframes cube_animation5 {
	25%  { background-color: blue }
	50%  { background-color: red }
	75%  { background-color: yellow }
}

.plane_floor {
	background-color: #eee;
	background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), 
	linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
	background-size: 200px 200px;
	box-shadow: 0 0 20px #FFFFFF;
}

.plane_title {
	color: #d1d100;
	font-weight: bold;
	font-size: 5em;
	text-shadow: 0.05em 0.05em #000000;
	background-color: rgba(0, 206, 72, 0.6);
	text-align: center;
}



.cube_animation1 div {
	-webkit-animation: cube_animation1 6s infinite;
}

.cube_animation2 div {
	-webkit-animation: cube_animation2 3s infinite;
	opacity: 0;
}

.cube_animation3 div {
	background:
		radial-gradient(black 10%, transparent 16%) 0 0,
		radial-gradient(black 10%, transparent 16%) 8px 8px,
		radial-gradient(rgba(255,255,255,.1) 15%, transparent 50%) 0 1px,
		radial-gradient(rgba(255,255,255,.1) 15%, transparent 50%) 8px 9px;
	background-color:#282828;
	background-size:16px 16px;
	background-position: 100%;
	-webkit-animation: cube_animation3 6s infinite;
}

.cube_animation4 div {
	-webkit-animation: cube_animation4 6s infinite;
}

.cube_animation5 div {
	-webkit-animation: cube_animation5 16s infinite;
}

#world div {
	border: 2px solid #CCCCCC;
}