#unity-container { position: absolute }
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.unity-mobile { width: 100%; height: 100% }
#unity-canvas { background: #231F20; }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo {  width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; 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-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 { filter: invert(1); 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 }

* {
  font-family: 'Roboto Mono', monospace;
}

body { padding: 0; margin: 0;
  background-image: url(./background2.webp);
  background-repeat: none;
  background-position: bottom;
  background-size: cover;
  background-color:  rgb(13, 12, 12); 
}


#unity-canvas { background: #231F20; 
  border: 2px solid rgba(50, 46, 165, 0.437);
  border-radius: 7px;
  filter: drop-shadow(0 0 20px rgba(133, 81, 197, 0.576));
}

#unity-container.unity-desktop { left: 50%; top: 59.4%; transform: translate(-50%, -50%) }

.content { 
  width: 85%;
  clear: both;
  margin: 0 auto; 
  color: white;
}

.content h1 {
  font-size: calc(2.2rem + 1.0vw);
  color: rgba(189, 192, 0, 0.763);
  -webkit-text-stroke-width: 0.6px;
  -webkit-text-stroke-color: rgb(255, 255, 255);
  filter: drop-shadow(0 0 30px rgba(179, 224, 217, 0.804));
  text-align: center;
}

.content p {
  font-size: calc(1.0rem + 0.2vw);
  margin-top: 30px;
}

.content p strong { color: rgb(203, 240, 17); }

#unity-fullscreen-button { 
  width: 60%;
  margin: 0 auto;
  border: 2px solid rgba(144, 200, 190, 0.687);
  border-radius: 7px;
  background-color: rgb(9, 143, 63);
  text-align: center;  
  padding: 10px;
 }

.footer {
  padding: 20px 0px;
}

#unity-fullscreen-button,
.footer { 
  margin-top: 1.1rem;
  transform: scale(1.0);
  transition: transform 0.3s ease-in-out;

}

#unity-fullscreen-button:hover,
.footer:hover {
  transform: scale(1.2);
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.549));
  transition: 0.5s;
}

.footer img {
  width: 40px;
  display: block;
  aspect-ratio: 1/1;
  filter:invert(1);
  margin: 0 auto;
  border: 0;
  margin-bottom: 2px;
}

.footer p {
  font-size: clamp(1.0rem, 1.1vw, 1.2rem);    
  text-align: center;
  margin: 0 auto;
}

.footer a:link,
.footer a:visited {
  color: #f4f5f6e1 !important;
  text-decoration: none !important;
}