.cartoon div {
    position: absolute;
    box-sizing: border-box;
}

.unselectable {
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}


/*SCENE 2*/

.scene {
    /* perspective: 1200px;*/
    position: absolute;
    top: 5%;
    left: 0%;
    width: 80vmin;
    height: 80vmin;
  

}

.cube {
    transform-style: preserve-3d;
/*    animation: headYX 20s linear infinite;*/
}

.side {
    position: absolute;
}



.circle {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 7%;
    left: 14%;
    background-color: #ffffff;
    border-radius: 50%;
    border: 12px solid #f1f1f1;
    /*display: inline-block;*/
}


.circle2 {
    position: absolute;
    height: 110%;
    width: 110%;
    top: 3%;
    left: 9%;
    background: radial-gradient(#808080 57%,transparent 70%);
    border-radius: 50%;
}


.circle3 {
    position: absolute;
    height: 90%;
    width: 100%;
    top: 4%;
    left: 14%;
    background-color: #ffffff;
    border-radius: 20%;
    border: 12px solid #f1f1f1;
    opacity: .6;
    /*display: inline-block;*/
}






/*AVATAR 1*/



.face {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 72vmin;
    height: 72vmin;
    animation: music-move 20s 0.4s infinite alternate ease-in-out;
    -webkit-animation: music-move 20s 0.4s infinite alternate ease-in-out;
}


.head {
    position: absolute;
    width: 60%;
    height: 60%;
    left: 40%;
    top: 0%;
}





.abody {
    position: absolute;
    width: 72vmin;
    height: 72vmin;
    left: 10%;
    top: 15%;
    animation: bodyZ 20s 0.4s infinite t;
    -webkit-animation: bodyZ 10s 0.4s infinite ;
}




.mouth {
    width: 100%;
    height: 22%;
    left: 20%;
    top: 50%;
}


.eye-left {
    background: black;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    left: 58%;
    top: 34%;
    animation: eye-blink 4s 4.4s infinite;
    -webkit-animation: eye-blink 4s 4.4s infinite;
}

.eye-right {
    background: black;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    left: 79%;
    top: 34%;
    animation: eye-blink 4s 4.4s infinite;
    -webkit-animation: eye-blink 4s 4.4s infinite;
}



/*AVATAR 2*/


.face2 {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 72vmin;
    height: 72vmin;
    animation: music-move 20s 0.4s infinite alternate ease-in-out;
    -webkit-animation: music-move 20s 0.4s infinite alternate ease-in-out;
}


.head2 {
    position: absolute;
    width: 60%;
    height: 60%;
    left: 40%;
    top: 4%;
}


.abody2 {
    position: absolute;
    width: 68vmin;
    height: 68vmin;
    left: 20%;
    top: 24%;
    animation: bodyZ 20s 0.4s infinite t;
    -webkit-animation: bodyZ 10s 0.4s infinite;
}



.hair2 {
    position: absolute;
    width: 100%;
    height: 90%;
    left: 20%;
    top: 0%;
}



/*AVATAR 3*/


.face3 {
    position: absolute;
    top: 10%;
    left: 0%;
    width: 72vmin;
    height: 72vmin;
    animation: music-move 20s 0.4s infinite alternate ease-in-out;
    -webkit-animation: music-move 20s 0.4s infinite alternate ease-in-out;
}


.head3 {
    position: absolute;
    width: 60%;
    height: 60%;
    left: 40%;
    top: 12%;
}


.abody3 {
    position: absolute;
    width: 68vmin;
    height: 68vmin;
    left: 20%;
    top: 20%;
    animation: bodyZ 20s 0.4s infinite t;
    -webkit-animation: bodyZ 10s 0.4s infinite;
}



.hair3 {
    position: absolute;
    width: 100%;
    height: 90%;
    left: 20%;
    top: 7%;
}


.eye-left3 {
    background: #1a650b;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    left: 58%;
    top: 41%;
    animation: eye-blink 4s 4.4s infinite;
    -webkit-animation: eye-blink 4s 4.4s infinite;
}

.eye-right3 {
    background: #1a650b;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    left: 79%;
    top: 41%;
    animation: eye-blink 4s 4.4s infinite;
    -webkit-animation: eye-blink 4s 4.4s infinite;
}


.mouth3 {
    width: 100%;
    height: 22%;
    left: 20%;
    top: 60%;
}

/*AVATAR 4*/



.face4 {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 72vmin;
    height: 72vmin;
    animation: music-move 20s 0.4s infinite alternate ease-in-out;
    -webkit-animation: music-move 20s 0.4s infinite alternate ease-in-out;
}


.head4 {
    position: absolute;
    width: 62%;
    height: 62%;
    left: 39%;
    top: 4%;
}


.abody4 {
    position: absolute;
    width: 67vmin;
    height: 67vmin;
    left: 12%;
    top: 19%;
    animation: bodyZ 20s 0.4s infinite t;
    -webkit-animation: bodyZ 10s 0.4s infinite;
}


.mouth4 {
    width: 100%;
    height: 22%;
    left: 20%;
    top: 54%;
}


.eye-left4 {
    background: black;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    left: 58%;
    top: 38%;
    animation: eye-blink 4s 4.4s infinite;
    -webkit-animation: eye-blink 4s 4.4s infinite;
}

.eye-right4 {
    background: black;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    left: 79%;
    top: 38%;
    animation: eye-blink 4s 4.4s infinite;
    -webkit-animation: eye-blink 4s 4.4s infinite;
}



@-webkit-keyframes eye-blink {
    0% {
        -webkit-transform: scaleY(1) translateY(0px) translateZ(0);
        transform: scaleY(1) translateY(0px) translateZ(0);
    }

    45% {
        -webkit-transform: scaleY(1) translateY(0px) translateZ(0);
        transform: scaleY(1) translateY(0px) translateZ(0);
    }

    50% {
        -webkit-transform: scaleY(0.1) translateZ(0);
        transform: scaleY(0.1) translateZ(0);
    }

    55% {
        -webkit-transform: scaleY(1) translateY(0px) translateZ(0);
        transform: scaleY(1) translateY(0px) translateZ(0);
    }

    100% {
        -webkit-transform: scaleY(1) translateY(0px) translateZ(0);
        transform: scaleY(1) translateY(0px) translateZ(0);
    }
}


@-webkit-keyframes music-move {
    0% {
        -webkit-transform: rotate(0deg) translateZ(0);
        transform: rotate(0deg) translateZ(0);
    }

    33% {
        -webkit-transform: rotate(-3deg) translateZ(0);
        transform: rotate(-3deg) translateZ(0);
    }

    66% {
        -webkit-transform: rotate(3deg) translateZ(0);
        transform: rotate(3deg) translateZ(0);
    }

    100% {
        -webkit-transform: rotate(0deg) translateZ(0);
        transform: rotate(0deg) translateZ(0);
    }
}


@keyframes face-move {
    0% {
     
        transform: rotate(0deg) translateY(0);
    }

    50% {
     
        transform: rotate(1deg) translateY(10px);
    }

    100% {
     
        transform: rotate(0deg) translateY(0);
    }
}


@keyframes face-move2 {
    0% {
        transform: rotate(0deg) translateY(0);
    }

    50% {
        transform: rotate(2deg) translateY(3px);
    }

    100% {
        transform: rotate(0deg) translateY(0);
    }
}

@keyframes face-move3 {
    0% {
        transform:  translateY(0);
    }

    50% {
        transform:  translateY(5px);
    }

    100% {
        transform:  translateY(0);
    }
}


/*@keyframes headYX {
    0% {
        transform: rotateY(10deg) rotateX(14deg);
    }

    50% {
        transform: rotateY(-10deg) rotateX(-14deg)
    }

    100% {
        transform: rotateY(10deg) rotateX(14deg);
    }
}*/

@keyframes bodyZ {
    0% {
        transform: scale(1)  ;
    }

    50% {
        transform: scale(0.99) ;
    }

    100% {
        transform: scale(1) ;
    }
}

/*ROBOT 1 (AVATAR 5)*/


.sq-25 {
    position: absolute;
    width: 16%;   
}

/* Enforce 1:1 aspect ratio */
.cube01 {
    padding-top: 85%;
    left: 120%;
   
}

    .cube01 > * {
        background: #8aacc6;
        top: 170%;
        
    }

    .cube01 > .front {
        color: #000;
        background: transparent;     }

    .cube01 > .back {
        color: #000;
        background-image: url('../svg/robot1-gears.svg');
        background-repeat: no-repeat;
        background-size: 100%;
    }





.Robot5 {
    position: absolute;
    background-image: url('../svg/robot1.svg');
    background-repeat: no-repeat;
    background-size: 55%;
    top: 5%;
    width: 62%;
    height: 92%;
    animation: robot1-anim 10s linear infinite;
}


.eye-left5 {
    background: black;
    width: 23%;
    height: 23%;
    border-radius: 50%;
    left: 65%;
    top: 50%;
    animation: eye-blink 4s 4.4s infinite;
    -webkit-animation: eye-blink 4s 4.4s infinite;
}

.eye-right5 {
    background: black;
    width: 23%;
    height: 23%;
    border-radius: 50%;
    left: 14%;
    top: 50%;
    animation: eye-blink 4s 4.4s infinite;
    -webkit-animation: eye-blink 4s 4.4s infinite;

}


.mouth5 {
    left: 25%;
    top: 80%;
}

.msize5 {
    position: absolute;
    width: 53%;
    height: 53%;
}

.mcolor5 {
    color: #000;
    background: transparent;
    filter: hue-rotate(10deg) drop-shadow();   
}





@keyframes robot1-anim {
    0% {
        transform: rotateY(12deg) rotateX(3deg);
    }

    50% {
        transform: rotateY(-12deg) rotateX(-3deg);
    }

    100% {
        transform: rotateY(12deg) rotateX(3deg);
    }
}



/*ROBOT 2  (AVATAR 6) */

.scene6 {
    position: absolute;
    width: 80vmin;
    height: 80vmin;
    left: 12%;
    top: 15%;
}





.robot6 {
    position: absolute;
    width: 50%;
    height: 70%;
    left: 2%;
    top: 5%;
    background-image: url('../svg/robot2.svg');
    background-repeat: no-repeat;
    background-size: 100%;
    animation: robot2-anim 7s linear infinite;
}

.base6 {
    position: absolute;
    width: 70%;
    height: 80%;
    left: -7%;
    top: 17%;
/*    background-image: url('../svg/robot2-base.svg');*/
    background-repeat: no-repeat;
    background-size: 100%;
    
}



/*.eye-left6 {
    position: absolute;
    width: 10%;
    height: 10%;
    left: 32%;
    top: 26%;
    background-image: url('../svg/robot2-eye.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: eye-blink 4s 4.4s infinite;
    -webkit-animation: eye-blink 4s 4.4s infinite;
    z-index: 2;
    opacity: .8;
}*/


.eye-left6 {
    position: absolute;
    width: 10%;
    height: auto;
    aspect-ratio: 1 / 1;
    top: 26%;
    left: 32%;
    background-image: url('../svg/robot2-eye.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: eye-blink 4s 4.4s infinite;
    z-index: 2;
    opacity: .6;
}




    .eye-left6::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%) scale(0.9); /* 🔁 Centrado y agrandado */
        border-radius: 50%;
        box-shadow: 0 0 10px #042953, 0 0 20px #042953, 0 0 30px #042953;     
        pointer-events: none;
        z-index: -1;
    }




