body { padding: 0; margin: 0; background-color: black; overflow: hidden }
#unity-container { position: absolute; }
/*#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }*/
#unity-container.unity-mobile { width: 100%; height: 100% }
#unity-canvas { background: url('loading_bkgd.png'); background-position: center; background-repeat: no-repeat; background-size: cover; }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: absolute; left: 50%; top: 80%; transform: translate(-50%, -50%); display: none }
#unity-progress-bar-empty { width: 250px; height: 5px; border: double white 2px; background: rgb(34 34 34) }
#unity-progress-bar-full { width: 0%; height: 5px; background: white }
#unity-footer { position: relative; }
.unity-mobile #unity-footer { display: none }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }
#intro-video-container, #outro-video-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) }
.video-container { width: 100%; border-radius: 8px; margin: 0 auto; position: relative; display: flex; flex-direction: column; justify-content: center; box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.4); }
.video-wrapper { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
video {  width: 100%; height: 100%; border-radius: 8px; }