body {
    padding: 0;
    margin: 0;
    background: url('marginBackground.png') repeat center;
    background-size: 9%;
}

#unity-container {
    position: absolute
}

#unity-container {
    height: 100%;
    width: auto;
    aspect-ratio: 750 / 1334;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

@media (min-height: 1742px) {
    #unity-container {
        height: auto;
        width: 100%;
        aspect-ratio: 750 / 1334;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}


#unity-canvas {
    width: 100%;
    height: 100%;
    background: url('loadingBack.png') no-repeat center;
    background-size: cover;
}

.c-loading-image{
    position: absolute;
    left: 50%;
    top: 75%;
    width: 100px;
    height: 100px;
    transform: translate(-50%, -50%);
    background: url('loading.png') no-repeat center;
    background-size: cover;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0%   { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

#unity-loading-bar {
    position: absolute;
    left: 50%;
    top: 93.8%;
    width: 400px;
    height: 120px;
    transform: translate(-50%, -50%);
    display: none
}

#unity-progress-bar-back {
    width: 100%;
    height: 100%;
    background: url('progress-bar-back.png') no-repeat center;
    background-size: 100%;
}

#unity-progress-bar-empty {
    position: absolute;
    width: 300px;
    height: 53px;
    top: 10%;
    left: 12%;
    background: url('progress-bar-empty.png') no-repeat center;
    background-size: 100%;
}

#unity-progress-bar-full-block {
    position: absolute;
    width: 96.5%;
    height: 50%;
    top: 25%;
    left: 1.8%;
}

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

.loadingtext {
    position: absolute;
    top: 52%;
    left: 12%;
    font-size: 160%;
    text-align: left;
    font-family: 'RocknRoll One', sans-serif;
    letter-spacing: -0.4px;
    color: #362500;
    opacity: 1;
}

#unity-warning {
    position: absolute;
    left: 50%;
    top: 5%;
    transform: translate(-50%);
    background: white;
    padding: 10px;
    display: none
}

#unity-fullscreen-button {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 5%;
    height: 5%;
    background: url('fullscreen-button.png') no-repeat center;
    background-size: contain;
}

#reload-button {
    position: absolute;
    top: 15.5%;
    left: 2.4%;
    width: 13%;
    height: 13%;
    background: url('cacheClear.png') no-repeat center;
    background-size: contain;
}

#logo {
    position: absolute;
    top: 70%;
    left: 15%;
    width: 68.5%;
    height: 20%;
    background: url('logo.png') no-repeat center;
    background-size: contain;
}