body {
    margin: 0;
    padding: 0;
}

.pyro > .before, .pyro > .after {
    position: absolute;
    width: 5px;
    height: 5px;
    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;
    -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: 221px -239.66667px #2f00ff, 217px -324.66667px #ff0044, 0px -404.66667px #a600ff, -7px 64.33333px #99ff00, -70px -61.66667px #ffb300, -12px -60.66667px #dd00ff, -40px -301.66667px #00eeff, 117px -126.66667px #bb00ff, -28px -356.66667px #00ff6a, -71px -154.66667px #ff00bb, -118px -249.66667px darkorange, 45px -86.66667px #d400ff, 13px -258.66667px #00ffe1, 31px -123.66667px #ff8800, 139px 32.33333px #ff0026, 24px -246.66667px #08ff00, 160px -208.66667px #40ff00, 61px -132.66667px #00ff80, 207px -130.66667px #2bff00, 220px 5.33333px #ffbf00, 97px -156.66667px #ff1500, -8px 56.33333px #ee00ff, -2px -247.66667px #00ddff, -91px 1.33333px #7f00ff, -75px -32.66667px #0059ff, -70px -4.66667px #6600ff, 42px -79.66667px #ff00fb, 32px -28.66667px #ff0033, -11px -205.66667px #ff0004, -238px -147.66667px #ff0095, 152px -306.66667px #ffaa00, 36px -275.66667px #ff6a00, 172px -398.66667px #ff4400, 139px -405.66667px #fb00ff, -137px -405.66667px #ff1100, 105px -341.66667px #00b2ff, -78px -234.66667px #00ffa2, -67px -265.66667px #007fff, -154px -260.66667px #ffaa00, 13px -331.66667px #ea00ff, 140px -85.66667px #7700ff, 184px -258.66667px #e100ff, -196px 8.33333px #eaff00, 12px -276.66667px #ffea00, -92px 1.33333px #ff00bb, -178px -355.66667px #ff8800, -130px -197.66667px #0062ff, 199px 52.33333px #ff0095, 158px -1.66667px #0033ff, 126px -372.66667px #00ff40, -212px -121.66667px #99ff00;
    }
}

@-moz-keyframes bang {
    to {
        box-shadow: 221px -239.66667px #2f00ff, 217px -324.66667px #ff0044, 0px -404.66667px #a600ff, -7px 64.33333px #99ff00, -70px -61.66667px #ffb300, -12px -60.66667px #dd00ff, -40px -301.66667px #00eeff, 117px -126.66667px #bb00ff, -28px -356.66667px #00ff6a, -71px -154.66667px #ff00bb, -118px -249.66667px darkorange, 45px -86.66667px #d400ff, 13px -258.66667px #00ffe1, 31px -123.66667px #ff8800, 139px 32.33333px #ff0026, 24px -246.66667px #08ff00, 160px -208.66667px #40ff00, 61px -132.66667px #00ff80, 207px -130.66667px #2bff00, 220px 5.33333px #ffbf00, 97px -156.66667px #ff1500, -8px 56.33333px #ee00ff, -2px -247.66667px #00ddff, -91px 1.33333px #7f00ff, -75px -32.66667px #0059ff, -70px -4.66667px #6600ff, 42px -79.66667px #ff00fb, 32px -28.66667px #ff0033, -11px -205.66667px #ff0004, -238px -147.66667px #ff0095, 152px -306.66667px #ffaa00, 36px -275.66667px #ff6a00, 172px -398.66667px #ff4400, 139px -405.66667px #fb00ff, -137px -405.66667px #ff1100, 105px -341.66667px #00b2ff, -78px -234.66667px #00ffa2, -67px -265.66667px #007fff, -154px -260.66667px #ffaa00, 13px -331.66667px #ea00ff, 140px -85.66667px #7700ff, 184px -258.66667px #e100ff, -196px 8.33333px #eaff00, 12px -276.66667px #ffea00, -92px 1.33333px #ff00bb, -178px -355.66667px #ff8800, -130px -197.66667px #0062ff, 199px 52.33333px #ff0095, 158px -1.66667px #0033ff, 126px -372.66667px #00ff40, -212px -121.66667px #99ff00;
    }
}

