* {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: -o-linear-gradient(
        hsl(220, 100%, 8%) 0%,
        hsl(220, 92%, 10%) 35%,
        hsl(210, 75%, 12%) 65%,
        hsl(220, 100%, 5%) 100%
    );
    background: -webkit-gradient(
        linear,
        left top, left bottom,
        from(hsl(220, 100%, 8%)),
        color-stop(35%, hsl(220, 92%, 10%)),
        color-stop(65%, hsl(210, 75%, 12%)),
        to(hsl(220, 100%, 5%))
    );
    background: linear-gradient(
        hsl(220, 100%, 8%) 0%,
        hsl(220, 92%, 10%) 35%,
        hsl(210, 75%, 12%) 65%,
        hsl(220, 100%, 5%) 100%
    );
    font-family: "Bangers", system-ui;
    height: 100vh;
    overflow: hidden;
}

.firework {
    --star-size: 1.25px;
    -webkit-animation: shoot-firework 1s ease-out, explode-firework var(--duration) ease-out 0.8s;
            animation: shoot-firework 1s ease-out, explode-firework var(--duration) ease-out 0.8s;
    aspect-ratio: 1;
    border-radius: 999px;
    left: var(--x);
    position: absolute;
    top: var(--y);
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: var(--star-size);
}

.shoot-button {
    background: -o-radial-gradient(20% 20%, circle, hsl(1, 100%, 50%), hsl(0, 100%, 30%));
    background: radial-gradient(circle at 20% 20%, hsl(1, 100%, 50%), hsl(0, 100%, 30%));
    border: none;
    border-radius: 999px;
    bottom: 50px;
    -webkit-box-shadow:
        2.25px 3px 4px rgba(0, 0, 0, 0.25),
        inset -1.5px -2px 1.8px rgba(0, 0, 0, 0.30),
        inset 1.5px 2px 1.8px rgba(255, 255, 255, 0.25),
        inset -2.25px -3px 5px rgba(60, 0, 0, 0.25),
        inset 9px 12px 5px rgba(255, 120, 120, 0.25)
    ;
            box-shadow:
        2.25px 3px 4px rgba(0, 0, 0, 0.25),
        inset -1.5px -2px 1.8px rgba(0, 0, 0, 0.30),
        inset 1.5px 2px 1.8px rgba(255, 255, 255, 0.25),
        inset -2.25px -3px 5px rgba(60, 0, 0, 0.25),
        inset 9px 12px 5px rgba(255, 120, 120, 0.25)
    ;
    color: rgb(245, 245, 245);
    cursor: pointer;
    font-family: inherit;
    font-size: 2rem;
    height: 100px;
    left: 50%;
    outline: none;
    position: absolute;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    text-shadow: 1px 1px 0.3px rgba(69, 0, 0, 0.248);
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    width: 100px;
    z-index: 1;
}

.shoot-button:active {
    background: -o-linear-gradient(315deg, hsl(1, 100%, 50%), hsl(0, 100%, 30%));
    background: linear-gradient(135deg, hsl(1, 100%, 50%), hsl(0, 100%, 30%));
    -webkit-box-shadow:
        2.25px 3px 4px rgba(0, 0, 0, 0.25),
        inset -1.5px -2px 1.8px rgba(0, 0, 0, 0.30),
        inset 1.5px 2px 1.8px rgba(255, 255, 255, 0.25);
            box-shadow:
        2.25px 3px 4px rgba(0, 0, 0, 0.25),
        inset -1.5px -2px 1.8px rgba(0, 0, 0, 0.30),
        inset 1.5px 2px 1.8px rgba(255, 255, 255, 0.25);
    font-size: 1.85rem;
    outline: none;
    -webkit-transform: translateX(-50%) scale(0.97);
        -ms-transform: translateX(-50%) scale(0.97);
            transform: translateX(-50%) scale(0.97);
}

.shoot-button:active::before {
    content: '';
    background: -o-linear-gradient(315deg, hsl(0, 100%, 35%), hsl(0, 100%, 45%));
    background: linear-gradient(135deg, hsl(0, 100%, 35%), hsl(0, 100%, 45%));
    border-radius: inherit;
    -webkit-filter: blur(1px);
            filter: blur(1px);
    height: 90%;
    left: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 90%;
    z-index: -1;
  }

@-webkit-keyframes shoot-firework {
    0% {
        left: calc(var(--x) + var(--x-offset));
        top: 100%;
        width: 5px;
    }
}

@keyframes shoot-firework {
    0% {
        left: calc(var(--x) + var(--x-offset));
        top: 100%;
        width: 5px;
    }
}

@-webkit-keyframes explode-firework {
    100% {
        opacity: 0;
        width: var(--diameter);
    }
}

@keyframes explode-firework {
    100% {
        opacity: 0;
        width: var(--diameter);
    }
}