body {
    padding: 0;
    margin: 0;
    background: radial-gradient(#6FCE6A, #036B22);
}

#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: #00803C }
*/
#unity-canvas { background: radial-gradient(#6FCE6A, #036B22); }

.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: 401px; height: 401px; background: url('logo.png') no-repeat center; background-size: cover; }

#unity-progress-bar-empty {
    width: 401px;
    height: 105px;
    background: url('progress-bar-border.png') no-repeat center; background-size: cover; 
    position: relative;

    z-index: 1;
}

#progress-bar-wrapper {
    z-index: 2;

    position: absolute;
    top: 55%;
    transform: translateY(-55%);

    left: 98px;

    height: 41px;
    width: 303px;

    clip: rect(0px, 303px, 41px, 0px);
}

#unity-progress-bar-full {
    position: absolute;
    right: 25%;
    transform: translateX(-25%);

    width: 100%;
    height: 100%;
    background: url('progress-bar-inner.png') no-repeat center; background-size: cover; 
}

#unity-progress-bar-foreground {
    position: absolute;
    left: 10px;
    bottom: 20px;

    z-index: 3;

    height: 110px;
    width: 110px;

    background: url('progress-bar-foreground.png') no-repeat center; background-size: cover;
}