html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden; background:#000;}
canvas {width:100%; height:100%;}

#screen {transition:opacity 1s; width:100vw; height:56.25vw; max-height:100vh; max-width:177.78vh; margin:auto; position:absolute; top:0; bottom:0; left:0; right:0;}
#loading-screen {position:absolute: top:0; left:0; width:100%; height:100%; z-index:1000; background-color:#000; transition:opacity 1s;}
#loading {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); background-color:#000; text-align:center;}
#loading-logo {}
#progress-bar {width:380px; height:40px; background-color:#fc0; margin:50px auto 0; border-radius:16px; overflow:hidden;}
@keyframes animatedBackground {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
}
#progress {width:0%; height:40px; background-color:#f00; background-image:url('res/images/loading-bar-stripes.png');
    background-position: 0 0;
    background-repeat: repeat;
    animation: animatedBackground 3s linear infinite;
}
.opaque {opacity: 1;}
.transparent{opacity: 0;}