#robot-div {
    position: relative;
    margin: 0;
    height: 80vh;
    margin-top: 10vh;
    width: 100%;
    background-color: black;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: 
                radial-gradient(circle at 20% 40%, rgba(128, 0, 255, 0.6), transparent 60%),
                radial-gradient(circle at 70% 20%, rgba(255, 0, 128, 0.8), transparent 70%),
                radial-gradient(circle at 50% 80%, rgba(0, 128, 255, 0.6), transparent 80%),
                radial-gradient(circle, rgba(255, 255, 255, 0.8) 0.5%, transparent 2%);
            background-size: 400px 400px, 500px 500px, 700px 700px, 5px 5px;
            animation: nebulae 20s infinite linear;
}

@keyframes nebulae {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: 400px 400px;
    }
}

            

        /* Bouncing Robot */
        .robot {
            font-size: 3rem;
            animation: bounce 8s infinite ease-in-out, size-shift 8s infinite ease-in-out;
        }

        @keyframes bounce {
            0% {
                transform: translate(10vw, 10vh);
            }
            25% {
                transform: translate(80vw, 10vh);
            }
            50% {
                transform: translate(80vw, 80vh);
            }
            75% {
                transform: translate(10vw, 80vh);
            }
            100% {
                transform: translate(10vw, 10vh);
            }
        }

        @keyframes size-shift {
            0%, 100% {
                transform: scale(0.001);
            }
            50% {
                transform: scale(4.5);
            }
        }

        /* Blitz Effects */
        .robot::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 70%);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            animation: blitz 8s infinite ease-in-out;
            opacity: 0;
        }

        @keyframes blitz {
            0%, 24% {
                opacity: 0;
                width: 0;
                height: 0;
            }
            25% {
                opacity: 1;
                width: 200px;
                height: 200px;
            }
            26% {
                opacity: 0;
                width: 0;
                height: 0;
            }
        }

/* Keyframes for patterns */

.magic-gradient {
    background: 
        conic-gradient(from 90deg, #ff9a9e, #fad0c4, #fbc2eb, #a6c1ee, #ff9a9e 300%),
        repeating-radial-gradient(circle, transparent 0, transparent 20px, rgba(255, 255, 255, 0.1) 20px, rgba(255, 255, 255, 0.1) 40px),
        radial-gradient(circle at 50% 50%, rgba(0, 255, 255, 0.5), transparent 60%);
    background-blend-mode: overlay, screen, multiply;
    background-size: 400% 400%, 300px 300px, 100%;
    animation: magic-flow 8s infinite linear;
}