@-o-keyframes bang {
    to {
        box-shadow: 221px -239.66667px #2f00ff, 217px -324.66667px #ff0044, 0px -404.66667px #a600ff, -7px 64.33333px #99ff00, -70px -61.66667px #ffb300, -12px -60.66667px #dd00ff, -40px -301.66667px #00eeff, 117px -126.66667px #bb00ff, -28px -356.66667px #00ff6a, -71px -154.66667px #ff00bb, -118px -249.66667px darkorange, 45px -86.66667px #d400ff, 13px -258.66667px #00ffe1, 31px -123.66667px #ff8800, 139px 32.33333px #ff0026, 24px -246.66667px #08ff00, 160px -208.66667px #40ff00, 61px -132.66667px #00ff80, 207px -130.66667px #2bff00, 220px 5.33333px #ffbf00, 97px -156.66667px #ff1500, -8px 56.33333px #ee00ff, -2px -247.66667px #00ddff, -91px 1.33333px #7f00ff, -75px -32.66667px #0059ff, -70px -4.66667px #6600ff, 42px -79.66667px #ff00fb, 32px -28.66667px #ff0033, -11px -205.66667px #ff0004, -238px -147.66667px #ff0095, 152px -306.66667px #ffaa00, 36px -275.66667px #ff6a00, 172px -398.66667px #ff4400, 139px -405.66667px #fb00ff, -137px -405.66667px #ff1100, 105px -341.66667px #00b2ff, -78px -234.66667px #00ffa2, -67px -265.66667px #007fff, -154px -260.66667px #ffaa00, 13px -331.66667px #ea00ff, 140px -85.66667px #7700ff, 184px -258.66667px #e100ff, -196px 8.33333px #eaff00, 12px -276.66667px #ffea00, -92px 1.33333px #ff00bb, -178px -355.66667px #ff8800, -130px -197.66667px #0062ff, 199px 52.33333px #ff0095, 158px -1.66667px #0033ff, 126px -372.66667px #00ff40, -212px -121.66667px #99ff00;
    }
}

@-ms-keyframes bang {
    to {
        box-shadow: 221px -239.66667px #2f00ff, 217px -324.66667px #ff0044, 0px -404.66667px #a600ff, -7px 64.33333px #99ff00, -70px -61.66667px #ffb300, -12px -60.66667px #dd00ff, -40px -301.66667px #00eeff, 117px -126.66667px #bb00ff, -28px -356.66667px #00ff6a, -71px -154.66667px #ff00bb, -118px -249.66667px darkorange, 45px -86.66667px #d400ff, 13px -258.66667px #00ffe1, 31px -123.66667px #ff8800, 139px 32.33333px #ff0026, 24px -246.66667px #08ff00, 160px -208.66667px #40ff00, 61px -132.66667px #00ff80, 207px -130.66667px #2bff00, 220px 5.33333px #ffbf00, 97px -156.66667px #ff1500, -8px 56.33333px #ee00ff, -2px -247.66667px #00ddff, -91px 1.33333px #7f00ff, -75px -32.66667px #0059ff, -70px -4.66667px #6600ff, 42px -79.66667px #ff00fb, 32px -28.66667px #ff0033, -11px -205.66667px #ff0004, -238px -147.66667px #ff0095, 152px -306.66667px #ffaa00, 36px -275.66667px #ff6a00, 172px -398.66667px #ff4400, 139px -405.66667px #fb00ff, -137px -405.66667px #ff1100, 105px -341.66667px #00b2ff, -78px -234.66667px #00ffa2, -67px -265.66667px #007fff, -154px -260.66667px #ffaa00, 13px -331.66667px #ea00ff, 140px -85.66667px #7700ff, 184px -258.66667px #e100ff, -196px 8.33333px #eaff00, 12px -276.66667px #ffea00, -92px 1.33333px #ff00bb, -178px -355.66667px #ff8800, -130px -197.66667px #0062ff, 199px 52.33333px #ff0095, 158px -1.66667px #0033ff, 126px -372.66667px #00ff40, -212px -121.66667px #99ff00;
    }
}

@keyframes bang {
    to {
        box-shadow: 221px -239.66667px #2f00ff, 217px -324.66667px #ff0044, 0px -404.66667px #a600ff, -7px 64.33333px #99ff00, -70px -61.66667px #ffb300, -12px -60.66667px #dd00ff, -40px -301.66667px #00eeff, 117px -126.66667px #bb00ff, -28px -356.66667px #00ff6a, -71px -154.66667px #ff00bb, -118px -249.66667px darkorange, 45px -86.66667px #d400ff, 13px -258.66667px #00ffe1, 31px -123.66667px #ff8800, 139px 32.33333px #ff0026, 24px -246.66667px #08ff00, 160px -208.66667px #40ff00, 61px -132.66667px #00ff80, 207px -130.66667px #2bff00, 220px 5.33333px #ffbf00, 97px -156.66667px #ff1500, -8px 56.33333px #ee00ff, -2px -247.66667px #00ddff, -91px 1.33333px #7f00ff, -75px -32.66667px #0059ff, -70px -4.66667px #6600ff, 42px -79.66667px #ff00fb, 32px -28.66667px #ff0033, -11px -205.66667px #ff0004, -238px -147.66667px #ff0095, 152px -306.66667px #ffaa00, 36px -275.66667px #ff6a00, 172px -398.66667px #ff4400, 139px -405.66667px #fb00ff, -137px -405.66667px #ff1100, 105px -341.66667px #00b2ff, -78px -234.66667px #00ffa2, -67px -265.66667px #007fff, -154px -260.66667px #ffaa00, 13px -331.66667px #ea00ff, 140px -85.66667px #7700ff, 184px -258.66667px #e100ff, -196px 8.33333px #eaff00, 12px -276.66667px #ffea00, -92px 1.33333px #ff00bb, -178px -355.66667px #ff8800, -130px -197.66667px #0062ff, 199px 52.33333px #ff0095, 158px -1.66667px #0033ff, 126px -372.66667px #00ff40, -212px -121.66667px #99ff00;
    }
}

@-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%;
    }
}