:root{
  --logo-width: min(80vw, 400px, 80vh);
  --progress-percentage: 0.1;
}

* {
  box-sizing: border-box;
  user-select: none;
}

html,
body {
  height: 100%;
}

body {
  width: 100%;
  padding: 0;
  margin: 0;
  background: #000;
}

#scroll {
  width: 100%;
  height: 2000px;
  position: absolute;
   display: none;
}

#loading {
  position: fixed;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
}
.main {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/*#loading .main {
  height: 76vh;
  margin: 12vh 0;
}*/

.videoLogo {
  margin: -4vh 0;
  z-index: -10;
}

.videoLogo > video {
  width: 100%;
  object-fit: contain;
  height: 60vh;
}
.column0{grid-column: column0}
.row0{grid-row: row0}
.progress {
  /* display: inline-block;
  width: 55vw;
  height: 10px;
  margin: 1vh 35px;
  border-radius: 20px;
  border: 2px solid;
  border-color: #1f1c1f; */
  display: grid;
  grid-template-columns: [column0] auto;
  grid-template-rows: [row0] auto;
}
.hero_children{
  grid-row: row0;
  grid-column: column0
}

.powered {
  margin-bottom: 10vh;
  margin-top: 10vh;
  height: 300px;
}
#powered-logo{
  width: 25vw;
}

.bar {
  border-radius: 20px;
  width: 0%;
  height: 0;
  transition: width;
  transition-duration: 1s;
  transition-timing-function: cubic-bezier(.36,.55,.63,.48);
}
.shadow {
  box-shadow: 0px 45px 50px rgba(0, 0, 0, 0.25);
}
.loader {
  background-color: transparent;
  /* height: 100vh; */
  overflow: hidden;
}

#external_game_popup {
  background-color: rgba(0,0,0,0.8);
  width: 100vw;
  height: 100vh;
  position: absolute;
  display: flex;
  z-index: 10;
  font-family: Montserrat, sans-serif;
}

#popup_content {
  display: flex;
  flex-flow: column;
  justify-content: center;
  width: calc(100vw / 2);
  height: calc(100vh / 2);
  max-height: 400px;
  max-width: 600px;
  margin: auto;
}

#popup_buttons {
  display: flex;
}

#popup_message {
  margin: 20px auto;
  color: white;
  font-size: 18px;
  text-align: center;
}

.popup_button {
  margin: 10px auto;
  border: 3px solid;
  border-radius: 20px;
  background-color: black;
  color: white;
  padding: 10px;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
  min-width: 60px;
  min-height: 60px;
  display: block;
}
.popup_button.home_button,
.popup_button.adjust_button,
.popup_button.reload_button,
.popup_button.deposit_button,
.popup_button.ok_button {
  width: 150px;
  background-position: center;
  background-size: 40px;
  background-repeat: no-repeat;
}

.hide {
  display: none !important;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  animation: fadeOut 2s;
}

@keyframes fadeOutRemove {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    display: none;
  }
}

.fadeOutRemove {
  animation: fadeOut 1s;
}

.wrapper {
  height: 100vh;
  display: flex;
  align-items: center;
}

/*.hero {
  min-height: 10vh;
  padding: clamp(1rem, 2vw, 5rem);
  display: flex;
  align-items: center;
}*/
#image_logo, #image_logo_contour {
  width: 30vw;
}
#powered_text {
  color: rgba(5, 5, 5);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 40px;
  text-align: center;
}
.loadingContainer {
  position: relative;
  height: 60vh;
}
#logo_gif, .progress-circle-wrapper, .svg_image{
  width: var(--logo-width);
  height: var(--logo-width);
}

.circular-progress {
  --size: 400px;
  --half-size: calc(var(--size) / 2);
  --stroke-width: 3px;
  --radius: calc((var(--size) - var(--stroke-width)) / 2);
  --circumference: calc(var(--radius) * pi * 2);
  --dash: calc((var(--progress-percentage) * var(--circumference)) / 100);
  /* animation: progress-animation 5s linear 0s 1 forwards; */
}
.circular-progress circle {
  cx: var(--half-size);
  cy: var(--half-size);
  r: var(--radius);
  stroke-width: var(--stroke-width);
  fill: none;
  stroke-linecap: round;
}
.circular-progress circle.fg {
  transform: rotate(-90deg);
  transform-origin: var(--half-size) var(--half-size);
  stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
  transition: stroke-dasharray 0.3s linear 0s;
  stroke: white;
}
@-webkit-keyframes rot {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes rot {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
#logo_arrows {
  -webkit-animation: rot 10s linear infinite;
  animation: rot 10s linear infinite;
}