@font-face 														{ font-family: "matrix"; src: url("/assets/fonts/matrix.otf"); }
	
	body 															{ padding:0; margin:0; background:#000; font-family: arial; min-width: 320px; z-index: 1; position: relative; }

		#matrix_canvas 												{ display: block; min-width: 320px; min-height: 480px; opacity:0; -webkit-transition: opacity 3s ease; transition: opacity 3s ease; }

		#controls 													{ position: absolute; z-index: 10; width: calc(100% - 30px); top:0; left:0; text-align: center; opacity: .7; padding: 8px 15px 5px 15px; background-color: #000; -webkit-transition: top 1s ease; transition: top 1s ease; }
		#controls button 											{ font-family: sans-serif; background: #000; margin-bottom: 10px; border:1px solid #222; box-shadow: #000 0px 0px 10px; -webkit-box-shadow: #000 0px 0px 0px; -moz-box-shadow: #000 0px 0px 0px; padding: 6px 14px; color: #eee; font-weight: 500; cursor: pointer; }
		#controls button:focus 										{ outline:none; }
		#controls button:hover 										{ background-color: #222; }
		#controls button.red 										{ border-left:3px solid #ff0000; }
		#controls button.green 										{ border-left:3px solid #00ff00; }
		#controls button.blue 										{ border-left:3px solid #0000ff; }
		#controls button.rotate 									{ border-left:3px solid #ffff00; }

		#speed_metrics_container 									{ display: inline-block; font-family: sans-serif; font-size: 18px; font-weight: 500; padding: 6px 8px 0 8px; vertical-align: top; color: #eee; }

		.show_controls 												{ position: absolute; right:2px; top:1px; z-index: 1; color: #444; opacity: .7; font-size: 18px; }