﻿.unity-container.desktop, .unity-container.handheld {
    height: 100%;
    aspect-ratio: 9 / 16;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url('../img/bg2.png');
    background-size:contain;
    background-repeat: no-repeat;
}

html, body {
    height: 100%;
    width: 100%;
    overflow-y: hidden;
}

body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#unity-canvas{
    height: 100%;
    width: 100%;
}

.logo{
    display: flex;
    align-content: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

#logo-text{
    margin-top: 10%;
    color: lightyellow;
    font-size: 30px;
    font-family: fantasy;
}

#rotateLogo{
    margin-top: 20%;
    height: 50%;
    width: 50%;
    animation: pulse-picture 3s infinite linear;
}

@keyframes pulse-picture {
    0%{
        transform: scale(70%);
    }
    50%{
        transform: scale(100%);
    }
    100%{
        transform: scale(70%);
    }
}

#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('../img/progress-bar-empty-dark.png') no-repeat center ; display: none !important }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('../img/progress-bar-full-dark.png') no-repeat center ; display: none !important }
