@font-face {
    font-family: 'DRPublik';
    src: url('DRPublik-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

body { padding: 0; margin: 0; font-family: 'DRPublik', sans-serif; }
#unity-container { position: fixed; width: 100dvw; height: 100dvh; }
#unity-canvas { width: 100%; height: 100%; background: url('background.jpg') no-repeat center center; background-size: cover; touch-action: none; }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-progress-bar-empty { margin-left: auto; margin-right: auto; width: 141px; height: 18px; margin-top: 10px; 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-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }
#logo { position: absolute; left: 50%; top: -100%; transform: translate(-50%); width: auto; height: 100px;  }
#loading-text { position: absolute; left: 50%; top: 110%; transform: translate(-50%, -50%); color: white; font-size: 20px; font-weight: bold; text-wrap: nowrap; overflow-x: visible; }
#loading-text .dot {
    opacity: 0;
    animation: dotAnimation 1.4s infinite;
}

#loading-text .dot:nth-child(2) {
    animation-delay: 0.2s;
}

#loading-text .dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes dotAnimation {
    0%, 20% {
        opacity: 0;
        transform: translateY(0);
    }
    50% {
        opacity: 1;
        transform: translateY(-4px);
    }
    80%, 100% {
        opacity: 0;
        transform: translateY(0);
    }
}

:root {
  --c1: hsl(3,90%,55%);
  --c2: hsl(33,90%,55%);
  --c3: hsl(223,90%,55%);
}

.pl1 {
  display: flex;
  justify-content: space-around;
  margin: 0 auto 20px;
  width: 6em;
  height: 6em;
}

.pl1__a, .pl1__b, .pl1__c {
  background: var(--c1);
  border-radius: 50%;
  width: 1em;
  height: 1em;
  transform-origin: 50% 100%;
  animation: bounce1 1s linear infinite;
}

.pl1__b {
  background: var(--c2);
  animation-delay: 0.1s;
}

.pl1__c {
  background: var(--c3);
  animation-delay: 0.2s;
}

@keyframes bounce1 {
  from, to {
    transform: translateY(0) scale(1,1);
    animation-timing-function: ease-in;
  }
  45% {
    transform: translateY(5em) scale(1,1);
    animation-timing-function: linear;
  }
  50% {
    transform: translateY(5em) scale(1.5,0.5);
    animation-timing-function: linear;
  }
  55% {
    transform: translateY(5em) scale(1,1);
    animation-timing-function: ease-out;
  }
}