:root {
    --color-primary: #090b0b;
}

body.dark-mode {
    --color-primary: #ececec;
}

.fireworks > .before,
.fireworks > .after {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  box-shadow: 0 0 var(--color-primary), 0 0 var(--color-primary), 0 0 var(--color-primary), 0 0 var(--color-primary), /* ... (repeat as needed) */;
  -moz-animation: 3s bang ease-out infinite backwards, 3s gravity ease-in infinite backwards, 10s position linear infinite backwards;
  -webkit-animation: 3s bang ease-out infinite backwards, 3s gravity ease-in infinite backwards, 10s position linear infinite backwards;
  -o-animation: 3s bang ease-out infinite backwards, 3s gravity ease-in infinite backwards, 10s position linear infinite backwards;
  -ms-animation: 3s bang ease-out infinite backwards, 3s gravity ease-in infinite backwards, 10s position linear infinite backwards;
  animation: 3s bang ease-out infinite backwards, 3s gravity ease-in infinite backwards, 10s position linear infinite backwards;
}

.fireworks > .after {
  -moz-animation-delay: 2s, 2s, 2s;
  -webkit-animation-delay: 2s, 2s, 2s;
  -o-animation-delay: 2s, 2s, 2s;
  -ms-animation-delay: 2s, 2s, 2s;
  animation-delay: 2s, 2s, 2s;
  -moz-animation-duration: 2s, 2s, 10s;
  -webkit-animation-duration: 2s, 2s, 10s;
  -o-animation-duration: 2s, 2s, 10s;
  -ms-animation-duration: 2s, 2s, 10s;
  animation-duration: 2s, 2s, 10s;
}

@-webkit-keyframes bang {
    to {
        box-shadow: 91px -287.6666666667px #8c00ff, 95px -258.6666666667px #ff0044, 194px -157.6666666667px #ff00bf, -142px -116.6666666667px #00ff37, -60px -289.6666666667px #00ff6a, -80px 58.3333333333px #00ff09, 76px -162.6666666667px #fffb00, 194px -238.6666666667px #00ff84, 202px -268.6666666667px #b700ff, 79px 82.3333333333px #ffbf00, -109px 65.3333333333px #2f00ff, 23px -108.6666666667px #00ffbb, -51px -335.6666666667px #006aff, 206px -116.6666666667px #2200ff, 62px -215.6666666667px #9d00ff, 154px -332.6666666667px #ff0026, 26px -238.6666666667px #59ff00, -106px -89.6666666667px #00f2ff, -146px -399.6666666667px #a200ff, -106px -131.6666666667px #3700ff, 186px -355.6666666667px #00fff2, 64px -412.6666666667px #2f00ff, 74px -149.6666666667px #00e1ff, -139px -242.6666666667px #ff5900, -174px -77.6666666667px #ff00b7, 9px -100.6666666667px #e100ff, 44px -194.6666666667px #00d9ff, -163px -257.6666666667px #00bbff, 48px -107.6666666667px #ff0033, -82px -191.6666666667px #00ff6a, 71px -89.6666666667px #1500ff, -17px -305.6666666667px #00ff1e, 237px -383.6666666667px #95ff00, 139px 51.3333333333px #8400ff, 189px -92.6666666667px #ff00d0, 52px -297.6666666667px #ff00ae, 15px 51.3333333333px #0095ff, 201px -87.6666666667px #4800ff, -206px 77.3333333333px #ff00dd, -164px -236.6666666667px #ff00c4, 125px -145.6666666667px #ff3300, -192px -163.6666666667px #ff9d00, 39px 3.3333333333px #ff0900, -226px -131.6666666667px #00ff51, 185px -190.6666666667px #001aff, 236px -250.6666666667px #8c00ff, 234px 32.3333333333px #ff1e00, -182px -225.6666666667px #00ffe6, 247px -74.6666666667px #00ffa2, 78px -210.6666666667px #00b3ff, 48px -207.6666666667px #ff3c00;
    }
}