/*.eye-right6 {
    position: absolute;
    width: 10%;
    height: 10%;
    left: 57%;
    top: 26%;
    background-image: url('../svg/robot2-eye.svg');
    background-repeat: no-repeat;
    background-size: 100%;
    animation: eye-blink 4s 4.4s infinite;
    -webkit-animation: eye-blink 4s 4.4s infinite;
}
*/





.eye-right6 {
    position: absolute;
    width: 10%;
    height: auto;
    aspect-ratio: 1 / 1;  
    top: 26%;
    left: 57%;
    background-image: url('../svg/robot2-eye.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: eye-blink 4s 4.4s infinite;
    z-index: 2;
    opacity: .6;
}







    
    .eye-right6::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%) scale(0.9); /* 🔁 Centrado y agrandado */
        border-radius: 50%;
        box-shadow: 0 0 10px #042953, 0 0 20px #042953, 0 0 30px #042953;     
        pointer-events: none;
        z-index: -1;
    }







@keyframes neon-pulse {
    0%, 100% {
        box-shadow: 0 0 10px #1784ff, 0 0 20px #1784ff, 0 0 30px #1784ff;
        opacity: 1;
    }

    50% {
        box-shadow: 0 0 5px #1784ff, 0 0 10px #1784ff, 0 0 15px #1784ff;
        opacity: 0.8;
    }
}

