@media only screen and (max-width: 600px) {
  .guild-hub {
    width: 90vw;
    left: 5vw;
    position: absolute;
    top: 38vh;
  }

  .btn-connect {
    width: 60vw;
    left: 20vw;
    position: absolute;
    top: 50vh;
    cursor: pointer;
    transition: 0.5s;
  }

  .planet-2 {
    transform: scale(0.5);
    transition: 0.5s;
  }

  .planet-3 {
    transform: scale(0.8);
    transition: 0.5s;
    top: 20vh;
    left: 7vw;
  }

  .planet-4 {
    transform: scale(0.5);
    transition: 0.5s;
    top: 5vh;
  }

  .planet-5 {
    transform: scale(0.5);
    transition: 0.5s;
  }

  .planet-6 {
    transform: scale(0.7);
    transition: 0.5s;
  }

  .planet-7 {
    transform: scale(0.5);
    transition: 0.5s;
  }

  .planet-8 {
    display: none;
    transform: scale(0.5);
    transition: 0.5s;
  }

  .planet-9 {
    transform: scale(0.5);
    transition: 0.5s;
    display: none;
  }

  .planet-10 {
    transform: scale(0.5);
    transition: 0.5s;
  }

  .planet-11 {
    transform: scale(0.5);
    transition: 0.5s;
    display: none;
  }

  .planet-12 {
    display: none;
    transform: scale(0.5);
    transition: 0.5s;
  }

  .black-hole {
    width: 80vw;
    margin-left: 50vw;
    margin-top: -30px;
  }

  .roket-1 {
    position: relative;
    width: 150px;
  }

  .roket-3 {
    position: relative;
    width: 100px;
    left: -30vw;
    top: 130vh;
}

.roket-4 {
    position: relative;
    width: 100px;
    left: 30vw;
    top: 130vh
}
  @-webkit-keyframes roket {
    0% {
      left: 110vw;
      top: 30vh;
      transform: rotateY(0deg);
    }
    30% {
      left: -50vw;
      top: 20vh;
      transform: rotateY(0deg);
    }
    35% {
      -webkit-transform: rotateY(180deg);
    }
    58% {
      -webkit-transform: rotateY(180deg);
    }
    62% {
      left: 110vw;
      top: 30vh;
      transform: rotateY(0deg);
    }
    100% {
      left: 110vw;
      top: 30vh;
      transform: rotateY(0deg);
    }
  }

  @keyframes roket {
    0% {
      left: 110vw;
      top: 30vh;
      transform: rotateY(0deg);
    }
    30% {
      left: -50vw;
      top: 20vh;
      transform: rotateY(0deg);
    }
    35% {
      -webkit-transform: rotateY(180deg);
    }
    58% {
      -webkit-transform: rotateY(180deg);
    }
    62% {
      left: 110vw;
      top: 30vh;
      transform: rotateY(0deg);
    }
    100% {
      left: 110vw;
      top: 30vh;
      transform: rotateY(0deg);
    }
  }

@keyframes roket-3 {
  0% {

      -webkit-transform: rotateY(180deg);
      transform: rotateY(180deg);
      left: -50vw;
      top: 70vh;
  }

  20% {
      left: 140vw;
      top: 70vh;

      transform: rotateY(180deg);
  }

  60% {
      left: 140vw;
      top: 70vh;
      transform: rotateY(0deg);
  }

  82% {
      left: -50vw;
      top: 30vh;
      -webkit-transform: rotateY(0deg);
      transform: rotateY(0deg);
  }

  100% {
      left: -50vw;
      top: 30vh;
      -webkit-transform: rotateY(0deg);
      transform: rotateY(0deg);
  }
}

@keyframes roket-4 {
  0% {
      transform: rotate(90deg);
      left: 30vw;
      top: 130vh;
  }

  20% {
      transform: rotate(90deg);
      left: 30vw;
      top: -40vh;
  }

  60% {
      left: 30vw;
      top: -40vh;
      transform: rotate(270deg);
  }

  82% {
      left: 30vw;
      top: 130vh;
      transform: rotate(270deg);
  }

  100% {
      left: 30vw;
      top: 130vh;
      transform: rotate(270deg);
  }
}

}/*# sourceMappingURL=responsive.css.map */