@-moz-keyframes bang {
    to {
        box-shadow: 91px -287.6666666667px #8c00ff, 95px -258.6666666667px #ff0044, 194px -157.6666666667px #ff00bf, -142px -116.6666666667px #00ff37, -60px -289.6666666667px #00ff6a, -80px 58.3333333333px #00ff09, 76px -162.6666666667px #fffb00, 194px -238.6666666667px #00ff84, 202px -268.6666666667px #b700ff, 79px 82.3333333333px #ffbf00, -109px 65.3333333333px #2f00ff, 23px -108.6666666667px #00ffbb, -51px -335.6666666667px #006aff, 206px -116.6666666667px #2200ff, 62px -215.6666666667px #9d00ff, 154px -332.6666666667px #ff0026, 26px -238.6666666667px #59ff00, -106px -89.6666666667px #00f2ff, -146px -399.6666666667px #a200ff, -106px -131.6666666667px #3700ff, 186px -355.6666666667px #00fff2, 64px -412.6666666667px #2f00ff, 74px -149.6666666667px #00e1ff, -139px -242.6666666667px #ff5900, -174px -77.6666666667px #ff00b7, 9px -100.6666666667px #e100ff, 44px -194.6666666667px #00d9ff, -163px -257.6666666667px #00bbff, 48px -107.6666666667px #ff0033, -82px -191.6666666667px #00ff6a, 71px -89.6666666667px #1500ff, -17px -305.6666666667px #00ff1e, 237px -383.6666666667px #95ff00, 139px 51.3333333333px #8400ff, 189px -92.6666666667px #ff00d0, 52px -297.6666666667px #ff00ae, 15px 51.3333333333px #0095ff, 201px -87.6666666667px #4800ff, -206px 77.3333333333px #ff00dd, -164px -236.6666666667px #ff00c4, 125px -145.6666666667px #ff3300, -192px -163.6666666667px #ff9d00, 39px 3.3333333333px #ff0900, -226px -131.6666666667px #00ff51, 185px -190.6666666667px #001aff, 236px -250.6666666667px #8c00ff, 234px 32.3333333333px #ff1e00, -182px -225.6666666667px #00ffe6, 247px -74.6666666667px #00ffa2, 78px -210.6666666667px #00b3ff, 48px -207.6666666667px #ff3c00;
    }
}

@-o-keyframes bang {
    to {
        box-shadow: 91px -287.6666666667px #8c00ff, 95px -258.6666666667px #ff0044, 194px -157.6666666667px #ff00bf, -142px -116.6666666667px #00ff37, -60px -289.6666666667px #00ff6a, -80px 58.3333333333px #00ff09, 76px -162.6666666667px #fffb00, 194px -238.6666666667px #00ff84, 202px -268.6666666667px #b700ff, 79px 82.3333333333px #ffbf00, -109px 65.3333333333px #2f00ff, 23px -108.6666666667px #00ffbb, -51px -335.6666666667px #006aff, 206px -116.6666666667px #2200ff, 62px -215.6666666667px #9d00ff, 154px -332.6666666667px #ff0026, 26px -238.6666666667px #59ff00, -106px -89.6666666667px #00f2ff, -146px -399.6666666667px #a200ff, -106px -131.6666666667px #3700ff, 186px -355.6666666667px #00fff2, 64px -412.6666666667px #2f00ff, 74px -149.6666666667px #00e1ff, -139px -242.6666666667px #ff5900, -174px -77.6666666667px #ff00b7, 9px -100.6666666667px #e100ff, 44px -194.6666666667px #00d9ff, -163px -257.6666666667px #00bbff, 48px -107.6666666667px #ff0033, -82px -191.6666666667px #00ff6a, 71px -89.6666666667px #1500ff, -17px -305.6666666667px #00ff1e, 237px -383.6666666667px #95ff00, 139px 51.3333333333px #8400ff, 189px -92.6666666667px #ff00d0, 52px -297.6666666667px #ff00ae, 15px 51.3333333333px #0095ff, 201px -87.6666666667px #4800ff, -206px 77.3333333333px #ff00dd, -164px -236.6666666667px #ff00c4, 125px -145.6666666667px #ff3300, -192px -163.6666666667px #ff9d00, 39px 3.3333333333px #ff0900, -226px -131.6666666667px #00ff51, 185px -190.6666666667px #001aff, 236px -250.6666666667px #8c00ff, 234px 32.3333333333px #ff1e00, -182px -225.6666666667px #00ffe6, 247px -74.6666666667px #00ffa2, 78px -210.6666666667px #00b3ff, 48px -207.6666666667px #ff3c00;
    }
}

