body {
  background: #10132a;
  background-image: url("https://s1.postimg.org/3bbg831467/star.png");
}
.box {
  position: relative;
  margin: auto;
  display: block;
  margin-top: 8%;
  width: 600px;
  height: 420px;
  background: none;
}
.planet-1 {
  position: absolute;
  width: 20%;
  height: 30%;
  left: 5%;
  bottom: 10%;
  background-color: #ffc80b;
  background-image: linear-gradient(180deg, #ffc80b 32%, #fc591f 78%);
  border-radius: 50%;
  z-index: 1;
}
.planet-2 {
  position: absolute;
  width: 40%;
  height: 20%;
  left: 50%;
  bottom: 25%;
  background: none;
  border-left: 10px solid #d94fcf;
  border-right: 10px solid #d94fcf;
  border-bottom: 20px solid #d94fcf;
  border-radius: 50%;
  transform: rotate(-20deg);
  z-index: 2;
}
.planet-2a {
  position: absolute;
  width: 32%;
  height: 40%;
  left: 56%;
  bottom: 17%;
  background-color: #d94fcf;
  background-image: linear-gradient(
    302deg,
    #d94fcf 10%,
    #efb8eb 53%,
    #d94fcf 89%
  );
  border-radius: 50%;
  z-index: 1;
}
.planet-3 {
  position: absolute;
  width: 10%;
  height: 15%;
  left: 35%;
  top: 20%;
  background-color: #7030a0;
  background-image: linear-gradient(
    180deg,
    #7030a0 12%,
    #00a2c0 51%,
    #64a503 93%
  );
  border-radius: 50%;
  z-index: 1;
}
.planet-4 {
  position: absolute;
  width: 2.5%;
  height: 4%;
  left: 80%;
  top: 10%;
  background: #2eb2cb;
  opacity: 0.9;
  border-radius: 50%;
  z-index: 1;
}