.eye-right6::after {  
    animation: neon-pulse 1.5s infinite ease-in-out;
}

.eye-left6::after {
    animation: neon-pulse 1.5s infinite ease-in-out;
}






.arm-left6 {
    transform-origin: 50% 0;
    position: absolute;
    width: 20%;
    height: 49%;
    left: -6%;
    top: 50%;
    background-image: url('../svg/robot2-arm.svg');
    background-repeat: no-repeat;
    background-size: 100%;
    animation: robot6-arm-left 5s infinite linear;
}







.arm-right6 {
    transform-origin: 50% 0;
    position: absolute;
    width: 20%;
    height: 49%;
    left: 86%;
    top: 50%;
    background-image: url('../svg/robot2-arm2.svg');
    background-repeat: no-repeat;
    background-size: 100%;
    animation: robot6-arm-right 5s infinite linear;
}












@keyframes robot6-arm-left {
    0% {
        transform: rotate(-10deg);
    }

    50% {
        transform: rotate(10deg);
    }

    100% {
        transform: rotate(-10deg);
    }
}

@keyframes robot6-arm-right {
    0% {
        transform: rotate(10deg);
    }

    50% {
        transform: rotate(-10deg);
    }

    100% {
        transform: rotate(10deg);
    }
}


.mouth6 {
    position: absolute;
    width: 100%;
    height: 22%;
    left: 38%;
    top: 38%;
}






