body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

.container {
    text-align: center;
}

#name {
    font-family: 'Luckiest Guy', cursive;
    font-size: 8rem;
    color: #333;
    cursor: pointer;
    transition: transform 0.3s ease, color 0.3s ease;
    z-index: 10;
    position: relative;
    background: linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff);
    -webkit-background-clip: text;
    background-clip: text;
    background-size: 200% auto;
    max-width: 95vw;
    word-wrap: break-word;
}

@media (max-width: 768px) {
    #name {
        font-size: 5rem;
    }
}

@media (max-width: 480px) {
    #name {
        font-size: 3.5rem;
    }
    #disco-ball {
        font-size: 5rem;
    }
    .dinosaur {
        font-size: 15rem;
    }
}

#name.active {
    transform: scale(1.2);
    color: transparent;
    animation: gradientShift 2s linear infinite, fire 0.5s linear infinite, pulse 0.5s ease-in-out infinite;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.4); /* Slightly stronger outline */
}

@keyframes pulse {
    0%, 100% { transform: scale(1.2); }
    50% { transform: scale(1.3); }
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes fire {
    0% {
        text-shadow: 
            0 -2px 4px #fff, 
            0 -5px 10px #ff3, 
            0 -10px 20px #f90, 
            0 -20px 40px #f60, 
            0 -30px 60px #f30;
    }
    25% {
        text-shadow: 
            2px -4px 6px #fff, 
            -2px -10px 15px #ff3, 
            4px -20px 30px #f90, 
            -4px -40px 60px #f60, 
            0 -60px 90px #f30;
    }
    50% {
        text-shadow: 
            -2px -3px 4px #fff, 
            3px -12px 20px #ff3, 
            -3px -25px 40px #f90, 
            3px -50px 80px #f60, 
            0 -80px 120px #f30;
    }
    75% {
        text-shadow: 
            3px -5px 7px #fff, 
            -3px -15px 25px #ff3, 
            5px -30px 50px #f90, 
            -5px -60px 100px #f60, 
            0 -100px 150px #f30;
    }
    100% {
        text-shadow: 
            0 -2px 4px #fff, 
            0 -5px 10px #ff3, 
            0 -10px 20px #f90, 
            0 -20px 40px #f60, 
            0 -30px 60px #f30;
    }
}

#fireworks-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    animation: explode 0.4s ease-out forwards;
}

@keyframes explode {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

#disco-ball-container {
    position: absolute;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    transition: top 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#disco-ball-container.active {
    top: 0;
}

#disco-ball-container.active #disco-ball {
    animation: spin 0.1s linear infinite;
}

#disco-ball {
    font-size: 7.5rem;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
    animation: spin 3s linear infinite;
}

/* The string/cord for the disco ball */
#disco-ball-container::before {
    content: '';
    width: 2px;
    height: 100px;
    background: #888;
}

@keyframes spin {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}

#confetti-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 15;
    overflow: hidden;
}

.confetti {
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: #f00;
    top: -50px;
    animation: fall linear forwards;
}

@keyframes fall {
    to {
        transform: translateY(100vh) rotate(720deg);
    }
}

#dino-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.dinosaur {
    position: absolute;
    font-size: 30rem;
    white-space: nowrap;
    animation: walk 5s linear forwards, bounce 0.5s ease-in-out infinite alternate;
    transform-origin: center;
}

@keyframes bounce {
    from { transform: translateY(0); }
    to { transform: translateY(-300px); }
}

@keyframes walk {
    from {
        right: -1200px;
    }
    to {
        right: 100vw;
    }
}