:root {
  --black0: #ffffff;
  --black100: #ebedef;

  --vh: 1vh;

  /* consumer app variable definition with important overrides blocks library definitions */
  --fontHeading300: "fontHeading300" !important;
  --fontHeading500: "fontHeading500" !important;
  --fontHeading600: "fontHeading600" !important;
  --fontBody400: "fontBody400" !important;
  --fontBody500: "fontBody500" !important;
  --fontBody600: "fontBody600" !important;
}

* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
  position: fixed;
  overflow: hidden;
  visibility: visible;

  font-family: var(--fontBody400), "Helvetica", sans-serif;
}

#guiContainer {
  visibility: visible;
  z-index: 6;
  width: 100vw;
  height: calc(var(--vh) * 100);
}

#guiContainer,
#offscreenIndicatorContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: calc(var(--vh) * 100);
  z-index: 6;
  pointer-events: none;
}

#portal {
  position: fixed;
  width: 100%;
  z-index: 1001;
}

#root {
  position: absolute;
  visibility: visible;
  width: 100vw;
  height: calc(var(--vh) * 100);
  z-index: 1000;
}

.landing-page-loader {
  font-size: 40px;
  font-family: var(--fontHeading600);
  background: linear-gradient(to right, #fff 50%, #545454 50%);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fillAnimation 2s infinite;
  line-height: 1.5;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.landing-page-loader:before {
  content: "Loading";
}

@keyframes fillAnimation {
  0% {
    background-position: 100% 100%;
  }
}

.hero-image {
  height: 360px;

  width: 100%;
  margin-bottom: 16px;

  border: 1px solid var(--black100);
  border-radius: 16px;

  background-position: center;
  background-repeat: no-repeat;
}

.indicatorArrow {
  display: inline-block;
  font-size: 48px;
  font-weight: bold;
  transform: scale(0.5, 1);
  user-select: none;
}

.landing-loader {
  display: flex;
  align-items: flex-end;
  gap: 12px;

  margin: 24px 0 16px 0;
}

.landing-loader img {
  height: 52px;
  width: 52px;

  background: transparent;
}

.pixiContainer canvas {
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-select: none;
}

.pixiContainer {
  height: calc(var(--vh, 1vh) * 100);
  width: 100vw;
  background: transparent;
  padding-left: 48px;

  opacity: 0;
}

.pixi-transition-in {
  animation: pixi-transition-in 2000ms;
  animation-timing-function: ease-in;
}
.pixi-transition-out {
  animation: pixi-transition-out 2000ms;
  animation-timing-function: ease-out;
}

.container-transition-out {
  animation: pixi-transition-out 2000ms forwards;
  animation-timing-function: ease-out;
}

div#stats {
  position: fixed;
  top: 50px;
  left: 48px;
  z-index: 500;
  width: max(200px, 10vw, 10vh);
  height: max(100px, 6vh, 6vw);
  opacity: 0.8;
  user-select: none;
}

div#stats canvas {
  display: block !important;
}

.world-title {
  font-size: 1.875rem;
  font-family: var(--fontHeading500, --fontHeadingDefault500);
  line-height: 1.2;
}

.world-url {
  font-family: var(--fontBody400, --fontBodyDefault400);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 1;
}

@media (max-width: 640px) {
  #titleWrapper {
    top: calc(50% - 56px / 2);
  }

  .hero-image {
    height: 200px;
  }

  .landing-page-mock-modal {
    padding: 12px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .landing-page-mock-modal-wrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .pixiContainer {
    padding-left: 0;
  }
}

@media (max-width: 720px) {
  .world-title {
    font-size: 1.5625rem;
  }
}

@keyframes pixi-transition-in {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

@keyframes pixi-transition-out {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}