/* Import a fun font */
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

body {
    margin: 0;
    font-family: sans-serif;
    background-color: #1a1a2e;
    color: #fff;
    overflow: hidden; /* Hides scrollbars */
    /* Animation for the background party lights */
    animation: partyLights 15s infinite;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
}

h1 {
    font-family: 'Lobster', cursive;
    font-size: 4rem;
    margin-bottom: 2rem;
    text-shadow: 
        0 0 5px #fff,
        0 0 10px #fff,
        0 0 20px #ff00ff,
        0 0 30px #ff00ff,
        0 0 40px #ff00ff;
}

p {
    font-size: 1.2rem;
    margin-top: 2rem;
    color: #eee;
}

.disco-ball {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    
    background: 
        /* Layer 3 (Top): The main spotlight reflection */
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.1) 15%, transparent 50%),
        
        /* Layer 2: Facet highlights using diagonal gradients */
        repeating-linear-gradient(45deg,  transparent, transparent 2px, rgba(255,255,255,0.2) 3px, rgba(255,255,255,0.2) 4px),
        repeating-linear-gradient(135deg, transparent, transparent 2px, rgba(255,255,255,0.2) 3px, rgba(255,255,255,0.2) 4px),

        /* Layer 1 (Bottom): The metallic, curved base of the ball */
        radial-gradient(circle at 35% 35%, #ddd, #999 40%, #333 100%);
    
    /* Define a size for each background layer */
    background-size: 100% 100%, 12px 12px, 12px 12px, 100% 100%;

    box-shadow: 
        inset 0 0 20px rgba(0,0,0,0.8),
        0 0 30px #fff, 
        0 0 60px rgba(255, 0, 255, 0.7),
        0 0 60px rgba(0, 255, 255, 0.7);
    
    animation: spin 20s linear infinite;
}

/* Keyframe animation for spinning the ball */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Keyframe animation for the background color */
@keyframes partyLights {
    0%   { background-color: #1a1a2e; }
    25%  { background-color: #4a148c; } /* Deep Purple */
    50%  { background-color: #d81b60; } /* Hot Pink */
    75%  { background-color: #004d40; } /* Dark Teal */
    100% { background-color: #1a1a2e; }
}