body {
    margin: 0;
    padding: 0;
    background: #ffffff;
    overflow: hidden;
  }
  
  .pyro > .before, .pyro > .after {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
    -moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  }
  
  .pyro > .after {
    -moz-animation-delay: 1.25s, 1.25s, 1.25s;
    -webkit-animation-delay: 1.25s, 1.25s, 1.25s;
    -o-animation-delay: 1.25s, 1.25s, 1.25s;
    -ms-animation-delay: 1.25s, 1.25s, 1.25s;
    animation-delay: 1.25s, 1.25s, 1.25s;
    -moz-animation-duration: 1.25s, 1.25s, 6.25s;
    -webkit-animation-duration: 1.25s, 1.25s, 6.25s;
    -o-animation-duration: 1.25s, 1.25s, 6.25s;
    -ms-animation-duration: 1.25s, 1.25s, 6.25s;
    animation-duration: 1.25s, 1.25s, 6.25s;
  }
  
  @-webkit-keyframes bang {
    to {
      box-shadow: -196px -263.3333333333px #d9ff00, 115px -266.3333333333px #00c8ff, 154px -176.3333333333px #d900ff, -79px -265.3333333333px #00fbff, -190px 40.6666666667px #00ffd0, 77px -96.3333333333px #ff0084, 13px -228.3333333333px #ff8400, 168px -107.3333333333px #00ff1a, -102px 28.6666666667px #00bbff, 191px -15.3333333333px #00ff51, -131px 9.6666666667px #00d5ff, -48px -21.3333333333px #ff0011, 248px -302.3333333333px #ff000d, -7px 57.6666666667px #ffe100, -147px -17.3333333333px #66ff00, -212px -86.3333333333px #00aaff, 49px -43.3333333333px #ff5500, 240px -130.3333333333px #0055ff, 229px -149.3333333333px #d000ff, 95px -17.3333333333px #11ff00, -22px -21.3333333333px #00ffdd, -67px -34.3333333333px #ff001a, -13px -329.3333333333px #009dff, -87px -87.3333333333px #00ff40, 150px -131.3333333333px #0084ff, -106px 62.6666666667px #00ff2f, -186px -272.3333333333px #ff001a, 42px -203.3333333333px #4dff00, -243px -288.3333333333px #00ff37, 194px -258.3333333333px #ff00b7, -177px -97.3333333333px #59ff00, -88px -299.3333333333px #ffbb00, -108px 2.6666666667px #6fff00, 127px -106.3333333333px #7300ff, 39px -95.3333333333px #1500ff, -168px -152.3333333333px #00fffb, 149px 54.6666666667px #ff00aa, -213px -138.3333333333px #00c8ff, 12px -267.3333333333px #ff0009, -204px 17.6666666667px #ff00d5, -65px 28.6666666667px #00ff84, 174px -141.3333333333px #00c4ff, 4px 6.6666666667px #9900ff, -129px -187.3333333333px #eaff00, -88px -34.3333333333px #00ffae, -141px -139.3333333333px #ff003c, -64px -26.3333333333px #ff00fb, 23px -246.3333333333px #0091ff, 76px -127.3333333333px #00f2ff, 202px -93.3333333333px #00bbff, -195px 47.6666666667px #bb00ff, 39px -109.3333333333px #ff00b7, 138px -189.3333333333px #aa00ff, 110px -51.3333333333px #ff0400, -52px 20.6666666667px #c8ff00, 37px -120.3333333333px #44ff00, 222px -319.3333333333px #ffe600, 99px -154.3333333333px #aa00ff, 243px -7.3333333333px #2f00ff, 187px -266.3333333333px #004dff, -132px -122.3333333333px #a2ff00;
    }
  }
  @-moz-keyframes bang {
    to {
      box-shadow: -196px -263.3333333333px #d9ff00, 115px -266.3333333333px #00c8ff, 154px -176.3333333333px #d900ff, -79px -265.3333333333px #00fbff, -190px 40.6666666667px #00ffd0, 77px -96.3333333333px #ff0084, 13px -228.3333333333px #ff8400, 168px -107.3333333333px #00ff1a, -102px 28.6666666667px #00bbff, 191px -15.3333333333px #00ff51, -131px 9.6666666667px #00d5ff, -48px -21.3333333333px #ff0011, 248px -302.3333333333px #ff000d, -7px 57.6666666667px #ffe100, -147px -17.3333333333px #66ff00, -212px -86.3333333333px #00aaff, 49px -43.3333333333px #ff5500, 240px -130.3333333333px #0055ff, 229px -149.3333333333px #d000ff, 95px -17.3333333333px #11ff00, -22px -21.3333333333px #00ffdd, -67px -34.3333333333px #ff001a, -13px -329.3333333333px #009dff, -87px -87.3333333333px #00ff40, 150px -131.3333333333px #0084ff, -106px 62.6666666667px #00ff2f, -186px -272.3333333333px #ff001a, 42px -203.3333333333px #4dff00, -243px -288.3333333333px #00ff37, 194px -258.3333333333px #ff00b7, -177px -97.3333333333px #59ff00, -88px -299.3333333333px #ffbb00, -108px 2.6666666667px #6fff00, 127px -106.3333333333px #7300ff, 39px -95.3333333333px #1500ff, -168px -152.3333333333px #00fffb, 149px 54.6666666667px #ff00aa, -213px -138.3333333333px #00c8ff, 12px -267.3333333333px #ff0009, -204px 17.6666666667px #ff00d5, -65px 28.6666666667px #00ff84, 174px -141.3333333333px #00c4ff, 4px 6.6666666667px #9900ff, -129px -187.3333333333px #eaff00, -88px -34.3333333333px #00ffae, -141px -139.3333333333px #ff003c, -64px -26.3333333333px #ff00fb, 23px -246.3333333333px #0091ff, 76px -127.3333333333px #00f2ff, 202px -93.3333333333px #00bbff, -195px 47.6666666667px #bb00ff, 39px -109.3333333333px #ff00b7, 138px -189.3333333333px #aa00ff, 110px -51.3333333333px #ff0400, -52px 20.6666666667px #c8ff00, 37px -120.3333333333px #44ff00, 222px -319.3333333333px #ffe600, 99px -154.3333333333px #aa00ff, 243px -7.3333333333px #2f00ff, 187px -266.3333333333px #004dff, -132px -122.3333333333px #a2ff00;
    }
  }
  @-o-keyframes bang {
    to {
      box-shadow: -196px -263.3333333333px #d9ff00, 115px -266.3333333333px #00c8ff, 154px -176.3333333333px #d900ff, -79px -265.3333333333px #00fbff, -190px 40.6666666667px #00ffd0, 77px -96.3333333333px #ff0084, 13px -228.3333333333px #ff8400, 168px -107.3333333333px #00ff1a, -102px 28.6666666667px #00bbff, 191px -15.3333333333px #00ff51, -131px 9.6666666667px #00d5ff, -48px -21.3333333333px #ff0011, 248px -302.3333333333px #ff000d, -7px 57.6666666667px #ffe100, -147px -17.3333333333px #66ff00, -212px -86.3333333333px #00aaff, 49px -43.3333333333px #ff5500, 240px -130.3333333333px #0055ff, 229px -149.3333333333px #d000ff, 95px -17.3333333333px #11ff00, -22px -21.3333333333px #00ffdd, -67px -34.3333333333px #ff001a, -13px -329.3333333333px #009dff, -87px -87.3333333333px #00ff40, 150px -131.3333333333px #0084ff, -106px 62.6666666667px #00ff2f, -186px -272.3333333333px #ff001a, 42px -203.3333333333px #4dff00, -243px -288.3333333333px #00ff37, 194px -258.3333333333px #ff00b7, -177px -97.3333333333px #59ff00, -88px -299.3333333333px #ffbb00, -108px 2.6666666667px #6fff00, 127px -106.3333333333px #7300ff, 39px -95.3333333333px #1500ff, -168px -152.3333333333px #00fffb, 149px 54.6666666667px #ff00aa, -213px -138.3333333333px #00c8ff, 12px -267.3333333333px #ff0009, -204px 17.6666666667px #ff00d5, -65px 28.6666666667px #00ff84, 174px -141.3333333333px #00c4ff, 4px 6.6666666667px #9900ff, -129px -187.3333333333px #eaff00, -88px -34.3333333333px #00ffae, -141px -139.3333333333px #ff003c, -64px -26.3333333333px #ff00fb, 23px -246.3333333333px #0091ff, 76px -127.3333333333px #00f2ff, 202px -93.3333333333px #00bbff, -195px 47.6666666667px #bb00ff, 39px -109.3333333333px #ff00b7, 138px -189.3333333333px #aa00ff, 110px -51.3333333333px #ff0400, -52px 20.6666666667px #c8ff00, 37px -120.3333333333px #44ff00, 222px -319.3333333333px #ffe600, 99px -154.3333333333px #aa00ff, 243px -7.3333333333px #2f00ff, 187px -266.3333333333px #004dff, -132px -122.3333333333px #a2ff00;
    }
  }
  @-ms-keyframes bang {
    to {
      box-shadow: -196px -263.3333333333px #d9ff00, 115px -266.3333333333px #00c8ff, 154px -176.3333333333px #d900ff, -79px -265.3333333333px #00fbff, -190px 40.6666666667px #00ffd0, 77px -96.3333333333px #ff0084, 13px -228.3333333333px #ff8400, 168px -107.3333333333px #00ff1a, -102px 28.6666666667px #00bbff, 191px -15.3333333333px #00ff51, -131px 9.6666666667px #00d5ff, -48px -21.3333333333px #ff0011, 248px -302.3333333333px #ff000d, -7px 57.6666666667px #ffe100, -147px -17.3333333333px #66ff00, -212px -86.3333333333px #00aaff, 49px -43.3333333333px #ff5500, 240px -130.3333333333px #0055ff, 229px -149.3333333333px #d000ff, 95px -17.3333333333px #11ff00, -22px -21.3333333333px #00ffdd, -67px -34.3333333333px #ff001a, -13px -329.3333333333px #009dff, -87px -87.3333333333px #00ff40, 150px -131.3333333333px #0084ff, -106px 62.6666666667px #00ff2f, -186px -272.3333333333px #ff001a, 42px -203.3333333333px #4dff00, -243px -288.3333333333px #00ff37, 194px -258.3333333333px #ff00b7, -177px -97.3333333333px #59ff00, -88px -299.3333333333px #ffbb00, -108px 2.6666666667px #6fff00, 127px -106.3333333333px #7300ff, 39px -95.3333333333px #1500ff, -168px -152.3333333333px #00fffb, 149px 54.6666666667px #ff00aa, -213px -138.3333333333px #00c8ff, 12px -267.3333333333px #ff0009, -204px 17.6666666667px #ff00d5, -65px 28.6666666667px #00ff84, 174px -141.3333333333px #00c4ff, 4px 6.6666666667px #9900ff, -129px -187.3333333333px #eaff00, -88px -34.3333333333px #00ffae, -141px -139.3333333333px #ff003c, -64px -26.3333333333px #ff00fb, 23px -246.3333333333px #0091ff, 76px -127.3333333333px #00f2ff, 202px -93.3333333333px #00bbff, -195px 47.6666666667px #bb00ff, 39px -109.3333333333px #ff00b7, 138px -189.3333333333px #aa00ff, 110px -51.3333333333px #ff0400, -52px 20.6666666667px #c8ff00, 37px -120.3333333333px #44ff00, 222px -319.3333333333px #ffe600, 99px -154.3333333333px #aa00ff, 243px -7.3333333333px #2f00ff, 187px -266.3333333333px #004dff, -132px -122.3333333333px #a2ff00;
    }
  }
  @keyframes bang {
    to {
      box-shadow: -196px -263.3333333333px #d9ff00, 115px -266.3333333333px #00c8ff, 154px -176.3333333333px #d900ff, -79px -265.3333333333px #00fbff, -190px 40.6666666667px #00ffd0, 77px -96.3333333333px #ff0084, 13px -228.3333333333px #ff8400, 168px -107.3333333333px #00ff1a, -102px 28.6666666667px #00bbff, 191px -15.3333333333px #00ff51, -131px 9.6666666667px #00d5ff, -48px -21.3333333333px #ff0011, 248px -302.3333333333px #ff000d, -7px 57.6666666667px #ffe100, -147px -17.3333333333px #66ff00, -212px -86.3333333333px #00aaff, 49px -43.3333333333px #ff5500, 240px -130.3333333333px #0055ff, 229px -149.3333333333px #d000ff, 95px -17.3333333333px #11ff00, -22px -21.3333333333px #00ffdd, -67px -34.3333333333px #ff001a, -13px -329.3333333333px #009dff, -87px -87.3333333333px #00ff40, 150px -131.3333333333px #0084ff, -106px 62.6666666667px #00ff2f, -186px -272.3333333333px #ff001a, 42px -203.3333333333px #4dff00, -243px -288.3333333333px #00ff37, 194px -258.3333333333px #ff00b7, -177px -97.3333333333px #59ff00, -88px -299.3333333333px #ffbb00, -108px 2.6666666667px #6fff00, 127px -106.3333333333px #7300ff, 39px -95.3333333333px #1500ff, -168px -152.3333333333px #00fffb, 149px 54.6666666667px #ff00aa, -213px -138.3333333333px #00c8ff, 12px -267.3333333333px #ff0009, -204px 17.6666666667px #ff00d5, -65px 28.6666666667px #00ff84, 174px -141.3333333333px #00c4ff, 4px 6.6666666667px #9900ff, -129px -187.3333333333px #eaff00, -88px -34.3333333333px #00ffae, -141px -139.3333333333px #ff003c, -64px -26.3333333333px #ff00fb, 23px -246.3333333333px #0091ff, 76px -127.3333333333px #00f2ff, 202px -93.3333333333px #00bbff, -195px 47.6666666667px #bb00ff, 39px -109.3333333333px #ff00b7, 138px -189.3333333333px #aa00ff, 110px -51.3333333333px #ff0400, -52px 20.6666666667px #c8ff00, 37px -120.3333333333px #44ff00, 222px -319.3333333333px #ffe600, 99px -154.3333333333px #aa00ff, 243px -7.3333333333px #2f00ff, 187px -266.3333333333px #004dff, -132px -122.3333333333px #a2ff00;
    }
  }
  @-webkit-keyframes gravity {
    to {
      transform: translateY(200px);
      -moz-transform: translateY(200px);
      -webkit-transform: translateY(200px);
      -o-transform: translateY(200px);
      -ms-transform: translateY(200px);
      opacity: 0;
    }
  }
  @-moz-keyframes gravity {
    to {
      transform: translateY(200px);
      -moz-transform: translateY(200px);
      -webkit-transform: translateY(200px);
      -o-transform: translateY(200px);
      -ms-transform: translateY(200px);
      opacity: 0;
    }
  }
  @-o-keyframes gravity {
    to {
      transform: translateY(200px);
      -moz-transform: translateY(200px);
      -webkit-transform: translateY(200px);
      -o-transform: translateY(200px);
      -ms-transform: translateY(200px);
      opacity: 0;
    }
  }
  @-ms-keyframes gravity {
    to {
      transform: translateY(200px);
      -moz-transform: translateY(200px);
      -webkit-transform: translateY(200px);
      -o-transform: translateY(200px);
      -ms-transform: translateY(200px);
      opacity: 0;
    }
  }
  @keyframes gravity {
    to {
      transform: translateY(200px);
      -moz-transform: translateY(200px);
      -webkit-transform: translateY(200px);
      -o-transform: translateY(200px);
      -ms-transform: translateY(200px);
      opacity: 0;
    }
  }
  @-webkit-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%;
    }
  }
  @-moz-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%;
    }
  }
  @-o-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%;
    }
  }
  @-ms-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%;
    }
  }
  @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%;
    }
  }