body {
    /* background: radial-gradient(circle, #24246e, #06051f);
    overflow: hidden;
    position: relative;
    width: 100vw;
    height: 100vh; */
  }
  /* body:active .particle,
  body:active .particle::before,
  body:active .particle::after {
    padding: 40px;
  }
   */
  .particle,
  .particle::before,
  .particle::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0.9;
    transform-origin: top;
    transition: all 5s linear 0s;
  }
  .purple {
    -webkit-animation: purple linear 30s alternate infinite;
            animation: purple linear 30s alternate infinite;
    border: 2px solid #241379;
    border-radius: 100%;
    width: 49px;
    height: 49px;
    transform: translate3d(50vw, 63vh, 0);
    z-index: 6;
  }
  
  .purple::before {
    -webkit-animation: purple-pseudo linear 15s alternate infinite;
            animation: purple-pseudo linear 15s alternate infinite;
    background: #241379;
    border: 2px solid #241379;
    width: 17px;
    height: 19px;
    transform: translate3d(-17vw, 30vh, 0) rotate(178deg);
  }
  
  .purple::after {
    -webkit-animation: purple-pseudo linear 20s alternate infinite;
            animation: purple-pseudo linear 20s alternate infinite;
    border: 2px solid #241379;
    width: 14px;
    height: 31px;
    transform: translate3d(-23vw, -47vh, 0) rotate(180deg);
  }

  @-webkit-keyframes animation_particle_img {
    50% {
      transform: translate3d(88vw, 53vh, 0);
    }
    100% {
      transform: translate3d(25vw, 95vh, 0);
    }
  }

  @-webkit-keyframes animation_particle_img_before {
    33% {
      transform: translate3d(-46vw, -51vh, 0) rotate(5deg);
    }
    100% {
      transform: translate3d(-19vw, -68vh, 0) rotate(191deg);
    }
  }
  
  @-webkit-keyframes animation_particle_img_after {
    50% {
      transform: translate3d(69vw, 88vh, 0);
    }
    100% {
      transform: translate3d(59vw, 18vh, 0);
    }
  }

  @-webkit-keyframes animation_particle_img2 {
    50% {
      transform: translate3d(88vw, 53vh, 0);
    }
    100% {
      transform: translate3d(25vw, 95vh, 0);
    }
  }

  @-webkit-keyframes animation_particle_img2_before {
    33% {
      transform: translate3d(-46vw, -51vh, 0) rotate(5deg);
    }
    100% {
      transform: translate3d(-19vw, -68vh, 0) rotate(191deg);
    }
  }
  
  @-webkit-keyframes animation_particle_img2_after {
    50% {
      transform: translate3d(69vw, 88vh, 0);
    }
    100% {
      transform: translate3d(59vw, 18vh, 0);
    }
  }
  
  @-webkit-keyframes purple {
    50% {
      transform: translate3d(88vw, 53vh, 0);
    }
    100% {
      transform: translate3d(25vw, 95vh, 0);
    }
  }
  
  @keyframes purple {
    50% {
      transform: translate3d(88vw, 53vh, 0);
    }
    100% {
      transform: translate3d(25vw, 95vh, 0);
    }
  }
  @-webkit-keyframes purple-pseudo {
    33% {
      transform: translate3d(-46vw, -51vh, 0) rotate(5deg);
    }
    100% {
      transform: translate3d(-19vw, -68vh, 0) rotate(191deg);
    }
  }
  @keyframes purple-pseudo {
    33% {
      transform: translate3d(-46vw, -51vh, 0) rotate(5deg);
    }
    100% {
      transform: translate3d(-19vw, -68vh, 0) rotate(191deg);
    }
  }
  .medium-blue {
    -webkit-animation: medium-blue linear 30s alternate infinite;
            animation: medium-blue linear 30s alternate infinite;
    border: 2px solid #2185bf;
    border-radius: 100%;
    width: 27px;
    height: 27px;
    transform: translate3d(82vw, 77vh, 0);
    z-index: 10;
  }
  
  .medium-blue::before {
    -webkit-animation: medium-blue-pseudo linear 15s alternate infinite;
            animation: medium-blue-pseudo linear 15s alternate infinite;
    background: #2185bf;
    border: 2px solid #2185bf;
    width: 16px;
    height: 48px;
    transform: translate3d(-49vw, -74vh, 0) rotate(85deg);
  }
  
  .medium-blue::after {
    -webkit-animation: medium-blue-pseudo linear 20s alternate infinite;
            animation: medium-blue-pseudo linear 20s alternate infinite;
    border: 2px solid #2185bf;
    width: 39px;
    height: 26px;
    transform: translate3d(-56vw, 2vh, 0) rotate(328deg);
  }
  
  @-webkit-keyframes medium-blue {
    50% {
      transform: translate3d(69vw, 88vh, 0);
    }
    100% {
      transform: translate3d(59vw, 18vh, 0);
    }
  }
  
  @keyframes medium-blue {
    50% {
      transform: translate3d(69vw, 88vh, 0);
    }
    100% {
      transform: translate3d(59vw, 18vh, 0);
    }
  }
  @-webkit-keyframes medium-blue-pseudo {
    33% {
      transform: translate3d(-62vw, -24vh, 0) rotate(209deg);
    }
    100% {
      transform: translate3d(-45vw, 42vh, 0) rotate(339deg);
    }
  }
  @keyframes medium-blue-pseudo {
    33% {
      transform: translate3d(-62vw, -24vh, 0) rotate(209deg);
    }
    100% {
      transform: translate3d(-45vw, 42vh, 0) rotate(339deg);
    }
  }
  .light-blue {
    -webkit-animation: light-blue linear 30s alternate infinite;
            animation: light-blue linear 30s alternate infinite;
    border: 2px solid #1fbce1;
    border-radius: 100%;
    width: 46px;
    height: 46px;
    transform: translate3d(82vw, 26vh, 0);
    z-index: 1;
  }
  
  .light-blue::before {
    -webkit-animation: light-blue-pseudo linear 15s alternate infinite;
            animation: light-blue-pseudo linear 15s alternate infinite;
    background: #1fbce1;
    border: 2px solid #1fbce1;
    width: 24px;
    height: 37px;
    transform: translate3d(-54vw, -26vh, 0) rotate(342deg);
  }
  
  .light-blue::after {
    -webkit-animation: light-blue-pseudo linear 20s alternate infinite;
            animation: light-blue-pseudo linear 20s alternate infinite;
    border: 2px solid #1fbce1;
    width: 8px;
    height: 38px;
    transform: translate3d(-78vw, 11vh, 0) rotate(165deg);
  }
  
  @-webkit-keyframes light-blue {
    50% {
      transform: translate3d(56vw, 54vh, 0);
    }
    100% {
      transform: translate3d(19vw, 48vh, 0);
    }
  }
  
  @keyframes light-blue {
    50% {
      transform: translate3d(56vw, 54vh, 0);
    }
    100% {
      transform: translate3d(19vw, 48vh, 0);
    }
  }
  @-webkit-keyframes light-blue-pseudo {
    33% {
      transform: translate3d(-13vw, 42vh, 0) rotate(52deg);
    }
    100% {
      transform: translate3d(54vw, -36vh, 0) rotate(157deg);
    }
  }
  @keyframes light-blue-pseudo {
    33% {
      transform: translate3d(-13vw, 42vh, 0) rotate(52deg);
    }
    100% {
      transform: translate3d(54vw, -36vh, 0) rotate(157deg);
    }
  }
  .red {
    -webkit-animation: red linear 30s alternate infinite;
            animation: red linear 30s alternate infinite;
    border: 2px solid #b62f56;
    border-radius: 100%;
    width: 21px;
    height: 21px;
    transform: translate3d(32vw, 84vh, 0);
    z-index: 5;
  }
  
  .red::before {
    -webkit-animation: red-pseudo linear 15s alternate infinite;
            animation: red-pseudo linear 15s alternate infinite;
    background: #b62f56;
    border: 2px solid #b62f56;
    width: 37px;
    height: 24px;
    transform: translate3d(63vw, 8vh, 0) rotate(83deg);
  }
  
  .red::after {
    -webkit-animation: red-pseudo linear 20s alternate infinite;
            animation: red-pseudo linear 20s alternate infinite;
    border: 2px solid #b62f56;
    width: 34px;
    height: 34px;
    transform: translate3d(-21vw, -62vh, 0) rotate(8deg);
  }
  
  @-webkit-keyframes red {
    50% {
      transform: translate3d(27vw, 39vh, 0);
    }
    100% {
      transform: translate3d(64vw, 26vh, 0);
    }
  }
  
  @keyframes red {
    50% {
      transform: translate3d(27vw, 39vh, 0);
    }
    100% {
      transform: translate3d(64vw, 26vh, 0);
    }
  }
  @-webkit-keyframes red-pseudo {
    33% {
      transform: translate3d(-5vw, 11vh, 0) rotate(78deg);
    }
    100% {
      transform: translate3d(-52vw, -12vh, 0) rotate(211deg);
    }
  }
  @keyframes red-pseudo {
    33% {
      transform: translate3d(-5vw, 11vh, 0) rotate(78deg);
    }
    100% {
      transform: translate3d(-52vw, -12vh, 0) rotate(211deg);
    }
  }
  .orange {
    -webkit-animation: orange linear 30s alternate infinite;
            animation: orange linear 30s alternate infinite;
    border: 2px solid #d5764c;
    border-radius: 100%;
    width: 19px;
    height: 19px;
    transform: translate3d(25vw, 8vh, 0);
    z-index: 9;
  }
  
  .orange::before {
    -webkit-animation: orange-pseudo linear 15s alternate infinite;
            animation: orange-pseudo linear 15s alternate infinite;
    background: #d5764c;
    border: 2px solid #d5764c;
    width: 23px;
    height: 42px;
    transform: translate3d(62vw, 84vh, 0) rotate(218deg);
  }
  
  .orange::after {
    -webkit-animation: orange-pseudo linear 20s alternate infinite;
            animation: orange-pseudo linear 20s alternate infinite;
    border: 2px solid #d5764c;
    width: 46px;
    height: 49px;
    transform: translate3d(20vw, 47vh, 0) rotate(297deg);
  }
  
  @-webkit-keyframes orange {
    50% {
      transform: translate3d(44vw, 51vh, 0);
    }
    100% {
      transform: translate3d(1vw, 23vh, 0);
    }
  }
  
  @keyframes orange {
    50% {
      transform: translate3d(44vw, 51vh, 0);
    }
    100% {
      transform: translate3d(1vw, 23vh, 0);
    }
  }
  @-webkit-keyframes orange-pseudo {
    33% {
      transform: translate3d(19vw, -14vh, 0) rotate(190deg);
    }
    100% {
      transform: translate3d(59vw, -4vh, 0) rotate(359deg);
    }
  }
  @keyframes orange-pseudo {
    33% {
      transform: translate3d(19vw, -14vh, 0) rotate(190deg);
    }
    100% {
      transform: translate3d(59vw, -4vh, 0) rotate(359deg);
    }
  }
  .yellow {
    -webkit-animation: yellow linear 30s alternate infinite;
            animation: yellow linear 30s alternate infinite;
    border: 2px solid #ffd53e;
    border-radius: 100%;
    width: 48px;
    height: 48px;
    transform: translate3d(46vw, 35vh, 0);
    z-index: 2;
  }
  
  .yellow::before {
    -webkit-animation: yellow-pseudo linear 15s alternate infinite;
            animation: yellow-pseudo linear 15s alternate infinite;
    background: #ffd53e;
    border: 2px solid #ffd53e;
    width: 32px;
    height: 31px;
    transform: translate3d(17vw, 60vh, 0) rotate(12deg);
  }
  
  .yellow::after {
    -webkit-animation: yellow-pseudo linear 20s alternate infinite;
            animation: yellow-pseudo linear 20s alternate infinite;
    border: 2px solid #ffd53e;
    width: 10px;
    height: 47px;
    transform: translate3d(-18vw, 54vh, 0) rotate(290deg);
  }
  
  @-webkit-keyframes yellow {
    50% {
      transform: translate3d(81vw, 63vh, 0);
    }
    100% {
      transform: translate3d(10vw, 82vh, 0);
    }
  }
  
  @keyframes yellow {
    50% {
      transform: translate3d(81vw, 63vh, 0);
    }
    100% {
      transform: translate3d(10vw, 82vh, 0);
    }
  }
  @-webkit-keyframes yellow-pseudo {
    33% {
      transform: translate3d(-74vw, 7vh, 0) rotate(347deg);
    }
    100% {
      transform: translate3d(63vw, -1vh, 0) rotate(191deg);
    }
  }
  @keyframes yellow-pseudo {
    33% {
      transform: translate3d(-74vw, 7vh, 0) rotate(347deg);
    }
    100% {
      transform: translate3d(63vw, -1vh, 0) rotate(191deg);
    }
  }
  .cyan {
    -webkit-animation: cyan linear 30s alternate infinite;
            animation: cyan linear 30s alternate infinite;
    border: 2px solid #78ffba;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    transform: translate3d(29vw, 82vh, 0);
    z-index: 2;
  }
  
  .cyan::before {
    -webkit-animation: cyan-pseudo linear 15s alternate infinite;
            animation: cyan-pseudo linear 15s alternate infinite;
    background: #78ffba;
    border: 2px solid #78ffba;
    width: 11px;
    height: 37px;
    transform: translate3d(37vw, -71vh, 0) rotate(88deg);
  }
  
  .cyan::after {
    -webkit-animation: cyan-pseudo linear 20s alternate infinite;
            animation: cyan-pseudo linear 20s alternate infinite;
    border: 2px solid #78ffba;
    width: 21px;
    height: 7px;
    transform: translate3d(6vw, 8vh, 0) rotate(223deg);
  }
  
  @-webkit-keyframes cyan {
    50% {
      transform: translate3d(64vw, 81vh, 0);
    }
    100% {
      transform: translate3d(52vw, 17vh, 0);
    }
  }
  
  @keyframes cyan {
    50% {
      transform: translate3d(64vw, 81vh, 0);
    }
    100% {
      transform: translate3d(52vw, 17vh, 0);
    }
  }
  @-webkit-keyframes cyan-pseudo {
    33% {
      transform: translate3d(12vw, 12vh, 0) rotate(154deg);
    }
    100% {
      transform: translate3d(45vw, 14vh, 0) rotate(218deg);
    }
  }
  @keyframes cyan-pseudo {
    33% {
      transform: translate3d(12vw, 12vh, 0) rotate(154deg);
    }
    100% {
      transform: translate3d(45vw, 14vh, 0) rotate(218deg);
    }
  }
  .light-green {
    -webkit-animation: light-green linear 30s alternate infinite;
            animation: light-green linear 30s alternate infinite;
    border: 2px solid #98fd85;
    border-radius: 100%;
    width: 16px;
    height: 16px;
    transform: translate3d(49vw, 23vh, 0);
    z-index: 1;
  }
  
  .light-green::before {
    -webkit-animation: light-green-pseudo linear 15s alternate infinite;
            animation: light-green-pseudo linear 15s alternate infinite;
    background: #98fd85;
    border: 2px solid #98fd85;
    width: 49px;
    height: 20px;
    transform: translate3d(-11vw, 43vh, 0) rotate(101deg);
  }
  
  .light-green::after {
    -webkit-animation: light-green-pseudo linear 20s alternate infinite;
            animation: light-green-pseudo linear 20s alternate infinite;
    border: 2px solid #98fd85;
    width: 7px;
    height: 40px;
    transform: translate3d(44vw, 58vh, 0) rotate(194deg);
  }
  
  @-webkit-keyframes light-green {
    50% {
      transform: translate3d(97vw, 90vh, 0);
    }
    100% {
      transform: translate3d(35vw, 59vh, 0);
    }
  }
  
  @keyframes light-green {
    50% {
      transform: translate3d(97vw, 90vh, 0);
    }
    100% {
      transform: translate3d(35vw, 59vh, 0);
    }
  }
  @-webkit-keyframes light-green-pseudo {
    33% {
      transform: translate3d(2vw, -1vh, 0) rotate(163deg);
    }
    100% {
      transform: translate3d(-1vw, -36vh, 0) rotate(172deg);
    }
  }
  @keyframes light-green-pseudo {
    33% {
      transform: translate3d(2vw, -1vh, 0) rotate(163deg);
    }
    100% {
      transform: translate3d(-1vw, -36vh, 0) rotate(172deg);
    }
  }
  .lime {
    -webkit-animation: lime linear 30s alternate infinite;
            animation: lime linear 30s alternate infinite;
    border: 2px solid #befb46;
    border-radius: 100%;
    width: 47px;
    height: 47px;
    transform: translate3d(44vw, 36vh, 0);
    z-index: 6;
  }
  
  .lime::before {
    -webkit-animation: lime-pseudo linear 15s alternate infinite;
            animation: lime-pseudo linear 15s alternate infinite;
    background: #befb46;
    border: 2px solid #befb46;
    width: 39px;
    height: 30px;
    transform: translate3d(44vw, -36vh, 0) rotate(139deg);
  }
  
  .lime::after {
    -webkit-animation: lime-pseudo linear 20s alternate infinite;
            animation: lime-pseudo linear 20s alternate infinite;
    border: 2px solid #befb46;
    width: 17px;
    height: 45px;
    transform: translate3d(53vw, 10vh, 0) rotate(70deg);
  }
  
  @-webkit-keyframes lime {
    50% {
      transform: translate3d(70vw, 88vh, 0);
    }
    100% {
      transform: translate3d(20vw, 54vh, 0);
    }
  }
  
  @keyframes lime {
    50% {
      transform: translate3d(70vw, 88vh, 0);
    }
    100% {
      transform: translate3d(20vw, 54vh, 0);
    }
  }
  @-webkit-keyframes lime-pseudo {
    33% {
      transform: translate3d(-40vw, -23vh, 0) rotate(211deg);
    }
    100% {
      transform: translate3d(11vw, 6vh, 0) rotate(284deg);
    }
  }
  @keyframes lime-pseudo {
    33% {
      transform: translate3d(-40vw, -23vh, 0) rotate(211deg);
    }
    100% {
      transform: translate3d(11vw, 6vh, 0) rotate(284deg);
    }
  }
  .magenta {
    -webkit-animation: magenta linear 30s alternate infinite;
            animation: magenta linear 30s alternate infinite;
    border: 2px solid #6c046c;
    border-radius: 100%;
    width: 16px;
    height: 16px;
    transform: translate3d(53vw, 55vh, 0);
    z-index: 9;
  }
  
  .magenta::before {
    -webkit-animation: magenta-pseudo linear 15s alternate infinite;
            animation: magenta-pseudo linear 15s alternate infinite;
    background: #6c046c;
    border: 2px solid #6c046c;
    width: 44px;
    height: 14px;
    transform: translate3d(12vw, 17vh, 0) rotate(253deg);
  }
  
  .magenta::after {
    -webkit-animation: magenta-pseudo linear 20s alternate infinite;
            animation: magenta-pseudo linear 20s alternate infinite;
    border: 2px solid #6c046c;
    width: 5px;
    height: 9px;
    transform: translate3d(-41vw, -54vh, 0) rotate(64deg);
  }
  
  @-webkit-keyframes magenta {
    50% {
      transform: translate3d(79vw, 61vh, 0);
    }
    100% {
      transform: translate3d(85vw, 1vh, 0);
    }
  }
  
  @keyframes magenta {
    50% {
      transform: translate3d(79vw, 61vh, 0);
    }
    100% {
      transform: translate3d(85vw, 1vh, 0);
    }
  }
  @-webkit-keyframes magenta-pseudo {
    33% {
      transform: translate3d(6vw, -56vh, 0) rotate(247deg);
    }
    100% {
      transform: translate3d(-6vw, 60vh, 0) rotate(355deg);
    }
  }
  @keyframes magenta-pseudo {
    33% {
      transform: translate3d(6vw, -56vh, 0) rotate(247deg);
    }
    100% {
      transform: translate3d(-6vw, 60vh, 0) rotate(355deg);
    }
  }
  .lightish-red {
    -webkit-animation: lightish-red linear 30s alternate infinite;
            animation: lightish-red linear 30s alternate infinite;
    border: 2px solid #f04c81;
    border-radius: 100%;
    width: 38px;
    height: 38px;
    transform: translate3d(30vw, 42vh, 0);
    z-index: 11;
  }
  
  .lightish-red::before {
    -webkit-animation: lightish-red-pseudo linear 15s alternate infinite;
            animation: lightish-red-pseudo linear 15s alternate infinite;
    background: #f04c81;
    border: 2px solid #f04c81;
    width: 46px;
    height: 7px;
    transform: translate3d(57vw, 26vh, 0) rotate(57deg);
  }
  
  .lightish-red::after {
    -webkit-animation: lightish-red-pseudo linear 20s alternate infinite;
            animation: lightish-red-pseudo linear 20s alternate infinite;
    border: 2px solid #f04c81;
    width: 7px;
    height: 7px;
    transform: translate3d(49vw, -10vh, 0) rotate(187deg);
  }
  
  @-webkit-keyframes lightish-red {
    50% {
      transform: translate3d(17vw, 31vh, 0);
    }
    100% {
      transform: translate3d(1vw, 4vh, 0);
    }
  }
  
  @keyframes lightish-red {
    50% {
      transform: translate3d(17vw, 31vh, 0);
    }
    100% {
      transform: translate3d(1vw, 4vh, 0);
    }
  }
  @-webkit-keyframes lightish-red-pseudo {
    33% {
      transform: translate3d(38vw, -20vh, 0) rotate(233deg);
    }
    100% {
      transform: translate3d(48vw, 75vh, 0) rotate(16deg);
    }
  }
  @keyframes lightish-red-pseudo {
    33% {
      transform: translate3d(38vw, -20vh, 0) rotate(233deg);
    }
    100% {
      transform: translate3d(48vw, 75vh, 0) rotate(16deg);
    }
  }
  .pink {
    -webkit-animation: pink linear 30s alternate infinite;
            animation: pink linear 30s alternate infinite;
    border: 2px solid #ff4293;
    border-radius: 100%;
    width: 37px;
    height: 37px;
    transform: translate3d(7vw, 95vh, 0);
    z-index: 4;
  }
  
  .pink::before {
    -webkit-animation: pink-pseudo linear 15s alternate infinite;
            animation: pink-pseudo linear 15s alternate infinite;
    background: #ff4293;
    border: 2px solid #ff4293;
    width: 11px;
    height: 11px;
    transform: translate3d(83vw, -30vh, 0) rotate(108deg);
  }
  
  .pink::after {
    -webkit-animation: pink-pseudo linear 20s alternate infinite;
            animation: pink-pseudo linear 20s alternate infinite;
    border: 2px solid #ff4293;
    width: 47px;
    height: 25px;
    transform: translate3d(92vw, -35vh, 0) rotate(315deg);
  }
  
  @-webkit-keyframes pink {
    50% {
      transform: translate3d(34vw, 87vh, 0);
    }
    100% {
      transform: translate3d(79vw, 30vh, 0);
    }
  }
  
  @keyframes pink {
    50% {
      transform: translate3d(34vw, 87vh, 0);
    }
    100% {
      transform: translate3d(79vw, 30vh, 0);
    }
  }
  @-webkit-keyframes pink-pseudo {
    33% {
      transform: translate3d(-14vw, -76vh, 0) rotate(255deg);
    }
    100% {
      transform: translate3d(16vw, 2vh, 0) rotate(315deg);
    }
  }
  @keyframes pink-pseudo {
    33% {
      transform: translate3d(-14vw, -76vh, 0) rotate(255deg);
    }
    100% {
      transform: translate3d(16vw, 2vh, 0) rotate(315deg);
    }
  }