body { padding: 0; margin: 0 }
#unity-container { position: absolute }
#unity-container.unity-desktop { height: 100vh; left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.unity-mobile { height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-canvas { background: #231F20 }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 200px; height: 200px; background: url('logo.png') no-repeat center }
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 29.5px; background: url('progress-bar-empty-dark.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
#unity-logo-bottom { width: 300px; height: 100px; position: absolute; bottom: -200px; left: 50%; transform: translate(-50%); background: url('logo-bottom.png') no-repeat center }
.letter { animation: bounce 0.55s cubic-bezier(0.05, 0, 0.2, 1) infinite alternate; display: inline-block; transform: translate3d(0, 0, 0); text-shadow: rgba(255, 255, 255, 0.4) 0 0 0.05em; font: normal 500 1.3rem 'Varela Round', sans-serif; }
.letter:nth-child(1) { animation-delay: 0s; }
.letter:nth-child(2) { animation-delay: 0.0833333333s; }
.letter:nth-child(3) { animation-delay: 0.1666666667s; }
.letter:nth-child(4) { animation-delay: 0.15s; }
.letter:nth-child(5) { animation-delay: 0.1333333333s; }
@keyframes bounce { 0% { transform: translate3d(0, 0, 0); text-shadow: rgba(255, 255, 255, 0.4) 0 0 0.05em; } 100% { transform: translate3d(0, -0.3em, 0); text-shadow: rgba(255, 255, 255, 0.4) 0 1em 0.35em; } }