@-webkit-keyframes move {
    100% {
      transform: translate3d(0, 0, -600px);
    }
  }

  @keyframes move {
    100% {
      transform: translate3d(0px, 0px, -600px);
    }
  }
  .container {
    position: relative;
    width: 100%;
    min-height: 100%;
    transform-style: preserve-3d;
  }

  .bubble-wrap {
    /* margin: 0 auto; */
    margin: 0;
    width: 500px;
    height: 500px;
    transform-style: preserve-3d;
    transform-origin: center center;
    perspective: 600px;
  }

  .bubble {
    position: absolute;
    background: black;
    opacity: 0.7;
    border-radius: 50%;
    -webkit-animation: move 3s infinite;
            animation: move 3s infinite;
  }

  .bubble:nth-child(1) {
    height: 22px;
    width: 22px;
    -webkit-animation-delay: -0.2s;
            animation-delay: -0.2s;
    transform: translate3d(258px, 184px, -1664px);
    background: #600f8f;
  }

  .bubble:nth-child(2) {
    height: 12px;
    width: 12px;
    -webkit-animation-delay: -0.4s;
            animation-delay: -0.4s;
    transform: translate3d(598px, 147px, -1552px);
    background: #2632d9; /* #8226d9; */
  }

  .bubble:nth-child(3) {
    height: 18px;
    width: 18px;
    -webkit-animation-delay: -0.6s;
            animation-delay: -0.6s;
    transform: translate3d(587px, 947px, -1330px);
    background: #2632d9; /* #8226d9; */
  }

  .bubble:nth-child(4) {
    height: 28px;
    width: 28px;
    -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s;
    transform: translate3d(251px, 596px, 243px);
    background: #2632d9; /* #8226d9; */
  }

  .bubble:nth-child(5) {
    height: 9px;
    width: 9px;
    -webkit-animation-delay: -1s;
            animation-delay: -1s;
    transform: translate3d(508px, 59px, 635px);
    background: #0d2327; /* #d98026 */
  }

  .bubble:nth-child(6) {
    height: 20px;
    width: 20px;
    -webkit-animation-delay: -1.2s;
            animation-delay: -1.2s;
    transform: translate3d(864px, 746px, 1361px);
    background: #666868; /* #59d926*/
  }

  .bubble:nth-child(7) {
    height: 8px;
    width: 8px;
    -webkit-animation-delay: -1.4s;
            animation-delay: -1.4s;
    transform: translate3d(333px, 124px, 750px);
    background: #3d3a41; /*#26d9bb */
  }

  .bubble:nth-child(8) {
    height: 6px;
    width: 6px;
    -webkit-animation-delay: -1.6s;
            animation-delay: -1.6s;
    transform: translate3d(319px, 407px, 613px);
    background: #7a26d9; /* #d9267d */
  }

  .bubble:nth-child(9) {
    height: 6px;
    width: 6px;
    -webkit-animation-delay: -1.8s;
            animation-delay: -1.8s;
    transform: translate3d(683px, 675px, 1364px);
    background: #6526d9; /* #4ad926*/
  }

  .bubble:nth-child(10) {
    height: 17px;
    width: 17px;
    -webkit-animation-delay: -2s;
            animation-delay: -2s;
    transform: translate3d(127px, 854px, 2000px);
    background: #2650d9;
  }

  .bubble:nth-child(11) {
    height: 4px;
    width: 4px;
    -webkit-animation-delay: -2.2s;
            animation-delay: -2.2s;
    transform: translate3d(607px, 415px, 393px);
    background: #4940c9;
  }

  .bubble:nth-child(12) {
    height: 11px;
    width: 11px;
    -webkit-animation-delay: -2.4s;
            animation-delay: -2.4s;
    transform: translate3d(966px, 712px, 166px);
    background: #3226d9;
  }

  .bubble:nth-child(13) {
    height: 5px;
    width: 5px;
    -webkit-animation-delay: -2.6s;
            animation-delay: -2.6s;
    transform: translate3d(939px, 890px, 1752px);
    background: #4c4e4e;
  }

  .bubble:nth-child(14) {
    height: 5px;
    width: 5px;
    -webkit-animation-delay: -2.8s;
            animation-delay: -2.8s;
    transform: translate3d(244px, 811px, 1666px);
    background: #4d26d9;
  }

  .bubble:nth-child(15) {
    height: 19px;
    width: 19px;
    -webkit-animation-delay: -3s;
            animation-delay: -3s;
    transform: translate3d(764px, 365px, 1737px);
    background: #8f09aa;
  }

  .bubble:nth-child(16) {
    height: 20px;
    width: 20px;
    -webkit-animation-delay: -3.2s;
            animation-delay: -3.2s;
    transform: translate3d(960px, 489px, 172px);
    background: #264dd9;
  }

  .bubble:nth-child(17) {
    height: 8px;
    width: 8px;
    -webkit-animation-delay: -3.4s;
            animation-delay: -3.4s;
    transform: translate3d(623px, 165px, 1997px);
    background: #37393a;
  }

  .bubble:nth-child(18) {
    height: 11px;
    width: 11px;
    -webkit-animation-delay: -3.6s;
            animation-delay: -3.6s;
    transform: translate3d(69px, 479px, 20px);
    background: #3826d9;
  }

  .bubble:nth-child(19) {
    height: 29px;
    width: 29px;
    -webkit-animation-delay: -3.8s;
            animation-delay: -3.8s;
    transform: translate3d(189px, 442px, 1024px);
    background: #99888d;
  }

  .bubble:nth-child(20) {
    height: 24px;
    width: 24px;
    -webkit-animation-delay: -4s;
            animation-delay: -4s;
    transform: translate3d(69px, 23px, 866px);
    background: #4a4750;
  }

  .bubble:nth-child(21) {
    height: 9px;
    width: 9px;
    -webkit-animation-delay: -4.2s;
            animation-delay: -4.2s;
    transform: translate3d(376px, 344px, 1509px);
    background: #46343d;
  }

  .bubble:nth-child(22) {
    height: 30px;
    width: 30px;
    -webkit-animation-delay: -4.4s;
            animation-delay: -4.4s;
    transform: translate3d(128px, 659px, 780px);
    background: #a9aca7;
  }

  .bubble:nth-child(23) {
    height: 9px;
    width: 9px;
    -webkit-animation-delay: -4.6s;
            animation-delay: -4.6s;
    transform: translate3d(864px, 470px, 855px);
    background: #492f8f;
  }

  .bubble:nth-child(24) {
    height: 24px;
    width: 24px;
    -webkit-animation-delay: -4.8s;
            animation-delay: -4.8s;
    transform: translate3d(686px, 639px, 1063px);
    background: #5724b6;
  }

  .bubble:nth-child(25) {
    height: 19px;
    width: 19px;
    -webkit-animation-delay: -5s;
            animation-delay: -5s;
    transform: translate3d(313px, 146px, 1936px);
    background: #4d26d9;
  }

  .bubble:nth-child(26) {
    height: 1px;
    width: 1px;
    -webkit-animation-delay: -5.2s;
            animation-delay: -5.2s;
    transform: translate3d(18px, 864px, 655px);
    background: #3826d9;
  }

  .bubble:nth-child(27) {
    height: 25px;
    width: 25px;
    -webkit-animation-delay: -5.4s;
            animation-delay: -5.4s;
    transform: translate3d(366px, 374px, 460px);
    background: #265fd9;
  }

  .bubble:nth-child(28) {
    height: 17px;
    width: 17px;
    -webkit-animation-delay: -5.6s;
            animation-delay: -5.6s;
    transform: translate3d(291px, 358px, 956px);
    background: #852c8d;
  }

  .bubble:nth-child(29) {
    height: 18px;
    width: 18px;
    -webkit-animation-delay: -5.8s;
            animation-delay: -5.8s;
    transform: translate3d(906px, 800px, 1452px);
    background: #5626d9;
  }

  .bubble:nth-child(30) {
    height: 11px;
    width: 11px;
    -webkit-animation-delay: -6s;
            animation-delay: -6s;
    transform: translate3d(420px, 858px, 1500px);
    background: #024d75;
  }

  .bubble:nth-child(31) {
    height: 22px;
    width: 22px;
    -webkit-animation-delay: -6.2s;
            animation-delay: -6.2s;
    transform: translate3d(882px, 417px, 1694px);
    background: #dbdbdb;
  }

  .bubble:nth-child(32) {
    height: 28px;
    width: 28px;
    -webkit-animation-delay: -6.4s;
            animation-delay: -6.4s;
    transform: translate3d(81px, 311px, 201px);
    background: #c2c2c2;
  }

  .bubble:nth-child(33) {
    height: 4px;
    width: 4px;
    -webkit-animation-delay: -6.6s;
            animation-delay: -6.6s;
    transform: translate3d(862px, 698px, 527px);
    background: #33245c;
  }

  .bubble:nth-child(34) {
    height: 27px;
    width: 27px;
    -webkit-animation-delay: -6.8s;
            animation-delay: -6.8s;
    transform: translate3d(170px, 807px, 220px);
    background: #2682d9;
  }

  .bubble:nth-child(35) {
    height: 17px;
    width: 17px;
    -webkit-animation-delay: -7s;
            animation-delay: -7s;
    transform: translate3d(554px, 194px, 1923px);
    background: #1437aa;
  }

  .bubble:nth-child(36) {
    height: 23px;
    width: 23px;
    -webkit-animation-delay: -7.2s;
            animation-delay: -7.2s;
    transform: translate3d(335px, 414px, 1765px);
    background: #164bbe;
  }

  .bubble:nth-child(37) {
    height: 11px;
    width: 11px;
    -webkit-animation-delay: -7.4s;
            animation-delay: -7.4s;
    transform: translate3d(529px, 592px, 814px);
    background: #52186d;
  }

  .bubble:nth-child(38) {
    height: 17px;
    width: 17px;
    -webkit-animation-delay: -7.6s;
            animation-delay: -7.6s;
    transform: translate3d(732px, 554px, 1191px);
    background: #265fd9;
  }

  .bubble:nth-child(39) {
    height: 27px;
    width: 27px;
    -webkit-animation-delay: -7.8s;
            animation-delay: -7.8s;
    transform: translate3d(317px, 471px, 664px);
    background: #190b57;
  }

  .bubble:nth-child(40) {
    height: 25px;
    width: 25px;
    -webkit-animation-delay: -8s;
            animation-delay: -8s;
    transform: translate3d(479px, 915px, 1116px);
    background: #2641d9;
  }

  .bubble:nth-child(41) {
    height: 23px;
    width: 23px;
    -webkit-animation-delay: -8.2s;
            animation-delay: -8.2s;
    transform: translate3d(947px, 855px, 315px);
    background: #22217c;
  }

  .bubble:nth-child(42) {
    height: 5px;
    width: 5px;
    -webkit-animation-delay: -8.4s;
            animation-delay: -8.4s;
    transform: translate3d(173px, 47px, 1762px);
    background: #4726d9;
  }

  .bubble:nth-child(43) {
    height: 20px;
    width: 20px;
    -webkit-animation-delay: -8.6s;
            animation-delay: -8.6s;
    transform: translate3d(186px, 321px, 502px);
    background: #3330eb;
  }

  .bubble:nth-child(44) {
    height: 12px;
    width: 12px;
    -webkit-animation-delay: -8.8s;
            animation-delay: -8.8s;
    transform: translate3d(352px, 406px, 1870px);
    background: #4a0fb8;
  }

  .bubble:nth-child(45) {
    height: 25px;
    width: 25px;
    -webkit-animation-delay: -9s;
            animation-delay: -9s;
    transform: translate3d(76px, 918px, 338px);
    background: #5911a7;
  }

  .bubble:nth-child(46) {
    height: 30px;
    width: 30px;
    -webkit-animation-delay: -9.2s;
            animation-delay: -9.2s;
    transform: translate3d(87px, 388px, 1248px);
    background: #361f24;
  }

  .bubble:nth-child(47) {
    height: 30px;
    width: 30px;
    -webkit-animation-delay: -9.4s;
            animation-delay: -9.4s;
    transform: translate3d(103px, 28px, 1734px);
    background: #f2f3f1;
  }

  .bubble:nth-child(48) {
    height: 17px;
    width: 17px;
    -webkit-animation-delay: -9.6s;
            animation-delay: -9.6s;
    transform: translate3d(612px, 795px, 1219px);
    background: #81767f;
  }

  .bubble:nth-child(49) {
    height: 25px;
    width: 25px;
    -webkit-animation-delay: -9.8s;
            animation-delay: -9.8s;
    transform: translate3d(657px, 71px, 1040px);
    background: #7a1ba0;
  }

  .bubble:nth-child(50) {
    height: 19px;
    width: 19px;
    -webkit-animation-delay: -10s;
            animation-delay: -10s;
    transform: translate3d(328px, 115px, 652px);
    background: #484948;
  }

  .bubble:nth-child(51) {
    height: 19px;
    width: 19px;
    -webkit-animation-delay: -10.2s;
            animation-delay: -10.2s;
    transform: translate3d(461px, 557px, 166px);
    background: #0b0d75;
  }

  .bubble:nth-child(52) {
    height: 13px;
    width: 13px;
    -webkit-animation-delay: -10.4s;
            animation-delay: -10.4s;
    transform: translate3d(990px, 601px, 255px);
    background: #2e2d28;
  }

  .bubble:nth-child(53) {
    height: 11px;
    width: 11px;
    -webkit-animation-delay: -10.6s;
            animation-delay: -10.6s;
    transform: translate3d(571px, 296px, 1271px);
    background: #2632d9;
  }

  .bubble:nth-child(54) {
    height: 30px;
    width: 30px;
    -webkit-animation-delay: -10.8s;
            animation-delay: -10.8s;
    transform: translate3d(716px, 986px, 997px);
    background: #4726d9;
  }

  .bubble:nth-child(55) {
    height: 12px;
    width: 12px;
    -webkit-animation-delay: -11s;
            animation-delay: -11s;
    transform: translate3d(486px, 806px, 1737px);
    background: #2659d9;
  }

  .bubble:nth-child(56) {
    height: 12px;
    width: 12px;
    -webkit-animation-delay: -11.2s;
            animation-delay: -11.2s;
    transform: translate3d(67px, 580px, 1672px);
    background: #6b26d9;
  }

  .bubble:nth-child(57) {
    height: 14px;
    width: 14px;
    -webkit-animation-delay: -11.4s;
            animation-delay: -11.4s;
    transform: translate3d(527px, 124px, 1586px);
    background: #50504d;
  }

  .bubble:nth-child(58) {
    height: 21px;
    width: 21px;
    -webkit-animation-delay: -11.6s;
            animation-delay: -11.6s;
    transform: translate3d(689px, 207px, 50px);
    background: #5c26d9;
  }

  .bubble:nth-child(59) {
    height: 7px;
    width: 7px;
    -webkit-animation-delay: -11.8s;
            animation-delay: -11.8s;
    transform: translate3d(440px, 338px, 591px);
    background: #3b10a1;
  }

  .bubble:nth-child(60) {
    height: 19px;
    width: 19px;
    -webkit-animation-delay: -12s;
            animation-delay: -12s;
    transform: translate3d(289px, 174px, 1751px);
    background: #2668d9;
  }

  .bubble:nth-child(61) {
    height: 1px;
    width: 1px;
    -webkit-animation-delay: -12.2s;
            animation-delay: -12.2s;
    transform: translate3d(329px, 698px, 1582px);
    background: #4c0ca0;
  }

  .bubble:nth-child(62) {
    height: 8px;
    width: 8px;
    -webkit-animation-delay: -12.4s;
            animation-delay: -12.4s;
    transform: translate3d(908px, 706px, 1581px);
    background: #5026d9;
  }

  .bubble:nth-child(63) {
    height: 12px;
    width: 12px;
    -webkit-animation-delay: -12.6s;
            animation-delay: -12.6s;
    transform: translate3d(114px, 667px, 950px);
    background: #3826d9;
  }

  .bubble:nth-child(64) {
    height: 10px;
    width: 10px;
    -webkit-animation-delay: -12.8s;
            animation-delay: -12.8s;
    transform: translate3d(920px, 460px, 1905px);
    background: #3b26d9;
  }

  .bubble:nth-child(65) {
    height: 6px;
    width: 6px;
    -webkit-animation-delay: -13s;
            animation-delay: -13s;
    transform: translate3d(912px, 99px, 81px);
    background: #2926d9;
  }

  .bubble:nth-child(66) {
    height: 21px;
    width: 21px;
    -webkit-animation-delay: -13.2s;
            animation-delay: -13.2s;
    transform: translate3d(658px, 820px, 1739px);
    background: #3826d9;
  }

  .bubble:nth-child(67) {
    height: 12px;
    width: 12px;
    -webkit-animation-delay: -13.4s;
            animation-delay: -13.4s;
    transform: translate3d(99px, 591px, 266px);
    background: #02074b;
  }

  .bubble:nth-child(68) {
    height: 25px;
    width: 25px;
    -webkit-animation-delay: -13.6s;
            animation-delay: -13.6s;
    transform: translate3d(849px, 810px, 1442px);
    background: #13093a;
  }

  .bubble:nth-child(69) {
    height: 9px;
    width: 9px;
    -webkit-animation-delay: -13.8s;
            animation-delay: -13.8s;
    transform: translate3d(73px, 487px, 1077px);
    background: #2c3a3d;
  }

  .bubble:nth-child(70) {
    height: 24px;
    width: 24px;
    -webkit-animation-delay: -14s;
            animation-delay: -14s;
    transform: translate3d(795px, 171px, 984px);
    background: #241657;
  }

  .bubble:nth-child(71) {
    height: 10px;
    width: 10px;
    -webkit-animation-delay: -14.2s;
            animation-delay: -14.2s;
    transform: translate3d(576px, 192px, 536px);
    background: #010638;
  }

  .bubble:nth-child(72) {
    height: 19px;
    width: 19px;
    -webkit-animation-delay: -14.4s;
            animation-delay: -14.4s;
    transform: translate3d(243px, 465px, 314px);
    background: #170331;
  }

  .bubble:nth-child(73) {
    height: 13px;
    width: 13px;
    -webkit-animation-delay: -14.6s;
            animation-delay: -14.6s;
    transform: translate3d(770px, 575px, 662px);
    background: #261858;
  }

  .bubble:nth-child(74) {
    height: 17px;
    width: 17px;
    -webkit-animation-delay: -14.8s;
            animation-delay: -14.8s;
    transform: translate3d(616px, 46px, 1955px);
    background: #07013f;
  }

  .bubble:nth-child(75) {
    height: 16px;
    width: 16px;
    -webkit-animation-delay: -15s;
            animation-delay: -15s;
    transform: translate3d(839px, 681px, 1137px);
    background: #3226d9;
  }

  .bubble:nth-child(76) {
    height: 3px;
    width: 3px;
    -webkit-animation-delay: -15.2s;
            animation-delay: -15.2s;
    transform: translate3d(688px, 869px, 1750px);
    background: #6526d9;
  }

  .bubble:nth-child(77) {
    height: 27px;
    width: 27px;
    -webkit-animation-delay: -15.4s;
            animation-delay: -15.4s;
    transform: translate3d(951px, 528px, 398px);
    background: #bebebe;
  }

  .bubble:nth-child(78) {
    height: 8px;
    width: 8px;
    -webkit-animation-delay: -15.6s;
            animation-delay: -15.6s;
    transform: translate3d(582px, 446px, 1579px);
    background: #2926d9;
  }

  .bubble:nth-child(79) {
    height: 7px;
    width: 7px;
    -webkit-animation-delay: -15.8s;
            animation-delay: -15.8s;
    transform: translate3d(648px, 376px, 282px);
    background: #8826d9;
  }

  .bubble:nth-child(80) {
    height: 11px;
    width: 11px;
    -webkit-animation-delay: -16s;
            animation-delay: -16s;
    transform: translate3d(934px, 976px, 338px);
    background: #071879;
  }

  .bubble:nth-child(81) {
    height: 25px;
    width: 25px;
    -webkit-animation-delay: -16.2s;
            animation-delay: -16.2s;
    transform: translate3d(353px, 819px, 1314px);
    background: #380a86;
  }

  .bubble:nth-child(82) {
    height: 3px;
    width: 3px;
    -webkit-animation-delay: -16.4s;
            animation-delay: -16.4s;
    transform: translate3d(740px, 390px, 827px);
    background: #3526d9;
  }

  .bubble:nth-child(83) {
    height: 24px;
    width: 24px;
    -webkit-animation-delay: -16.6s;
            animation-delay: -16.6s;
    transform: translate3d(388px, 478px, 812px);
    background: #5626d9;
  }

  .bubble:nth-child(84) {
    height: 9px;
    width: 9px;
    -webkit-animation-delay: -16.8s;
            animation-delay: -16.8s;
    transform: translate3d(850px, 865px, 807px);
    background: #2629d9;
  }

  .bubble:nth-child(85) {
    height: 19px;
    width: 19px;
    -webkit-animation-delay: -17s;
            animation-delay: -17s;
    transform: translate3d(885px, 660px, 861px);
    background: #3826d9;
  }

  .bubble:nth-child(86) {
    height: 23px;
    width: 23px;
    -webkit-animation-delay: -17.2s;
            animation-delay: -17.2s;
    transform: translate3d(487px, 816px, 178px);
    background: #2656d9;
  }

  .bubble:nth-child(87) {
    height: 14px;
    width: 14px;
    -webkit-animation-delay: -17.4s;
            animation-delay: -17.4s;
    transform: translate3d(362px, 745px, 359px);
    background: #3826d9;
  }

  .bubble:nth-child(88) {
    height: 27px;
    width: 27px;
    -webkit-animation-delay: -17.6s;
            animation-delay: -17.6s;
    transform: translate3d(629px, 533px, 1330px);
    background: #9126d9;
  }

  .bubble:nth-child(89) {
    height: 12px;
    width: 12px;
    -webkit-animation-delay: -17.8s;
            animation-delay: -17.8s;
    transform: translate3d(579px, 242px, 1465px);
    background: #524f57;
  }

  .bubble:nth-child(90) {
    height: 11px;
    width: 11px;
    -webkit-animation-delay: -18s;
            animation-delay: -18s;
    transform: translate3d(805px, 175px, 1146px);
    background: #2662d9;
  }

  .bubble:nth-child(91) {
    height: 15px;
    width: 15px;
    -webkit-animation-delay: -18.2s;
            animation-delay: -18.2s;
    transform: translate3d(133px, 328px, 1361px);
    background: #3826d9;
  }

  .bubble:nth-child(92) {
    height: 30px;
    width: 30px;
    -webkit-animation-delay: -18.4s;
            animation-delay: -18.4s;
    transform: translate3d(260px, 266px, 1310px);
    background: #4726d9;
  }

  .bubble:nth-child(93) {
    height: 25px;
    width: 25px;
    -webkit-animation-delay: -18.6s;
            animation-delay: -18.6s;
    transform: translate3d(642px, 298px, 1877px);
    background: #3826d9;
  }

  .bubble:nth-child(94) {
    height: 15px;
    width: 15px;
    -webkit-animation-delay: -18.8s;
            animation-delay: -18.8s;
    transform: translate3d(945px, 864px, 1114px);
    background: #6526d9;
  }

  .bubble:nth-child(95) {
    height: 5px;
    width: 5px;
    -webkit-animation-delay: -19s;
            animation-delay: -19s;
    transform: translate3d(167px, 124px, 491px);
    background: #a1a1a1;
  }

  .bubble:nth-child(96) {
    height: 17px;
    width: 17px;
    -webkit-animation-delay: -19.2s;
            animation-delay: -19.2s;
    transform: translate3d(399px, 152px, 793px);
    background: #381566;
  }

  .bubble:nth-child(97) {
    height: 23px;
    width: 23px;
    -webkit-animation-delay: -19.4s;
            animation-delay: -19.4s;
    transform: translate3d(549px, 199px, 644px);
    background: #5926d9;
  }

  .bubble:nth-child(98) {
    height: 27px;
    width: 27px;
    -webkit-animation-delay: -19.6s;
            animation-delay: -19.6s;
    transform: translate3d(612px, 145px, 1838px);
    background: #9c9c9c;
  }

  .bubble:nth-child(99) {
    height: 26px;
    width: 26px;
    -webkit-animation-delay: -19.8s;
            animation-delay: -19.8s;
    transform: translate3d(356px, 770px, 987px);
    background: #4726d9;
  }

  .bubble:nth-child(100) {
    height: 15px;
    width: 15px;
    -webkit-animation-delay: -20s;
            animation-delay: -20s;
    transform: translate3d(178px, 591px, 1353px);
    background: #4726d9;
  }