@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&900&display=swap');
body { padding: 0; margin: 0 }
#unity-container { position: absolute }
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.unity-mobile { position: fixed; width: 100%; height: 100% }
#unity-canvas { background: #F1F1F4 }
#text-canvas { position: absolute; z-index: 0; font-family: Montserrat, Arial, sans-serif;}
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: absolute; left: 50%; top: 53%; transform: translate(-50%, -50%); display: none; width:258px; height:336px; background: white; border: 2px solid black; border-radius: 22px;}
#unity-logo { width: 100%; 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 { 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 }



.loader-container{ position: absolute; width:100%;border-radius: 22px 22px 0px 0px;display: flex;flex-direction: column;justify-content: center;}

.loader {
    width: 5em;
    height: 5em;
    font-size: 10px;
    position: relative;
    /* display: flex; */
	display: flex;flex-direction: top;justify-content: space-around;margin: 0 auto;
    align-items: center;
    justify-content: center;
}

.loader .face {
    position: absolute;
    border-radius: 50%;
    border-style: solid;
    animation: animate 3s linear infinite;
}

.loader .face:nth-child(1) {
    width: 100%;
    height: 100%;
    color: #EC7700;
    border-color: currentColor transparent transparent currentColor;
    border-width: 0.3em 0.3em 0em 0em;
    --deg: -45deg;
    animation-direction: normal;
}

@keyframes animate {
    to {
        transform: rotate(1turn);
    }
}




.unity-logo{
  height: 80px;
  width: 80px;
  background-color: #f06033;
  position: absolute;
}

#tips-container{
  font-family:Arial;
  font-size: 14px;
  text-align: center;
  height: 100px;
  width: 100%;
  background: #F1F1F4;
  overflow:hidden;
  border: 2px black solid;
  border-width: 2px 0px 0px 0px;
  border-radius: 0px 0px 20px 20px;
  position:absolute;
  bottom:0px;
}

/* unvisited link */
a:link {
  color: #EC7700;
  text-decoration: none;
}

/* visited link */
a:visited {
  color: #EC7700;
  text-decoration: none;
}

/* mouse over link */
a:hover {
  color: #636466;
  text-decoration: none;
}

/* selected link */
a:active {
  color: #EC7700;
  text-decoration: none;
}




/*Carousel*/
.mySlides {display: none;}
.mySlides p {/* vertical-align: middle;  */text-align:center; margin-left:10px; margin-right: 10px;}

/* Slideshow container */
.slideshow-container {
  /*max-width: 1000px;*/
  position: relative;
  bottom:0px;
  top:15px;
  margin: auto;
}

.dot-container
{ 
  width:100%; 
  position:absolute;
  bottom:6px;
}

/* The dots/bullets/indicators */
.dot {
  height: 8px;
  width: 8px;
  margin: 0 6px;
  background-color: #DADCDE;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #636466;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 10px}
}