button {
              outline:none;
              font-family:'helvetica neue' sans-serif; font-size:1.8em;
              color:hsla(350,0%,100%,1); text-shadow:-1px -1px 1px hsla(350,0%,0%,0.7), 1px 1px 1px hsla(350,0%,100%,0.3);
              display:block; margin:25px auto; padding:25px 25px 25px 25px;
              cursor:pointer;
              background-color:hsla(350,80%,10%,1);
              background-image:
                linear-gradient(273deg,hsla(350,80%,60%,1) 30%, hsla(350,80%,50%,1) 40%)
              ;
              border:none; border-radius:50%;
              width:130px;
              height:130px;
              box-shadow:
                inset 0px 0px 1px 1px hsla(350,80%,30%,0.9),
                inset 0px 0px 2px 3px hsla(350,80%,50%,0.9),
                inset 1px 1px 1px 4px hsla(350,80%,100%,0.8),
                inset 0px 0px 2px 7px hsla(350,80%,60%,0.8),
                inset 0px 0px 4px 10px hsla(350,80%,50%,0.9),
                8px 10px 2px 6px hsla(350,80%,20%,0.55),
                0px 0px 3px 2px hsla(350,80%,40%,0.9),
                0px 0px 2px 6px hsla(350,80%,50%,0.9),
                /*0px 0px 2px 3px hsla(350,80%,60%,0.9),*/
                -1px -1px 1px 6px hsla(350,80%,100%,0.9),
                /*0px 0px 2px 8px hsla(350,80%,60%,0.9),*/
                0px 0px 2px 11px hsla(350,80%,50%,0.9),
                0px 0px 1px 12px hsla(350,80%,40%,0.9),
                1px 3px 14px 14px hsla(350,80%,0%,0.4)
              ;
            }
            
            button:active {
              color:hsla(350,0%,85%,1); padding:26px 34px 22px 38px;
              background-image:
                linear-gradient(273deg,hsla(350,80%,50%,1) 50%, hsla(350,80%,55%,1) 60%)
              ;
              box-shadow:
                inset 3px 4px 3px 2px hsla(350,80%,20%,0.55),
                inset 0px 0px 1px 1px hsla(350,80%,30%,0.9),
                inset -1px -1px 2px 3px hsla(350,80%,50%,0.9),
                inset -2px -2px 1px 3px hsla(350,80%,100%,0.8),
                inset 0px 0px 2px 7px hsla(350,80%,60%,0.8),
                inset 0px 0px 3px 10px hsla(350,80%,50%,0.9),
                
                0px 0px 3px 2px hsla(350,80%,40%,0.9),
                0px 0px 2px 6px hsla(350,80%,50%,0.9),
                /*0px 0px 2px 3px hsla(350,80%,60%,0.9),*/
                -1px -1px 1px 6px hsla(350,80%,100%,0.9),
                /*0px 0px 2px 8px hsla(350,80%,60%,0.9),*/
                0px 0px 2px 11px hsla(350,80%,50%,0.9),
                0px 0px 1px 12px hsla(350,80%,40%,0.9),
                1px 3px 14px 14px hsla(350,80%,0%,0.4)
              ;
            }
            @keyframes firework {
              0% { transform: translate(var(--x), var(--initialY)); width: var(--initialSize); opacity: 1; }
              50% { width: 0.5vmin; opacity: 1; }
              100% { width: var(--finalSize); opacity: 0; }
            }
            
            .firework,
            .firework::before,
            .firework::after
            {
              --initialSize: 0.9vmin;
              --finalSize: 45vmin;
              --particleSize: 0.7vmin;
              --color1: yellow;
              --color2: khaki;
              --color3: white;
              --color4: lime;
              --color5: gold;
              --color6: mediumseagreen;
              --y: -30vmin;
              --x: -50%;
              --initialY: 60vmin;
              content: "";
              animation: firework 2s infinite;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, var(--y));
              width: var(--initialSize);
              aspect-ratio: 1;
              background: 
                /*
                radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 0% 0%,
                radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 100% 0%,
                radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 100% 100%,
                radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 0% 100%,
                */
                
                radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 50% 0%,
                radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 50%,
                radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 50% 100%,
                radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 0% 50%,
                
                /* bottom right */
                radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 80% 90%,
                radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 95% 90%,
                radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 90% 70%,
                radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 60%,
                radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 55% 80%,
                radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 70% 77%,
                
                /* bottom left */
                radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 22% 90%,
                radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 45% 90%,
                radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 70%,
                radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 10% 60%,
                radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 31% 80%,
                radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 28% 77%,
                radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 13% 72%,
                
                /* top left */
                radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 80% 10%,
                radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 95% 14%,
                radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 90% 23%,
                radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 100% 43%,
                radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 85% 27%,
                radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 77% 37%,
                radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 60% 7%,
                
                /* top right */
                radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 22% 14%,
                radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 45% 20%,
                radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 34%,
                radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 10% 29%,
                radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 31% 37%,
                radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 28% 7%,
                radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 13% 42%
                ;
              background-size: var(--initialSize) var(--initialSize);
              background-repeat: no-repeat;
            }
            
            .firework::before {
              --x: -50%;
              --y: -50%;
              --initialY: -50%;
            /*   transform: translate(-20vmin, -2vmin) rotate(40deg) scale(1.3) rotateY(40deg); */
              transform: translate(-50%, -50%) rotate(40deg) scale(1.3) rotateY(40deg);
            /*   animation: fireworkPseudo 2s infinite; */
            }
            
            .firework::after {
              --x: -50%;
              --y: -50%;
              --initialY: -50%;
            /*   transform: translate(44vmin, -50%) rotate(170deg) scale(1.15) rotateY(-30deg); */
              transform: translate(-50%, -50%) rotate(170deg) scale(1.15) rotateY(-30deg);
            /*   animation: fireworkPseudo 2s infinite; */
            }
            
            .firework:nth-child(2) {
              --x: 30vmin;
            }
            
            .firework:nth-child(2),
            .firework:nth-child(2)::before,
            .firework:nth-child(2)::after {
              --color1: pink;
              --color2: violet;
              --color3: fuchsia;
              --color4: orchid;
              --color5: plum;
              --color6: lavender;  
              --finalSize: 40vmin;
              left: 30%;
              top: 60%;
              animation-delay: -0.25s;
            }
            
            .firework:nth-child(3) {
              --x: -30vmin;
              --y: -50vmin;
            }
            
            .firework:nth-child(3),
            .firework:nth-child(3)::before,
            .firework:nth-child(3)::after {
              --color1: cyan;
              --color2: lightcyan;
              --color3: lightblue;
              --color4: PaleTurquoise;
              --color5: SkyBlue;
              --color6: lavender;
              --finalSize: 35vmin;
              left: 70%;
              top: 60%;
              animation-delay: -0.4s;
            }