/* Platform specific styles */

#preloader {
    position: absolute;
    z-index: 100500;
    left: 0; right: 0; top: 0; bottom: 0;
}

#preloader .logo {
    --logo-size: min(80vw, 50vh);
    position: absolute;
    width: var(--logo-size); height: var(--logo-size);
    left: calc(50vw - 0.5 * var(--logo-size)); top: 20vh;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(images/logo_d1d31b96e8d2b9e0983d.png);
}

@media (orientation: landscape) {
    #preloader .logo {
        width: 60vh; height: 60vh;
        left: calc(50vw - 30vh); top: 10vh;
    }
}

#preloader progress {
    position: absolute;
    width: 50vw; height: 2vh;
    left: 25vw; top: 80vh;
}
@font-face {
    font-family: "PTSans";
    font-style: normal;
    font-weight: 700;
    /*font-display: swap;*/
    src: url(e65781d10be7549b781a.otf) format("otf");
}

html,
body {
    padding: 0;
    margin: 0;
    background: #ffffff;
    overflow: hidden;
    font-family: "PTSans-Regular", serif;
}

body {
    position: relative;
    width: 100vw;
    height: 100vh;
}

#game {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
    background: linear-gradient(
        0deg,
        rgba(250, 250, 250, 1) 50%,
        rgba(234, 227, 237, 1) 100%
    );
}

#game > canvas {
    position: absolute;
    left: 0;
    top: 0;
}

#canvas-3d {
    pointer-events: none;
}

progress[value] {
    --color: #ae81c3; /* the progress color */
    --background: #dedde1; /* the background color */
    --border-radius: 10em;

    border: none; /* Firefox add a default border */
    width: 50vw;
    border-radius: var(--border-radius);
    background: var(--background);
}
progress[value]::-moz-progress-bar {
    border-radius: var(--border-radius);
    background: var(--color);
}
progress[value]::-webkit-progress-bar {
    border-radius: var(--border-radius);
    background: var(--background);
}
progress[value]::-webkit-progress-value {
    border-radius: var(--border-radius);
    background: var(--color);
}

* {
    -webkit-user-callout: none !important;
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}