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

        body {
            background: linear-gradient(#0007, #0000), #123;
            height: 100vh;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #FFD700;
            font-family: 'Poppins', sans-serif;
            text-align: center;
        }

        /* Greeting text decoration */
        .greeting-container {
            text-align: center;
            position: relative;
            z-index: 1;
        }

        h1 {
            font-size: 3.5rem;
            color: #ffd700;
            text-shadow: 0 0 10px #ffd700, 0 0 20px #ff7f00;
            animation: glowText 1s infinite alternate;
        }

        #client-name {
            font-size: 1.5rem;
            color: #ff4500;
            text-shadow: 0 0 10px #ff4500, 0 0 20px #ffd700;
            margin-top: 20px;
        }

        /* Firework animation setup */
        @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.5vmin;
            --finalSize: 40vmin;
            --particleSize: 0.2vmin;
            --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) 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%,
                        radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 80% 90%,
                        radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 95% 90%;
            background-size: var(--initialSize) var(--initialSize);
            background-repeat: no-repeat;
        }

        /* Firework variants */
        .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: 35vmin;
            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: 30vmin;
            left: 70%;
            top: 60%;
            animation-delay: -0.4s;
        }

        /* Animation for Glowing Text */
        @keyframes glowText {
            0% {
                text-shadow: 0 0 10px #ffd700, 0 0 20px #ff4500;
            }
            100% {
                text-shadow: 0 0 20px #ffad33, 0 0 30px #ff4500;
            }
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            h1 {
                font-size: 2.5rem;
            }
            #client-name {
                font-size: 1.2rem;
            }
            .firework,
            .firework::before,
            .firework::after {
                --finalSize: 25vmin;
            }
        }

        @media (max-width: 480px) {
            h1 {
                font-size: 2rem;
            }
            #client-name {
                font-size: 1rem;
            }
            .firework,
            .firework::before,
            .firework::after {
                --finalSize: 20vmin;
            }
        }