.msize6 {
    position: absolute;
    width: 25%;
    height: 25%;
}

.mcolor6 {
    opacity: .6;
}




/*ROBOT 3  (AVATAR 12) */

.scene12 {
    position: absolute;
    width: 80vmin;
    height: 80vmin;
    left: 12%;
    top: 15%;
}





.robot12 {
    position: absolute;
    width: 50%;
    height: 70%;
    left: 2%;
    top: 5%;
    background-image: url('../svg/robot3.svg');
    background-repeat: no-repeat;
    background-size: 100%;
    animation: robot2-anim 7s linear infinite;
}





.eye-left12 {
    position: absolute;
    width: 10%;
    height: auto;
    aspect-ratio: 1 / 1;
    top: 16%;
    left: 32%;
    background-image: url('../svg/robot2-eye.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: eye-blink 4s 4.4s infinite;
    z-index: 2;
    opacity: .6;
}




    .eye-left12::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%) scale(0.9); /* 🔁 Centrado y agrandado */
        border-radius: 50%;
        box-shadow: 0 0 10px #042953, 0 0 20px #042953, 0 0 30px #042953;
        pointer-events: none;
        z-index: -1;
    }








.eye-right12 {
    position: absolute;
    width: 10%;
    height: auto;
    aspect-ratio: 1 / 1;
    top: 16%;
    left: 57%;
    background-image: url('../svg/robot2-eye.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: eye-blink 4s 4.4s infinite;
    z-index: 2;
    opacity: .6;
}








    .eye-right12::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%) scale(0.9); /* 🔁 Centrado y agrandado */
        border-radius: 50%;
        box-shadow: 0 0 10px #042953, 0 0 20px #042953, 0 0 30px #042953;
        pointer-events: none;
        z-index: -1;
    }







@keyframes neon-pulse12 {
    0%, 100% {
        box-shadow: 0 0 10px #1784ff, 0 0 20px #1784ff, 0 0 30px #1784ff;
        opacity: 1;
    }

    50% {
        box-shadow: 0 0 5px #1784ff, 0 0 10px #1784ff, 0 0 15px #1784ff;
        opacity: 0.8;
    }
}














.eye-right12::after {
    animation: neon-pulse12 1.5s infinite ease-in-out;
}

.eye-left12::after {
    animation: neon-pulse12 1.5s infinite ease-in-out;
}






.arm-left12 {
    transform-origin: 50% 0;
    position: absolute;
    width: 20%;
    height: 49%;
    left: 0.5%;
    top: 56%;
    background-image: url('../svg/robot3-arm.svg');
    background-repeat: no-repeat;
    background-size: 100%;
    animation: robot12-arm-left 5s infinite linear;
}







