body {
            margin: 0; background-color: #000000; display: flex;
            justify-content: center; align-items: center; height: 100vh;
            overflow: hidden; perspective: 1000px;
        }

        .word-container {
            position: relative;
            transform-style: preserve-3d;
            animation: spin 10s infinite linear;
            font-family: 'Arial Black', Impact, sans-serif;
            font-size: 12vw;
            font-weight: bold;
            text-transform: uppercase;
        }

        .layer {
            position: absolute;
            top: 50%;
            left: 50%;
            white-space: nowrap;
            transform: translate(-50%, -60%) translateZ(calc(var(--i) * -4px));
            color: hsl(0, 0%, calc(50% - (var(--i) * 2%)));
        }

        .layer:first-child {
            background: linear-gradient(to bottom, #f5f5f5, #888 40%, #fff 50%, #333 60%, #ccc);
            display: inline-block; 
            -webkit-background-clip: text;
            color: transparent;
        }

        .layer:last-child {
            color: #050505;
        }

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

        .subtitle {
            position: absolute;
            bottom: 10%; 
            left: 50%;
            transform: translateX(-50%);
            color: #ffffff;
            font-size: 1.5rem; 
            text-align: center;
            letter-spacing: 2px;
        }

        .gay {
            background: linear-gradient(
                90deg, 
                #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b00b5, #8b00ff, #ff0000
            );

            background-size: 200% auto;
            color: transparent;
            display: inline-block; 
            background-clip: text;
            animation: gay 1s linear infinite;
        }

        @keyframes gay {
            to {
                background-position: 200% center;
            }
        }