.fireworks > .before,
.fireworks > .after {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  box-shadow: -120px -218.6667px blue, 248px -16.6667px #00ff84,
    190px 16.3333px #002bff, -113px -308.6667px #ff009d,
    -109px -287.6667px #ffb300, -50px -313.6667px #ff006e,
    226px -31.6667px #ff4000, 180px -351.6667px #ff00d0,
    -12px -338.6667px #00f6ff, 220px -388.6667px #9f0, -69px -27.6667px #ff0400,
    -111px -339.6667px #6200ff, 155px -237.6667px #0df,
    -152px -380.6667px #00ffd0, -50px -37.6667px #0fd, -95px -175.6667px #a6ff00,
    -88px 10.3333px #0d00ff, 112px -309.6667px #005eff, 69px -415.6667px #ff00a6,
    168px -100.6667px #ff004c, -244px 24.3333px #f60, 97px -325.6667px #f06,
    -211px -182.6667px #00ffa2, 236px -126.6667px #b700ff,
    140px -196.6667px #9000ff, 125px -175.6667px #0bf, 118px -381.6667px #ff002f,
    144px -111.6667px #ffae00, 36px -78.6667px #f600ff,
    -63px -196.6667px #c800ff, -218px -227.6667px #d4ff00,
    -134px -377.6667px #ea00ff, -36px -412.6667px #ff00d4,
    209px -106.6667px #00fff2, 91px -278.6667px #000dff,
    -22px -191.6667px #9dff00, 139px -392.6667px #a6ff00, 56px -2.6667px #09f,
    -156px -276.6667px #ea00ff, -163px -233.6667px #00fffb,
    -238px -346.6667px #00ff73, 62px -363.6667px #08f, 244px -170.6667px #0062ff,
    224px -142.6667px #b300ff, 141px -208.6667px #9000ff, 211px -285.6667px #f60,
    181px -128.6667px #1e00ff, 90px -123.6667px #c800ff, 189px 70.3333px #00ffc8,
    -18px -383.6667px #0f3, 100px -6.6667px #ff008c;
  animation: 1s bang ease-out infinite backwards,
    1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
}

.fireworks > .after {
  animation-delay: 1.25s, 1.25s, 1.25s;
  animation-duration: 1.25s, 1.25s, 6.25s;
}

@keyframes bang {
  from {
    box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white,
      0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white,
      0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white,
      0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white,
      0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white,
      0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white,
      0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white,
      0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white,
      0 0 white, 0 0 white, 0 0 white;
  }
}

@keyframes gravity {
  to {
    transform: translateY(200px);
    opacity: 0;
  }
}

@keyframes position {
  0%,
  19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }

  20%,
  39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }

  40%,
  59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }

  60%,
  79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }

  80%,
  99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
