body { padding: 0; margin: 0; background: #222342; }
#unity-container { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-canvas { background-image: url("splash.jpg");   background-position: 50% 22%; background-repeat: no-repeat; background-size: cover; width: 100vw; max-width: min(0.75*100vh, 100vw); height: 100vh; max-height: min(1.9*100vw, 100vh)}
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; height: 100%;  width: 100% }
#unity-progress-bar-empty { position: absolute; left: 50%; bottom: 35%; transform: translate(-50%, -50%); width: 141px; height: 18px; margin-right: auto;  margin-bottom: 20px; background: url('progress-bar-empty-light.png') no-repeat center }
#unity-progress-bar-full { width: 80%; max-width: 98%; height: 14px; margin: 2px; background: url('progress-bar-full-dark.png') no-repeat center; opacity: 0.8; }
#unity-footer { position: relative }
.unity-mobile #unity-footer { display: none }
#unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
#unity-fullscreen-button { cursor:pointer; float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }
#company-logo { position: absolute; left: 50%; bottom: 19%; transform: translate(-50%, 50%);  margin-bottom: 20px}
#logo-img {  max-width: 30vw; max-height: 20vh;}
#socials { color: #FFFFFF; font-family: "Helvetica"; font-size: 0.9em; position: absolute; left: 50%;bottom: 10%;  transform: translate(-50%, 50%); display: flex; align-items: center; gap: 10px }
.socials-img { width: max(28px, 4vh)} 
#notice { font-family: "Helvetica"; text-align: center; color: #FFFFFF; font-size: 1.125em; width: 85%; position: absolute; left: 50%; bottom: 33%; transform: translate(-50%, 50%);}

@media only screen and (max-height: 420px) and (min-width: 640px) {
    #company-logo { position: absolute; left: 0%; bottom: 10%; transform: translate(0%, 65%)}
    #socials{position: absolute; left: 100%; bottom: 10%; transform: translate(-100%, 55%); width: 25%;}
    #unity-progress-bar-empty { position: absolute; left: 50%; bottom: 10%; }
  }