.arm-right12 {
    transform-origin: 50% 0;
    position: absolute;
    width: 20%;
    height: 49%;
    left: 78%;
    top: 56%;
    background-image: url('../svg/robot3-arm2.svg');
    background-repeat: no-repeat;
    background-size: 100%;
    animation: robot12-arm-right 5s infinite linear;
}




.red-glow12 {
    position: absolute;
    width: 3%;
    aspect-ratio: 1 / 1;
    left: 34%;
    top: 45.5%;
    background-color:#e60073;
    border-radius: 50%;
    opacity: 1.6;
    animation: glow 1.5s ease-in-out infinite alternate;
    transform-origin: center center;
}







@keyframes robot12-arm-left {
    0% {
        transform: rotate(-10deg);
    }

    50% {
        transform: rotate(10deg);
    }

    100% {
        transform: rotate(-10deg);
    }
}

@keyframes robot12-arm-right {
    0% {
        transform: rotate(10deg);
    }

    50% {
        transform: rotate(-10deg);
    }

    100% {
        transform: rotate(10deg);
    }
}


.mouth12 {
    position: absolute;
    width: 100%;
    height: 18%;
    left: 38%;
    top: 25%;
}






.msize12 {
    position: absolute;
    width: 25%;
    height: 25%;
}

.mcolor12 {
    opacity: .6;
}




/*AVATAR 7*/



.face7 {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 72vmin;
    height: 72vmin;
    animation: music-move 20s 0.4s infinite alternate ease-in-out;
    -webkit-animation: music-move 20s 0.4s infinite alternate ease-in-out;
}


.head7 {
    position: absolute;
    width: 60%;
    height: 60%;
    left: 41%;
    top: 9%;
}





.abody7 {
    position: absolute;
    width: 72vmin;
    height: 72vmin;
    left: 10%;
    top: 18%;
    animation: bodyZ 20s 0.4s infinite t;
    -webkit-animation: bodyZ 10s 0.4s infinite;
}


.mouth7 {
    position: absolute;
    width: 100%;
    height: 18%;
    left: 10.5%;
    top: 50%;
}






.eye-left7 {
    background: #422626;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    left: 61%;
    top: 42%;
    animation: eye-blink 4s 4.4s infinite;
    -webkit-animation: eye-blink 4s 4.4s infinite;
}

.eye-right7 {
    background: #422626;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    left: 77%;
    top: 42%;
    animation: eye-blink 4s 4.4s infinite;
    -webkit-animation: eye-blink 4s 4.4s infinite;
}



/*AVATAR 8*/



.face8 {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 72vmin;
    height: 72vmin;
    animation: face-move 15s 0.4s infinite alternate ease-in-out;
  
}


.head8 {
    position: absolute;
    width: 57%;
    height: 58%;
    left: 43%;
    top: 11%;
}





.abody8 {
    position: absolute;
    width: 58vmin;
    height: 58vmin;
    left: 16%;
    top: 24%;
    animation: bodyZ 20s 0.4s infinite t;
    -webkit-animation: bodyZ 10s 0.4s infinite;
}


.mouth8 {
    position: absolute;
    width: 100%;
    height: 15%;
    left: 10.5%;
    top: 43%;
}


.eye-left8 {
    background: #6d6270;
    width: 2%;
    height: 3%;
    border-radius: 50%;
    left: 64%;
    top: 35%;
    animation: eye-blink 4s 4.4s infinite;
    -webkit-animation: eye-blink 4s 4.4s infinite;
}

.eye-right8 {
    background: #6d6270;
    width: 2%;
    height: 3%;
    border-radius: 50%;
    left: 77%;
    top: 35%;
    animation: eye-blink 4s 4.4s infinite;
    -webkit-animation: eye-blink 4s 4.4s infinite;
}


/*AVATAR 9*/



.face9 {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 72vmin;
    height: 72vmin;
    animation: face-move 15s 0.4s infinite alternate ease-in-out;
}


.head9 {
    position: absolute;
    width: 63%;
    height: 63%;
    left: 40%;
    top: 15%;
}





.abody9 {
    position: absolute;
    width: 58vmin;
    height: 58vmin;
    left: 16%;
    top: 24%;
    animation: bodyZ 20s 0.4s infinite t;
    -webkit-animation: bodyZ 10s 0.4s infinite;
}