@-ms-keyframes bang {
    to {
        box-shadow: 91px -287.6666666667px #8c00ff, 95px -258.6666666667px #ff0044, 194px -157.6666666667px #ff00bf, -142px -116.6666666667px #00ff37, -60px -289.6666666667px #00ff6a, -80px 58.3333333333px #00ff09, 76px -162.6666666667px #fffb00, 194px -238.6666666667px #00ff84, 202px -268.6666666667px #b700ff, 79px 82.3333333333px #ffbf00, -109px 65.3333333333px #2f00ff, 23px -108.6666666667px #00ffbb, -51px -335.6666666667px #006aff, 206px -116.6666666667px #2200ff, 62px -215.6666666667px #9d00ff, 154px -332.6666666667px #ff0026, 26px -238.6666666667px #59ff00, -106px -89.6666666667px #00f2ff, -146px -399.6666666667px #a200ff, -106px -131.6666666667px #3700ff, 186px -355.6666666667px #00fff2, 64px -412.6666666667px #2f00ff, 74px -149.6666666667px #00e1ff, -139px -242.6666666667px #ff5900, -174px -77.6666666667px #ff00b7, 9px -100.6666666667px #e100ff, 44px -194.6666666667px #00d9ff, -163px -257.6666666667px #00bbff, 48px -107.6666666667px #ff0033, -82px -191.6666666667px #00ff6a, 71px -89.6666666667px #1500ff, -17px -305.6666666667px #00ff1e, 237px -383.6666666667px #95ff00, 139px 51.3333333333px #8400ff, 189px -92.6666666667px #ff00d0, 52px -297.6666666667px #ff00ae, 15px 51.3333333333px #0095ff, 201px -87.6666666667px #4800ff, -206px 77.3333333333px #ff00dd, -164px -236.6666666667px #ff00c4, 125px -145.6666666667px #ff3300, -192px -163.6666666667px #ff9d00, 39px 3.3333333333px #ff0900, -226px -131.6666666667px #00ff51, 185px -190.6666666667px #001aff, 236px -250.6666666667px #8c00ff, 234px 32.3333333333px #ff1e00, -182px -225.6666666667px #00ffe6, 247px -74.6666666667px #00ffa2, 78px -210.6666666667px #00b3ff, 48px -207.6666666667px #ff3c00;
    }
}

@keyframes bang {
    to {
        box-shadow: 91px -287.6666666667px #8c00ff, 95px -258.6666666667px #ff0044, 194px -157.6666666667px #ff00bf, -142px -116.6666666667px #00ff37, -60px -289.6666666667px #00ff6a, -80px 58.3333333333px #00ff09, 76px -162.6666666667px #fffb00, 194px -238.6666666667px #00ff84, 202px -268.6666666667px #b700ff, 79px 82.3333333333px #ffbf00, -109px 65.3333333333px #2f00ff, 23px -108.6666666667px #00ffbb, -51px -335.6666666667px #006aff, 206px -116.6666666667px #2200ff, 62px -215.6666666667px #9d00ff, 154px -332.6666666667px #ff0026, 26px -238.6666666667px #59ff00, -106px -89.6666666667px #00f2ff, -146px -399.6666666667px #a200ff, -106px -131.6666666667px #3700ff, 186px -355.6666666667px #00fff2, 64px -412.6666666667px #2f00ff, 74px -149.6666666667px #00e1ff, -139px -242.6666666667px #ff5900, -174px -77.6666666667px #ff00b7, 9px -100.6666666667px #e100ff, 44px -194.6666666667px #00d9ff, -163px -257.6666666667px #00bbff, 48px -107.6666666667px #ff0033, -82px -191.6666666667px #00ff6a, 71px -89.6666666667px #1500ff, -17px -305.6666666667px #00ff1e, 237px -383.6666666667px #95ff00, 139px 51.3333333333px #8400ff, 189px -92.6666666667px #ff00d0, 52px -297.6666666667px #ff00ae, 15px 51.3333333333px #0095ff, 201px -87.6666666667px #4800ff, -206px 77.3333333333px #ff00dd, -164px -236.6666666667px #ff00c4, 125px -145.6666666667px #ff3300, -192px -163.6666666667px #ff9d00, 39px 3.3333333333px #ff0900, -226px -131.6666666667px #00ff51, 185px -190.6666666667px #001aff, 236px -250.6666666667px #8c00ff, 234px 32.3333333333px #ff1e00, -182px -225.6666666667px #00ffe6, 247px -74.6666666667px #00ffa2, 78px -210.6666666667px #00b3ff, 48px -207.6666666667px #ff3c00;
    }
}

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