// elements style

div[class^="element-"] {
  background-size: contain;
  background-position: bottom;

  .block-link {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
}

.element-dorm1 {
  top: -8em;
  left: 50%;
  margin-left: calc(~"-6em/ 2 - 9em / 2 - 8em - 2em");
  width: 6em;
  height: 17.6875em;
  background: url('/images/tidb-planet/dorm1.svg') no-repeat;
}

.element-dorm2 {
  top: -12em;
  left: 50%;
  margin-left: calc(~"-8em / 2 - 9em / 2 - 3em");
  width: 8em;
  height: 19.6875em;
  background: url('/images/tidb-planet/dorm2.svg') no-repeat;
}

.element-dorm3 {
  top: -15.5em;
  left: 50%;
  margin-left: calc(~"-9em / 2");
  width: 9em;
  height: 21.875em;
  background: url('/images/tidb-planet/dorm3.svg') no-repeat;
}

.element-dorm4 {
  top: -12em;
  left: 50%;
  margin-left: calc(~"-8em / 2 + 9em / 2 + 3em");
  width: 8em;
  height: 19.6875em;
  background: url('/images/tidb-planet/dorm4.svg') no-repeat;
}

.element-dorm5 {
  top: -8em;
  left: 50%;
  margin-left: calc(~"-6em/ 2 + 9em / 2 + 8em + 2em");
  width: 6em;
  height: 17.6875em;
  background: url('/images/tidb-planet/dorm5.svg') no-repeat;
  // background-size: contain;
  // background-position: center;
}

.element-player {
  top: -8em;
  left: 50%;
  margin-left: calc(~"-20.6875em/ 2 - 18em");
  width: 20.6785em;
  height: 17.6875em;
  background: url(/images/tidb-planet/player.svg) no-repeat;
}

.element-radar {
  top: -14em;
  left: 50%;
  margin-left: calc(~"-19.6875em / 2 + 3em");
  width: 24em;
  height: 19.6875em;
  background: url(/images/tidb-planet/radar.svg) no-repeat;
}

.element-rocket {
  top: -15.5em;
  left: 50%;
  margin-left: calc(~"-24.875em / 2 - 5em");
  width: 32.125em;
  height: 24.875em;
  background: url(/images/tidb-planet/rocket.svg) no-repeat;
}

.element-tank {
  top: -7.5em;
  left: 50%;
  margin-left: calc(~"12.5em / 2 + 1em");
  width: 12.125em;
  height: 10.875em;
  background: url(/images/tidb-planet/tank.svg) no-repeat;
}

.element-rider {
  top: -12.5em;
  left: 50%;
  margin-left: calc(~"-24em / 2");
  width: 24em;
  height: 24em;
  background: url(/images/tidb-planet/rider.svg) no-repeat;
}

.element-ufo {
  top: -16em;
  left: 40%;
  margin-left: calc(~"-20em / 2 - 4em");
  width: 20em;
  height: 24.875em;
  background: url(/images/tidb-planet/ufo.svg) no-repeat;
}

.element-robot {
  top: -12em;
  left: 50%;
  margin-left: calc(~"-18em / 2 - 9em");
  width: 18em;
  height: 20em;
  background: url(/images/tidb-planet/robot.svg) no-repeat;
}

.element-qrCode {
  position: absolute;
  display: block;
  top: 3em;
  left: 50%;
  margin-left: calc(~"-10em / 2");
  width: 10em;
  height: 10em;
}

.element-qrCodeFrame {
  top: -12em;
  left: 50%;
  margin-left: calc(~"-16em / 2 + 6em");
  width: 16em;
  z-index: 1;
  height: 20em;
  background: url(/images/tidb-planet/qrCodeFrame.svg) no-repeat;
}

.element-rocket-list {
  top: -15.5em;
  left: 50%;
  margin-left: calc(~"-18em / 2");
  width: 18em;
  height: 24.875em;
  background: url(/images/tidb-planet/rocketNoFrame.svg) no-repeat;
}

.element-rider-list {
  top: -6.5em;
  left: 50%;
  margin-left: calc(~"-10.875em / 2 - 6em");
  width: 6.125em;
  height: 10.875em;
  background: url(/images/tidb-planet/rider.svg) no-repeat;
}

.element-astronaut-list {
  top: -1.5em;
  left: 50%;
  margin-left: calc(~"11.875em / 2 - 5.3em");
  width: 6.125em;
  height: 11.875em;
  background: url(/images/tidb-planet/astronaut.svg) no-repeat;
  z-index: 99;
}

.element-flag-list {
  top: 1.5em;
  left: 50%;
  margin-left: calc(~"8.875em / 2");
  width: 11.125em;
  height: 8.875em;
  background: url(/images/tidb-planet/flag.svg) no-repeat;
}

.element-radar-list {
  top: -4.5em;
  left: 50%;
  margin-left: calc(~"10.875em / 2");
  width: 14.125em;
  height: 10.875em;
  background: url(/images/tidb-planet/radar.svg) no-repeat;
}

.element-dorm5-list {
  top: -3.5em;
  left: 50%;
  margin-left: calc(~"14.875em / 2 + 8em");
  width: 14.875em;
  height: 14.875em;
  background: url(/images/tidb-planet/dorm5.svg) no-repeat;
}

.element-robot-list {
  top: 3.5em;
  left: 50%;
  margin-left: calc(~"-8.875em / 2 - 9em");
  width: 8.875em;
  height: 8.875em;
  background: url(/images/tidb-planet/robot.svg) no-repeat;
}

.element-telescope-list {
  top: 6.5em;
  left: 50%;
  margin-left: calc(~"-5.125em / 2 - 3em");
  width: 5.125em;
  height: 4.875em;
  background: url(/images/tidb-planet/telescope.svg) no-repeat;
}

.element-player-list {
  top: -3.5em;
  left: 50%;
  margin-left: calc(~"-12.875em / 2 - 18em");
  width: 13.125em;
  height: 12.875em;
  background: url(/images/tidb-planet/player.svg) no-repeat;
}

.element-ufo-list {
  top: -12.5em;
  left: 50%;
  margin-left: calc(~"-15.875em / 2 - 14em");
  width: 13.125em;
  height: 15.875em;
  background: url(/images/tidb-planet/ufo.svg) no-repeat;
}

.element-astro-list {
  top: -2.5em;
  left: 50%;
  margin-left: calc(~"-7.875em / 2 - 24em");
  width: 6.125em;
  height: 7.875em;
  background: url(/images/tidb-planet/astro.svg) no-repeat;
}

.element-ellipse {
  top: 30%;
  left: 5%;
  width: 4em;
  height: 4em;
  background: url('/images/tidb-planet/ellipse.svg') no-repeat;
  // z-index: -1;
}

.element-planet {
  top: 30%;
  left: 5%;
  width: 4em;
  height: 4em;
  background: url('/images/tidb-planet/blue-planet.svg') no-repeat;
  // z-index: 2;
}

.element-cloud {
  top: 16%;
  right: 12%;
  width: 13.6em;
  height: 3.8em;
  background: url('/images/tidb-planet/cloud.svg') no-repeat;

  &.large {
    top: 2em;
    left: 6em;
    width: 32em;
    height: 9em;
  }

  &.small {
    top: 10%;
    right: 36%;
    width: 8.5em;
    height: 2.375em;
  }
}

.element-rocks {
  top: 16%;
  right: 8%;
  width: 4em;
  height: 3.8em;
  background: url('/images/tidb-planet/rocks.svg') no-repeat center;
  // background-size: contain;
  // background-position: center;
}

.element-satellite {
  top: 16%;
  right: 35%;
  width: 13.6em;
  height: 3.8em;
  background: url('/images/tidb-planet/satellite.svg') no-repeat center;
  // background-size: contain;
  // background-position: center;
}

.element-star {
  top: 60%;
  right: 9%;
  width: 2em;
  height: 3.8em;
  background: url('/images/tidb-planet/star.svg') no-repeat center;
  // background-size: contain;
  // background-position: center;

  &.small {
    top: 37%;
    left: 12%;
    width: 1em;
    height: 1em;

    &.position2 {
      top: 33%;
      left: 3%;
    }
  }

  &.large {
    top: 5%;
    right: 25%;
    width: 3em;
    height: 3em;
  }

  &.extra-small {
    top: 28%;
    left: 10%;
    width: 0.5em;
    height: 0.5em;
  }
}

.element-arrow {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 50%;
  width: 4em;
  height: 3em;
  line-height: 3em;
  color: #fff;
  font-size: 1.5em;
  text-decoration: none;

  svg {
    width: auto;
    height: 1.3em;
  }
}

.element-arrow-back {
  left: 2%;

  svg {
    transform: rotate(180deg);
    margin-right: 0.5em;
  }
}

.element-arrow-next {
  right: 2%;

  svg {
    margin-left: 0.5em;
  }
}

.animation-twinkle_one {
  animation: twinkle_one 1s ease-in-out infinite alternate;
}

.animation-twinkle_two {
  animation: twinkle_two 2s ease-in-out infinite alternate;
}

.animation-twinkle_three {
  animation: twinkle_three 3s ease-in-out infinite alternate;
}

#meteors {
  margin: 0 auto;
  max-width: 1600px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.meteor {
  display: block;
  width: 1px;
  background: transparent;
  position: relative;
  opacity: 0;
  animation: star-fall 3s linear infinite;
}

.meteor::after {
  content: '';
  display: block;
  border: 0 solid #fff;
  border-width: 0 90px 2px 90px;
  border-color: transparent transparent transparent rgba(255, 255, 255, .5);
  box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
  transform: rotate(-45deg) translate3d(1px, 3px, 0);
  transform-origin: 0% 100%;
}

.animation-satellite_move {
  animation: satellite_move 20s linear 0.1s infinite;
}

.animation-rocks_move {
  animation: rocks_move 15s linear 0.1s infinite;
}

.animation-forward_arrow {
  animation: forward_arrow 1.8s linear 0.1s infinite;
}

.animation-back_arrow {
  animation: back_arrow 1.8s linear 0.1s infinite;
}

/**
 * Mobile  Styling
 */
@media only screen and (max-width: 768px) {
  .element-cloud.large {
    left: 2em;
    width: 16em;
    height: 4.5em;
  }

  .element-cloud.small {
    top: 2em;
    right: 1em;
  }

  .element-dorm1 {
    top: -5em;
    margin-left: calc(~"-4em / 2 - 6em /2 - 5em - 2.5em");
    width: 4em;
    height: 11.6875em;
  }

  .element-dorm2 {
    top: -8em;
    margin-left: calc(~"-5em / 2 - 6em / 2 - 2.5em");
    width: 5em;
    height: 13.6875em;
  }

  .element-dorm3 {
    top: -9.5em;
    height: 15.875em;
    margin-left: calc(~"-6em / 2");
    width: 6em;
  }

  .element-dorm4 {
    top: -8em;
    margin-left: calc(~"-5em / 2 + 6em / 2 + 2.5em");
    width: 5em;
    height: 13.6875em;
  }

  .element-dorm5 {
    top: -5em;
    margin-left: calc(~"-4em / 2 + 6em /2 + 5em + 2.5em");
    width: 4em;
    height: 11.6875em;
  }

  .element-player {
    top: -7em;
    margin-left: calc(~"-14.5428em/ 2 - 12.55em / 2 - 2.5em");
    width: 14.5428em;
    height: 12.5428em;
  }

  .element-radar {
    top: -7.5em;
    margin-left: calc(~"16.55em/ 2 - 10.125em / 2 - 7em");
    width: 16.55em;
    height: 11.75em;
  }

  .element-rocket {
    top: -12em;
    margin-left: calc(~"-15.875em / 2");
    width: 16.125em;
    height: 24em;
  }

  .element-tank {
    top: -5.5em;
    margin-left: calc(~"8.875em / 2");
    width: 8.125em;
    height: 8.875em;
  }

  .element-rider {
    top: -9.5em;
    margin-left: calc(~"-17.875em / 2 - 5em");
    width: 27.125em;
    height: 17.875em;
  }

  .element-ufo {
    top: -12em;
    left: 40%;
    margin-left: calc(~"-16.875em / 2 - 5em");
    width: 21.125em;
    height: 16.875em;
  }

  .element-robot {
    top: -10.5em;
    margin-left: calc(~"-15.875em / 2 - 4em");
    width: 12.125em;
    height: 15.875em;
  }

  .element-qrCode {
    margin-left: calc(~"-8em / 2");
    width: 8em;
    height: 8em;
  }

  .element-qrCodeFrame {
    top: -10.5em;
    margin-left: calc(~"10em / 2 - 5em");
    width: 10em;
    height: 16em;
  }

  .element-rocket-list {
    top: -14em;
    left: 50%;
    margin-left: calc(~"-16em / 2");
    width: 16em;
    height: 18em;
  }

  .element-rider-list {
    top: -4.5em;
    margin-left: calc(~"-7.125em / 2 - 9em");
    width: 7.125em;
    height: 8.875em;
  }

  .element-astronaut-list {
    top: -5.5em;
    margin-left: calc(~"6.875em / 2 - 2em");
    width: 6.875em;
    height: 10.875em;
  }

  .element-flag-list {
    top: -5.5em;
    margin-left: calc(~"3.125em / 2 - 8em");
    width: 3.125em;
    height: 5.875em;
  }

  .element-radar-list {
    top: 4em;
    margin-left: calc(~"8.875em / 2 - 3em");
    width: 11.125em;
    height: 8.875em;
  }

  .element-dorm5-list {
    top: -5.5em;
    margin-left: calc(~"8.125em / 2 + 2em");
    width: 8.125em;
    height: 11.875em;
  }

  .element-robot-list {
    top: 2.5em;
    margin-left: calc(~"-6.875em / 2");
    width: 6.875em;
    height: 6.875em;
  }

  .element-telescope-list {
    top: 9em;
    margin-left: calc(~"-3.875em / 2");
    width: 3.875em;
    height: 3.875em;
  }

  .element-player-list {
    top: 3.5em;
    margin-left: calc(~"-8.875em / 2 - 9em");
    width: 8.875em;
    height: 8.875em;
  }

  .element-ufo-list {
    top: -12.5em;
    margin-left: calc(~"-9.875em / 2 + 8em");
    width: 9.875em;
    height: 9.875em;
  }

  .element-astro-list {
    display: none;
  }

  .element-planet,
  .element-ellipse {
    top: 12%;
  }

  .element-star {
    &.small {
      top: 21%;
      left: 15%;
      width: 1em;
      height: 1em;

      &.position2 {
        top: 20%;
        left: 2%;
      }
    }

    &.large {
      top: 5%;
      right: 25%;
      width: 3em;
      height: 3em;
    }

    &.extra-small {
      top: 17%;
      left: 22%;
      width: 0.5em;
      height: 0.5em;
    }
  }

  .element-rocks {
    top: 10%;
    right: 3%;
  }

  .element-arrow-next {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 6em;
    height: 2.25em;
    background-color: #3a59f0;
    border-radius: 16px;
    font-size: 1em;

    svg {
      height: 1.2em;
    }
  }

  .welcome-page {
    .element-arrow-next {
      display: none;
    }
  }

  .element-arrow-back {
    display: none;
  }
}