.mouth9 {
    position: absolute;
    width: 100%;
    height: 15%;
    left: 10.8%;
    top: 49%;
}


.eye-left9 {
    background: #194610;
    width: 2%;
    height: 3%;
    border-radius: 50%;
    left: 64%;
    top: 42%;
    animation: eye-blink 4s 4.4s infinite;
    -webkit-animation: eye-blink 4s 4.4s infinite;
}

.eye-right9 {
    background: #194610;
    width: 2%;
    height: 3%;
    border-radius: 50%;
    left: 77%;
    top: 42%;
    animation: eye-blink 4s 4.4s infinite;
    -webkit-animation: eye-blink 4s 4.4s infinite;
}



/*AVATAR 10*/



.face10 {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 72vmin;
    height: 72vmin;
    animation: face-move2 15s 0.4s infinite alternate ease-in-out;
}


.head10 {
    position: absolute;
    width: 56%;
    height: 56%;
    left: 42.1%;
    top: 5%;
}




.abody10 {
    position: absolute;
    width: 56vmin;
    height: 56vmin;
    left: 16.5%;
    top: 20%;
    animation: bodyZ 20s 0.4s infinite t;

}


.mouth10 {
    position: absolute;
    width: 100%;
    height: 15%;
    left: 10%;
    top: 38%;
}


.eye-left10 {
    background: #203047;
    width: 2%;
    height: 3%;
    border-radius: 50%;
    left: 63%;
    top: 30%;
    animation: eye-blink 4s 4.4s infinite;
    -webkit-animation: eye-blink 4s 4.4s infinite;
}

.eye-right10 {
    background: #203047;
    width: 2%;
    height: 3%;
    border-radius: 50%;
    left: 76%;
    top: 30%;
    animation: eye-blink 4s 4.4s infinite;
    -webkit-animation: eye-blink 4s 4.4s infinite;
}



/*AVATAR 11*/



.face11 {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 72vmin;
    height: 72vmin;
 
}


.head11 {
    position: absolute;
    width: 40%;
    height: 40%;
    left: 50.1%;
    top: 12%;
    animation: face-move3 15s 0.4s infinite alternate ease-in-out;
}





.abody11 {
    position: absolute;
    width: 62vmin;
    height: 62vmin;
    left: 14%;
    top: 15%;
    animation: bodyZ 20s 0.4s infinite t;
    -webkit-animation: bodyZ 10s 0.4s infinite;
}




.mouth11 {
    position: absolute;
    width: 100%;
    height: 15%;
    left: 10%;
    top: 36.5%;
}


.eye-left11 {
    background: #194665;
    width: 2%;
    height: 3%;
    border-radius: 50%;
    left: 64%;
    top: 31%;
    animation: eye-blink 4s 4.4s infinite;
    -webkit-animation: eye-blink 4s 4.4s infinite;
}

.eye-right11 {
    background: #194665;
    width: 2%;
    height: 3%;
    border-radius: 50%;
    left: 74%;
    top: 31%;
    animation: eye-blink 4s 4.4s infinite;
    -webkit-animation: eye-blink 4s 4.4s infinite;
}




@keyframes robot2-anim {
    0% {
        transform: translateY(0%);
    }

    50% {
        transform: translateY(-10%);
    }

    100% {
        transform: translateY(0%);
    }
 }


@keyframes robot2-anim {
    0% {
        transform: translateY(0%);
    }

    50% {
        transform: translateY(-10%);
    }

    100% {
        transform: translateY(0%);
    }
}



.red-glow {
    position: absolute;
    width: 4%;
    aspect-ratio: 1 / 1;
    left: 48%;
    top: 55%;
    background-color: #e6003f;
    border-radius: 50%;
    opacity: 1.6;
    animation: glow 1.5s ease-in-out infinite alternate;
    transform-origin: center center;
}

@keyframes glow {
    from {
        transform: scale(0.8);  
        box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #e60073, 0 0 20px #e60073, 0 0 25px #e60073, 0 0 30px #e60073, 0 0 35px #e60073;
    }

    to {
        transform: scale(1);      
        box-shadow: 0 0 10px #fff, 0 0 20px #ff4da6, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6;
    }
}