body { padding: 0; margin: 0; background: #03081e }
#unity-container { position: absolute }
#unity-container.desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.mobile { width: 100%; height: 100% }
.mobile #canvas { width: 100%; height: 100% }
#loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#logo { width: 310px; height: 316px; }
#progress-bar { position: relative }
#progress-bar > div > div { display: inline-block; background-size: cover; transition: opacity 0.5s; }
#progress-on { position: absolute; top: 0px; left: -2px; width: 100%; white-space: nowrap; text-align: center; }
.chain-top-bg { width: 54px; height: 31px; margin-left: -21px; background: url('/img/web/chain_dark_1.png') }
.chain-top-bg:first-child { width: 60px; height: 32px; margin-left: 0px; margin-right: -3px; background: url('/img/web/chain_dark_3.png') }
.chain-bottom-bg { width: 60px; height: 32px; margin-left: -44px; margin-bottom: -23px; background: url('/img/web/chain_dark_2.png') }
.chain-top { width: 54px; height: 31px; margin-left: -21px; background: url('/img/web/chain_light_1.png') }
.chain-top:first-child { width: 60px; height: 32px; margin-left: 0px; margin-right: -3px; background: url('/img/web/chain_light_3.png') }
.chain-bottom { width: 60px; height: 32px; margin-left: -44px; margin-bottom: -23px; background: url('/img/web/chain_light_2.png') }
#footer { position: relative }
.mobile #footer { display: none }
#fullscreen-button { float: right; width: 38px; height: 38px; background: url('/img/web/fullscreen-button2.png') no-repeat center; background-size: cover; cursor: pointer; transition: opacity 2s; }
#warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }
#progress-text { width: 100%; margin-top: 58px; text-align: center; font-family: Athelas-Bold; font-size: 38px; color: white }