@import url("https://fonts.googleapis.com/css?family=Concert+One|Pacifico");

.mobile {
    position: fixed;
    text-align: center;
    width: 100%;
    top: 50px;
    font-size: 90px;
    display: block;
}

h1,
h2,
span {
    display: none;
}

@media screen and (min-width: 670px) {
    .mobile {
        display: none;
    }

    h1,
    h2,
    span {
        display: block;
    }

    body {
        overflow: hidden;
        background: linear-gradient(to right, #e2b8f7, #d4bafa, #c7bcfb, #b9befb, #acbff9);
        perspective: 1000px;
        transform-style: preserve-3d;
        font-family: "Pacifico", cursive;
        transition: all .6s;
    }

    h1 {
        position: fixed;
        text-align: center;
        width: 100%;
        top: 50px;
        font-size: 90px;
        background: -webkit-linear-gradient(0deg, #fcadf2 0%, #e9a3fb 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-family: 'Concert One', cursive;
        font-weight: 400;
        z-index: -1;
        letter-spacing: 6px;
        transition: all .3s;
    }

    span {
        position: fixed;
        text-align: center;
        width: 100%;
        top: 70px;
        font-size: 70px;
    }

    h2 {
        position: fixed;
        text-align: center;
        width: 100%;
        top: 50px;
        font-size: 90px;
        background: -webkit-linear-gradient(90deg, #e9e6ff 0%, white 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transition: all .3s;
    }

    bokeh {
        position: fixed;
        width: 2vmin;
        height: 2vmin;
        border-radius: 50%;
        animation-name: explosion;
        animation-iteration-count: infinite;
        animation-direction: reverse;
        animation-timing-function: cubic-bezier(0.84, 0.02, 1, 1);
    }

    bokeh:nth-child(1) {
        background-color: #2bd8ff;
        transform: translate(70.7404476506vw, 39.2982912115vh);
        animation-duration: 2.451477853s;
        animation-delay: -3.9090695973s;
    }

    bokeh:nth-child(2) {
        background-color: #feff28;
        transform: translate(21.390916309vw, 83.9320950239vh);
        animation-duration: 2.6082661613s;
        animation-delay: -2.4177632704s;
    }

    bokeh:nth-child(3) {
        background-color: #feff28;
        transform: translate(89.4707896083vw, 50.8779038063vh);
        animation-duration: 2.3934609219s;
        animation-delay: -4.9374235187s;
    }

    bokeh:nth-child(4) {
        background-color: #ef8d22;
        transform: translate(88.0762428158vw, 60.8758646268vh);
        animation-duration: 4.3745762554s;
        animation-delay: -4.2335574629s;
    }

    bokeh:nth-child(5) {
        background-color: #feff28;
        transform: translate(87.209776097vw, 87.4722435411vh);
        animation-duration: 2.6247180243s;
        animation-delay: -0.3571633852s;
    }

    bokeh:nth-child(6) {
        background-color: #feff28;
        transform: translate(67.5348277973vw, 93.8934516001vh);
        animation-duration: 3.0630744908s;
        animation-delay: -4.4890304964s;
    }

    bokeh:nth-child(7) {
        background-color: #feff28;
        transform: translate(51.2278043561vw, 39.0030857051vh);
        animation-duration: 3.1065374294s;
        animation-delay: -4.5619134997s;
    }

    bokeh:nth-child(8) {
        background-color: #fc85e1;
        transform: translate(63.2547804674vw, 88.7449965817vh);
        animation-duration: 2.8384921355s;
        animation-delay: -0.0965491775s;
    }

    bokeh:nth-child(9) {
        background-color: #fc85e1;
        transform: translate(1.7747115187vw, 78.6520215079vh);
        animation-duration: 4.3100039072s;
        animation-delay: -0.553894004s;
    }

    bokeh:nth-child(10) {
        background-color: #ef8d22;
        transform: translate(61.1915375825vw, 46.9592056036vh);
        animation-duration: 2.6244512022s;
        animation-delay: -4.5897035553s;
    }

    bokeh:nth-child(11) {
        background-color: #ef8d22;
        transform: translate(4.3118502657vw, 31.3689335931vh);
        animation-duration: 2.9020870937s;
        animation-delay: -0.0475365525s;
    }

    bokeh:nth-child(12) {
        background-color: #fc85e1;
        transform: translate(11.7124176675vw, 39.3853134156vh);
        animation-duration: 2.7165067308s;
        animation-delay: -0.3402677425s;
    }

    bokeh:nth-child(13) {
        background-color: #fc85e1;
        transform: translate(94.2835231134vw, 15.247368654vh);
        animation-duration: 3.1761028617s;
        animation-delay: -4.3999397039s;
    }

    bokeh:nth-child(14) {
        background-color: #ef8d22;
        transform: translate(22.7721270307vw, 68.9730094645vh);
        animation-duration: 3.6217481701s;
        animation-delay: -4.3121585024s;
    }

    bokeh:nth-child(15) {
        background-color: #2bd8ff;
        transform: translate(82.1182207545vw, 11.2392421851vh);
        animation-duration: 3.4960993434s;
        animation-delay: -3.7739573258s;
    }

    bokeh:nth-child(16) {
        background-color: #2bd8ff;
        transform: translate(19.7968006723vw, 77.2717558727vh);
        animation-duration: 3.1354637591s;
        animation-delay: -2.8370634184s;
    }

    bokeh:nth-child(17) {
        background-color: #feff28;
        transform: translate(84.4109063964vw, 23.5168492096vh);
        animation-duration: 4.3723964886s;
        animation-delay: -1.7390935649s;
    }

    bokeh:nth-child(18) {
        background-color: #fc85e1;
        transform: translate(72.7671083205vw, 62.5592027903vh);
        animation-duration: 4.4313534479s;
        animation-delay: -3.0082038529s;
    }

    bokeh:nth-child(19) {
        background-color: #2bd8ff;
        transform: translate(79.3141365436vw, 1.3143345978vh);
        animation-duration: 2.392781523s;
        animation-delay: -0.261672225s;
    }

    bokeh:nth-child(20) {
        background-color: #ef8d22;
        transform: translate(29.2041570725vw, 86.8219678576vh);
        animation-duration: 3.7180833613s;
        animation-delay: -1.7317238209s;
    }

    @keyframes explosion {
        0% {
            opacity: 0;
        }

        70% {
            opacity: 1;
        }

        100% {
            transform: translate(50vw, 100vh);
        }
    }

    .cake {
        position: relative;
        z-index: 2;
        top: 310px;
        margin: auto;
        width: 200px;
        height: 60px;
        background: #f9fdff;
        border-radius: 100%;
        transform: translateZ(100px);
        transition: all .5s;
        box-shadow: 0px 4px 0px #f4f9fd, 0px 8px 0px #dba9ff, 0px 12px 0px #fec3b3, 0px 16px 0px #f7f6fb, 0px 20px 0px #f7f6fb, 0px 24px 0px #f7f6fb, 0px 28px 0px #f7f6fb, 0px 32px 0px #fea0bb, 0px 36px 0px #fea0bb, 0px 40px 0px #9cef9d, 0px 44px 0px #9cef9d, 0px 48px 0px #f7f6fb, 0px 52px 0px #f7f6fb, 0px 56px 0px #f7f6fb, 0px 60px 0px #f7f6fb, 0px 64px 0px #f7f6fb, 0px 68px 0px #dfa5fc, 0px 72px 0px #dfa5fc, 0px 76px 0px #fafffe, 0px 80px 0px #fafffe;
    }

    .dark {
        filter: brightness(.8);
    }

    .cake::before {
        content: '1 8';
        position: absolute;
        font-size: 60px;
        color: #fff;
        top: 100px;
        left: 28%;
        letter-spacing: 5px;
        text-shadow: 1px 0px 6px #000;
        transition: all .3s;
    }

    .plate {
        position: absolute;
        z-index: 1;
        height: 90px;
        width: 300px;
        bottom: -95px;
        left: 50%;
        top: 440px;
        margin-left: -150px;
        border-radius: 100%;
        background: radial-gradient(ellipse closest-side at center, #08c7fe 0%, #04d7f2 71%, #02ffd0 100%);
        box-shadow: 0px 3px 0px #00e2e1, 0px 6px 0px #00d3fb;
        transform: translateZ(80px);
        transition: all .5s;
    }

    .candle {
        position: relative;
        z-index: 3;
        height: 50px;
        width: 12px;
        top: 330px;
        margin: auto;
        background: linear-gradient(0deg, #fd7db7 0%, white 100%);
        border-radius: 4px;
        transform: translateZ(120px);
    }

    .candle.shadow::before {
        content: '';
        position: absolute;
        box-shadow: 0px 0px 150px 80px #ff9900;
        z-index: 0;
        left: 10px;
        top: 0px;
        border-radius: 50%;
        opacity: 0;
        animation: lightup .8s forwards;
    }

    @keyframes lightup {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
        
    }

    .box {
      width: 100%;
      text-align: center;
      position: absolute;
      top: 660px;
    }

    button {
        position: relative;
        width: 180px;
        height: 55px;
        font-size: 21px;
        color: #fff;
        border: none;
        box-shadow: 0 0 10px 1px #ff73b3;
        background-color: #ff73b3;
        transition: all .3s ease;
        cursor: pointer;
        z-index: 10;
        padding-left: 20px;
    }

    button:before,
    button:after {
        position: absolute;
        content: '';
        display: block;
        width: 140%;
        height: 100%;
        left: -20%;
        z-index: -1000;
        transition: all ease-in-out 0.5s;
        background-repeat: no-repeat;
    }

    button:before {
        display: none;
        top: -75%;
        background-image: radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 20%, #ff0081 20%, transparent 30%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%);
        background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
    }

    button:after {
        display: none;
        bottom: -75%;
        background-image: radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%);
        background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
    }

    button:active {
        transform: scale(0.9);
        background-color: #f1097e;
        box-shadow: 0 2px 25px rgba(255, 0, 130, 0.2);
    }

    button.animate:before {
        content: '';
        display: block;
        animation: topBubbles ease-in-out 0.75s forwards;
    }

    button.animate:after {
        content: '';
        display: block;
        animation: bottomBubbles ease-in-out 0.75s forwards;
    }

    button img {
        width: 55px;
        position: absolute;
        left: 15px;
        top: 0;
    }

    @keyframes topBubbles {
        0% {
            background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
        }

        50% {
            background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
        }

        100% {
            background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
            background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
        }
    }

    @keyframes bottomBubbles {
        0% {
            background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
        }

        50% {
            background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
        }

        100% {
            background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
            background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
        }
    }

    #flame {
        position: absolute;
        z-index: 10;
    }

    .lit {
        background: linear-gradient(to bottom, #FFF6D9, #FBC36C);
        width: 15px;
        height: 35px;
        /*  Info on border radius. http://www.css3.info/preview/rounded-border/ */
        border-top-left-radius: 10px 35px;
        border-top-right-radius: 10px 35px;
        border-bottom-right-radius: 10px 10px;
        border-bottom-left-radius: 10px 10px;
        top: -34px;
        margin: auto;
        /*   http://www.css3.info/preview/box-shadow/ */
        box-shadow: 0 0 17px 7px rgba(251, 246, 190, 0.71);
        transform-origin: bottom;
        animation: flicker 1s ease-in-out alternate infinite;
    }

    @keyframes flicker {
        0% {
            transform: skewX(5deg);
            box-shadow: 0 0 17px 10px rgba(251, 246, 190, 0.71);
        }

        25% {
            transform: skewX(-5deg);
            box-shadow: 0 0 17px 5px rgba(251, 246, 190, 0.71);
        }

        50% {
            transform: skewX(10deg);
            box-shadow: 0 0 17px 7px rgba(251, 246, 190, 0.71);
        }

        75% {
            transform: skewX(-10deg);
            box-shadow: 0 0 17px 5px rgba(251, 246, 190, 0.71);
        }

        100% {
            transform: skewX(5deg);
            box-shadow: 0 0 17px 10px rgba(251, 246, 190, 0.71);
        }
    }

    .pyro>.before,
    .pyro>.after {
        position: fixed;
        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: -110px -104.6666666667px #00ff51, -3px 36.3333333333px #5eff00, 249px -295.6666666667px #00ff84, -165px -32.6666666667px #ff00e6, 49px -14.6666666667px #ff6600, -2px -370.6666666667px #00ddff, 60px -245.6666666667px #ddff00, 135px -205.6666666667px #00a6ff, 139px -204.6666666667px #ff00fb, -36px -155.6666666667px #00ff48, -75px 8.3333333333px #00ff84, -202px -139.6666666667px #00ff0d, 123px -84.6666666667px #00ffaa, 37px -396.6666666667px #6aff00, -157px -134.6666666667px #ff5900, 7px 6.3333333333px #ffbb00, 222px -15.6666666667px #66ff00, -114px -40.6666666667px #ffb700, -127px -49.6666666667px #ffb300, 130px -63.6666666667px #0080ff, 139px -11.6666666667px #0077ff, -167px -301.6666666667px #ff00e6, 55px -222.6666666667px #62ff00, 12px -10.6666666667px #95ff00, -240px -114.6666666667px #ff9900, -78px -210.6666666667px blue, 175px -142.6666666667px #3700ff, 83px -316.6666666667px #ff00c4, 69px -390.6666666667px #ff0040, -168px -361.6666666667px #00aaff, -44px -87.6666666667px #0040ff, 235px -415.6666666667px #ffae00, 45px 55.3333333333px #00ff0d, -61px -2.6666666667px #e600ff, -225px -59.6666666667px #59ff00, -30px 48.3333333333px #00f7ff, 211px -170.6666666667px #f700ff, -165px -209.6666666667px #37ff00, -131px -306.6666666667px #00ff66, -137px 54.3333333333px red, 42px -397.6666666667px #00e1ff, 230px -250.6666666667px #ff4d00, -172px -335.6666666667px #000dff, 143px -342.6666666667px #04ff00, -76px -194.6666666667px #fff200, -237px -166.6666666667px #00a6ff, -172px -178.6666666667px #d0ff00, 51px -72.6666666667px #1500ff, -206px 34.3333333333px #ff0015, 51px 11.3333333333px #ff0400, -149px -215.6666666667px #ff0048;
        }
    }

    @-moz-keyframes bang {
        to {
            box-shadow: -110px -104.6666666667px #00ff51, -3px 36.3333333333px #5eff00, 249px -295.6666666667px #00ff84, -165px -32.6666666667px #ff00e6, 49px -14.6666666667px #ff6600, -2px -370.6666666667px #00ddff, 60px -245.6666666667px #ddff00, 135px -205.6666666667px #00a6ff, 139px -204.6666666667px #ff00fb, -36px -155.6666666667px #00ff48, -75px 8.3333333333px #00ff84, -202px -139.6666666667px #00ff0d, 123px -84.6666666667px #00ffaa, 37px -396.6666666667px #6aff00, -157px -134.6666666667px #ff5900, 7px 6.3333333333px #ffbb00, 222px -15.6666666667px #66ff00, -114px -40.6666666667px #ffb700, -127px -49.6666666667px #ffb300, 130px -63.6666666667px #0080ff, 139px -11.6666666667px #0077ff, -167px -301.6666666667px #ff00e6, 55px -222.6666666667px #62ff00, 12px -10.6666666667px #95ff00, -240px -114.6666666667px #ff9900, -78px -210.6666666667px blue, 175px -142.6666666667px #3700ff, 83px -316.6666666667px #ff00c4, 69px -390.6666666667px #ff0040, -168px -361.6666666667px #00aaff, -44px -87.6666666667px #0040ff, 235px -415.6666666667px #ffae00, 45px 55.3333333333px #00ff0d, -61px -2.6666666667px #e600ff, -225px -59.6666666667px #59ff00, -30px 48.3333333333px #00f7ff, 211px -170.6666666667px #f700ff, -165px -209.6666666667px #37ff00, -131px -306.6666666667px #00ff66, -137px 54.3333333333px red, 42px -397.6666666667px #00e1ff, 230px -250.6666666667px #ff4d00, -172px -335.6666666667px #000dff, 143px -342.6666666667px #04ff00, -76px -194.6666666667px #fff200, -237px -166.6666666667px #00a6ff, -172px -178.6666666667px #d0ff00, 51px -72.6666666667px #1500ff, -206px 34.3333333333px #ff0015, 51px 11.3333333333px #ff0400, -149px -215.6666666667px #ff0048;
        }
    }

    @-o-keyframes bang {
        to {
            box-shadow: -110px -104.6666666667px #00ff51, -3px 36.3333333333px #5eff00, 249px -295.6666666667px #00ff84, -165px -32.6666666667px #ff00e6, 49px -14.6666666667px #ff6600, -2px -370.6666666667px #00ddff, 60px -245.6666666667px #ddff00, 135px -205.6666666667px #00a6ff, 139px -204.6666666667px #ff00fb, -36px -155.6666666667px #00ff48, -75px 8.3333333333px #00ff84, -202px -139.6666666667px #00ff0d, 123px -84.6666666667px #00ffaa, 37px -396.6666666667px #6aff00, -157px -134.6666666667px #ff5900, 7px 6.3333333333px #ffbb00, 222px -15.6666666667px #66ff00, -114px -40.6666666667px #ffb700, -127px -49.6666666667px #ffb300, 130px -63.6666666667px #0080ff, 139px -11.6666666667px #0077ff, -167px -301.6666666667px #ff00e6, 55px -222.6666666667px #62ff00, 12px -10.6666666667px #95ff00, -240px -114.6666666667px #ff9900, -78px -210.6666666667px blue, 175px -142.6666666667px #3700ff, 83px -316.6666666667px #ff00c4, 69px -390.6666666667px #ff0040, -168px -361.6666666667px #00aaff, -44px -87.6666666667px #0040ff, 235px -415.6666666667px #ffae00, 45px 55.3333333333px #00ff0d, -61px -2.6666666667px #e600ff, -225px -59.6666666667px #59ff00, -30px 48.3333333333px #00f7ff, 211px -170.6666666667px #f700ff, -165px -209.6666666667px #37ff00, -131px -306.6666666667px #00ff66, -137px 54.3333333333px red, 42px -397.6666666667px #00e1ff, 230px -250.6666666667px #ff4d00, -172px -335.6666666667px #000dff, 143px -342.6666666667px #04ff00, -76px -194.6666666667px #fff200, -237px -166.6666666667px #00a6ff, -172px -178.6666666667px #d0ff00, 51px -72.6666666667px #1500ff, -206px 34.3333333333px #ff0015, 51px 11.3333333333px #ff0400, -149px -215.6666666667px #ff0048;
        }
    }

    @-ms-keyframes bang {
        to {
            box-shadow: -110px -104.6666666667px #00ff51, -3px 36.3333333333px #5eff00, 249px -295.6666666667px #00ff84, -165px -32.6666666667px #ff00e6, 49px -14.6666666667px #ff6600, -2px -370.6666666667px #00ddff, 60px -245.6666666667px #ddff00, 135px -205.6666666667px #00a6ff, 139px -204.6666666667px #ff00fb, -36px -155.6666666667px #00ff48, -75px 8.3333333333px #00ff84, -202px -139.6666666667px #00ff0d, 123px -84.6666666667px #00ffaa, 37px -396.6666666667px #6aff00, -157px -134.6666666667px #ff5900, 7px 6.3333333333px #ffbb00, 222px -15.6666666667px #66ff00, -114px -40.6666666667px #ffb700, -127px -49.6666666667px #ffb300, 130px -63.6666666667px #0080ff, 139px -11.6666666667px #0077ff, -167px -301.6666666667px #ff00e6, 55px -222.6666666667px #62ff00, 12px -10.6666666667px #95ff00, -240px -114.6666666667px #ff9900, -78px -210.6666666667px blue, 175px -142.6666666667px #3700ff, 83px -316.6666666667px #ff00c4, 69px -390.6666666667px #ff0040, -168px -361.6666666667px #00aaff, -44px -87.6666666667px #0040ff, 235px -415.6666666667px #ffae00, 45px 55.3333333333px #00ff0d, -61px -2.6666666667px #e600ff, -225px -59.6666666667px #59ff00, -30px 48.3333333333px #00f7ff, 211px -170.6666666667px #f700ff, -165px -209.6666666667px #37ff00, -131px -306.6666666667px #00ff66, -137px 54.3333333333px red, 42px -397.6666666667px #00e1ff, 230px -250.6666666667px #ff4d00, -172px -335.6666666667px #000dff, 143px -342.6666666667px #04ff00, -76px -194.6666666667px #fff200, -237px -166.6666666667px #00a6ff, -172px -178.6666666667px #d0ff00, 51px -72.6666666667px #1500ff, -206px 34.3333333333px #ff0015, 51px 11.3333333333px #ff0400, -149px -215.6666666667px #ff0048;
        }
    }

    @keyframes bang {
        to {
            box-shadow: -110px -104.6666666667px #00ff51, -3px 36.3333333333px #5eff00, 249px -295.6666666667px #00ff84, -165px -32.6666666667px #ff00e6, 49px -14.6666666667px #ff6600, -2px -370.6666666667px #00ddff, 60px -245.6666666667px #ddff00, 135px -205.6666666667px #00a6ff, 139px -204.6666666667px #ff00fb, -36px -155.6666666667px #00ff48, -75px 8.3333333333px #00ff84, -202px -139.6666666667px #00ff0d, 123px -84.6666666667px #00ffaa, 37px -396.6666666667px #6aff00, -157px -134.6666666667px #ff5900, 7px 6.3333333333px #ffbb00, 222px -15.6666666667px #66ff00, -114px -40.6666666667px #ffb700, -127px -49.6666666667px #ffb300, 130px -63.6666666667px #0080ff, 139px -11.6666666667px #0077ff, -167px -301.6666666667px #ff00e6, 55px -222.6666666667px #62ff00, 12px -10.6666666667px #95ff00, -240px -114.6666666667px #ff9900, -78px -210.6666666667px blue, 175px -142.6666666667px #3700ff, 83px -316.6666666667px #ff00c4, 69px -390.6666666667px #ff0040, -168px -361.6666666667px #00aaff, -44px -87.6666666667px #0040ff, 235px -415.6666666667px #ffae00, 45px 55.3333333333px #00ff0d, -61px -2.6666666667px #e600ff, -225px -59.6666666667px #59ff00, -30px 48.3333333333px #00f7ff, 211px -170.6666666667px #f700ff, -165px -209.6666666667px #37ff00, -131px -306.6666666667px #00ff66, -137px 54.3333333333px red, 42px -397.6666666667px #00e1ff, 230px -250.6666666667px #ff4d00, -172px -335.6666666667px #000dff, 143px -342.6666666667px #04ff00, -76px -194.6666666667px #fff200, -237px -166.6666666667px #00a6ff, -172px -178.6666666667px #d0ff00, 51px -72.6666666667px #1500ff, -206px 34.3333333333px #ff0015, 51px 11.3333333333px #ff0400, -149px -215.6666666667px #ff0048;
        }
    }

    @-webkit-keyframes gravity {
        to {
            transform: translateY(200px);
            -moz-transform: translateY(200px);
            -webkit-transform: translate(-100px, 200px);
            -o-transform: translateY(200px);
            -ms-transform: translateY(200px);
            opacity: 0;
        }
    }

    @-moz-keyframes gravity {
        to {
            transform: translateY(200px);
            -moz-transform: translateY(200px);
            -webkit-transform: translate(-100px, 200px);
            -o-transform: translateY(200px);
            -ms-transform: translateY(200px);
            opacity: 0;
        }
    }

    @-o-keyframes gravity {
        to {
            transform: translateY(200px);
            -moz-transform: translateY(200px);
            -webkit-transform: translate(-100px, 200px);
            -o-transform: translateY(200px);
            -ms-transform: translateY(200px);
            opacity: 0;
        }
    }

    @-ms-keyframes gravity {
        to {
            transform: translateY(200px);
            -moz-transform: translateY(200px);
            -webkit-transform: translate(-100px, 200px);
            -o-transform: translateY(200px);
            -ms-transform: translateY(200px);
            opacity: 0;
        }
    }

    @keyframes gravity {
        to {
            transform: translateY(200px);
            -moz-transform: translateY(200px);
            -webkit-transform: translate(-100px, 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: 30%;
        }

        20%,
        39.9% {
            margin-top: 30%;
            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%;
        }
    }
}