* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#hb {
  margin-top: -60%;
}

#vsd {
  color: white;
}

section {
  background: linear-gradient(to top, #00c6fb 0%, #005bea 100%);

}

.wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.box .lgbox {
  position: absolute;
  width: 110px;
  height: 110px;
  background-color: white;
  /* border: 2px solid white; */
  opacity: 0.5;
  clip-path: polygon(50% 12.22%, 74.44% 20%, 88.89% 39.44%, 88.89% 63.33%, 74.45% 82.22%, 51.11% 88.89%, 26.67% 81.11%, 13.33% 64.44%, 13.33% 38.33%, 26.67% 20%);
  /* clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%); */

}

.box-1 .mdbox {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: white;
  opacity: 0.5;
  /* border: 2px solid white; */
  clip-path: polygon(50% 12.22%, 74.44% 20%, 88.89% 39.44%, 88.89% 63.33%, 74.45% 82.22%, 51.11% 88.89%, 26.67% 81.11%, 13.33% 64.44%, 13.33% 38.33%, 26.67% 20%);
}

.box-2 .smbox {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: white;
  /* border: 2px solid white; */
  clip-path: polygon(50% 12.22%, 74.44% 20%, 88.89% 39.44%, 88.89% 63.33%, 74.45% 82.22%, 51.11% 88.89%, 26.67% 81.11%, 13.33% 64.44%, 13.33% 38.33%, 26.67% 20%);
}

.box .lgbox:nth-child(1) {
  top: -15%;
  left: 39%;
  animation: animated 16s linear infinite;
  rotate: 180deg;
  animation-delay: 4s;
}

.box .lgbox:nth-child(2) {
  top: 100%;
  left: 56%;
  animation: animated 20s linear infinite;
  rotate: 0deg;
  animation-delay: 8s;
}

.box .lgbox:nth-child(3) {
  top: -20%;
  left: -9%;
  animation: animated 24s linear infinite;
  rotate: 135deg;
  animation-delay: 12s;
}

.box .lgbox:nth-child(4) {
  top: -13%;
  left: 100%;
  animation: animated 20s linear infinite;
  rotate: 225deg;
  animation-delay: 16s;
}

.box .lgbox:nth-child(5) {
  top: 43%;
  left: -25%;
  animation: animated 24s linear infinite;
  rotate: 90deg;
  animation-delay: 8s;
}

.box .lgbox:nth-child(6) {
  top: 44%;
  left: 100%;
  animation: animated 28s linear infinite;
  rotate: 270deg;
  animation-delay: 16s;
}

.box .lgbox:nth-child(7) {
  top: 100%;
  left: -7%;
  animation: animated 32s linear infinite;
  rotate: 45deg;
  animation-delay: 24s;
}

.box .lgbox:nth-child(8) {
  top: 100%;
  left: 100%;
  animation: animated 36s linear infinite;
  rotate: 315deg;
  animation-delay: 32s;
}




.box-1 .mdbox:nth-child(1) {
  top: 18%;
  left: -12%;
  animation: ani 16s linear infinite;
  rotate: 105deg;
  animation-delay: 5s;
}

.box-1 .mdbox:nth-child(2) {
  top: 19%;
  left: 100%;
  animation: ani 20s linear infinite;
  rotate: 255deg;
  animation-delay: 10s;
}

.box-1 .mdbox:nth-child(3) {
  top: 72%;
  left: -13%;
  animation: ani 24s linear infinite;
  rotate: 75deg;
  animation-delay: 15s;
}

.box-1 .mdbox:nth-child(4) {
  top: 74%;
  left: 100%;
  animation: ani 19s linear infinite;
  rotate: 300deg;
  animation-delay: 20s;
}

.box-1 .mdbox:nth-child(5) {
  top: -8%;
  left: 15%;
  animation: ani 25s linear infinite;
  rotate: 165deg;
  animation-delay: 10s;
}

.box-1 .mdbox:nth-child(6) {
  top: -8%;
  left: 87%;
  animation: ani 22s linear infinite;
  rotate: 210deg;
  animation-delay: 20s;
}

.box-1 .mdbox:nth-child(7) {
  top: 100%;
  left: 14%;
  animation: ani 15s linear infinite;
  rotate: 30deg;
  animation-delay: 30s;
}

.box-1 .mdbox:nth-child(8) {
  top: 100%;
  left: 82%;
  animation: ani 17s linear infinite;
  rotate: 345deg;
  animation-delay: 25s;
}



.box-2 .smbox:nth-child(1) {
  top: 12%;
  left: 42%;
  animation: anim 3s linear infinite;

}

.box-2 .smbox:nth-child(2) {
  top: 70%;
  left: 50%;
  animation: anim 4s linear infinite;

}

.box-2 .smbox:nth-child(3) {
  top: 17%;
  left: 6%;
  animation: anim 9s linear infinite;

}

.box-2 .smbox:nth-child(4) {
  top: 20%;
  left: 60%;
  animation: anim 12s linear infinite;

}

.box-2 .smbox:nth-child(5) {
  top: 67%;
  left: 10%;
  animation: anim 15s linear infinite;

}

.box-2 .smbox:nth-child(6) {
  top: 32%;
  left: 25%;
  animation: anim 18s linear infinite;

}

.box-2 .smbox:nth-child(7) {
  top: 60%;
  left: 80%;
  animation: anim 24s linear infinite;

}

.box-2 .smbox:nth-child(8) {
  top: 32%;
  left: 25%;
  animation: anim 14s linear infinite;

}






@keyframes animated {
  0% {
    transform: translate(0px) rotate(0deg);

  }

  100% {
    transform: translateY(-1900px) rotate(360deg);

  }

}

@keyframes ani {
  0% {
    transform: translate(0px) rotate(0);

  }

  100% {
    transform: translateY(-1900px) rotate(360deg);

  }

}


@keyframes anim {
  0% {
    transform: scale(0) translate(0px) rotate(0deg);
  }

  100% {
    transform: scale(1.1) translate(1900px) rotate(360deg);
  }
}

#last {
  background: linear-gradient(to bottom, #00c6fb 25%, #005bea 100%);
}

/* .rotate {

  animation: adhi 10s linear infinite;

}

@keyframes adhi {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
} */

/* phone-mode */
/* #mobile-side{
  color: white;
} */