*{ box-sizing: border-box; margin :0; padding: 0;}
body{ font-family: Sanchez, sans-serif; background-color: #010c20; color: #fafafa; padding: 20px; overflow: hidden; }
canvas{ }
h1{ font-weight: 300; font-style: italic; font-size: 24px;}
#time{ position: absolute; left: 0; top: 0; color : #ff00ff; z-index: 10}
#camera{ position: absolute; left: 0; top: 18px; color : #ff00ff; z-index: 10}
#spectrumCanvas{ position: absolute; right: 0; top: 0; z-index: 10;}
#credits{ width: 100%; max-width: 1024px; height: 100%; max-height: 768px; background-image: url(assets/overlay.png); background-size: contain; background-repeat: no-repeat; position: absolute;left: 50%; top: 50%; transform: translate3d( -50%, -50%, 0 ); background-position: 50% 50%; pointer-events: none; -webkit-transform: translate3d(-50%, -50%, 0 ); opacity: 0.01; z-index: 10;}
#intro{ width: 100%; max-width: 128px; height: 100%; max-height: 128px; background-image: url(assets/intro.png); background-size: contain; background-repeat: no-repeat; position: absolute;left: 50%; top: 50%; transform: translate3d( -50%, -50%, 0 ); background-position: 50% 50%; pointer-events: none; -webkit-transform: translate3d(-50%, -50%, 0 ); pointer-events: none; transition: opacity 1000ms ease-out}
#loading, #ready{ position: absolute; left: 0; top: 50%; margin-top: 80px; right: 0; text-align: center; z-index: 10; white-space: pre; pointer-events:none; transition: opacity 1000ms ease-out}
#ready{ opacity: 0 ;}
.player{ position: absolute; right: 25px; width: calc( 100% - 50px); left: 25px; bottom: 25px; opacity: 0; transition: opacity 500ms ease-out }
.visible{ opacity: 1; transition: opacity 150ms ease-out;}
#start{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 100; display: none;}