:root {
    --anima1: url("/img/rodar90.png");
    --anima2: url("/img/MITOSv.svg");
    --anima3: url("/img/Boomp4.svg");
    --anima4: url("/img/Default.png");

  }
  
  body {
   display: flex;
    background: var(--bailarin),linear-gradient(rgba(0, 0, 255, 0.96) 30%, rgba(0, 166, 255, 0.96)) ;
    background-image: var(--anima2),radial-gradient(rgba(0, 0, 255, 0.96) 40%, rgba(0, 166, 255, 0.96)) ;
    background-size:  9%, auto;
    background-blend-mode: soft-light, overlay;
    justify-content: space-evenly;
    perspective: 2100vw;
}
 /* cambios marzo 2024*/
#primerpantalla{
    align-content: center;
    block-size: 100vw, 100vh;
    perspective: 130rem;
    perspective-origin: 1000px, 50%;
    transform-style: preserve-3d;
}

#titulo {
    display: flex;
    align-items: center;
    font-family: 'Ubuntu', sans-serif;
    color: aliceblue;
    font-weight: 700;
    font-size: xx-large;
}


#anotherone {
    display: flex;
    align-self: center;
    display: block;
    width: 300px;
    height: 512px;
    overflow: hidden;
    animation: desplazar 60s linear 6s infinite;
}

#danzante {
    width: 1800px;
    animation: boomp 1800ms alternate 3s infinite steps(6);
}

#javieroo{
    height: 80vh;
    padding-bottom: -100px;
    animation: mover 6s alternate 3s infinite forwards;
    filter: drop-shadow(-9px 6px 6px rgba(0, 0, 0, 0.4));
}
#cara {
    transform: translateY(-45px);
}
#Cuello {
    transform-origin: 125px 75px;
    animation: cuellom 9s alternate 4s infinite forwards;
}
@keyframes cuellom {
    30%{
        transform: translateY(-1px) rotate(-.3deg);
    }
    60%{
        transform: translateY(1px) rotate(.3deg);
    }
}
@keyframes mover {
    0%{
        transform: translateX(0px) translateY(0px) rotateY(12deg);
    }
    30%{
        transform: translateX(-15px) translateY(3px) rotateY(0deg);
    }
    60%{
        transform: translateX(0px) translateY(0px) rotateY(-12deg);
    }
    90%{
        transform: translateX(15px) translateY(-12px) rotateY(0deg);
    }
    100%{
        transform: translateX(15px) translateY(12px) rotateY(0deg);
    }
}

#cara{
    transform-origin: center bottom;
    animation: lalala 3s alternate 1s infinite;
}
#pupila1{
    transform: translateY(10px);

}
#ojoi, #ojod1{
    transform-origin: center top;
    animation: ojitos 9s alternate 1s infinite;
}
#parpado-i, #parpadod{
    transform-origin: center bottom;
    animation: parpadoizq 9s alternate 1s infinite;
}
#Cejai, #CEJAD {
    transform-origin: center center;
    animation: cejas 9s alternate 1s infinite;
}
#boca{
    transform-origin: center;
     animation: bocas 9s alternate 1s infinite;
}

.careta {
 animation: colorado 9s alternate-reverse 1s infinite;   
}
@keyframes colorado {
    21%{
        filter:hue-rotate(0deg);
    }
    30%{
        filter:hue-rotate(-15deg);
    }
    40%{
        filter:hue-rotate(-15deg);
    }
    51%{
        filter:hue-rotate(0deg);
    }
}

@keyframes bocas {
    30%{
        transform: rotate(3deg) translateX(3px) scale(.9);
    }   
    60%{
        transform: rotate(-3deg) translateX(-6px) scale(.8);
    }
    90%{
        transform: rotate(1deg) translateX(3px) scale(.96);
    }  
}
@keyframes cejas {
    30%{
        transform: translateY(-24px) rotate(-1deg);
    }
    60%{
        transform: translateY(9px) rotate(-1deg);
    }
}


@keyframes parpadoizq {
   50%{
    transform: translateY(-51px) scale(.96);
   }
}
@keyframes ojitos {
    30%{
        transform: translateX(0px);
        scale: 104%;
    }
    60%{
        transform: translateX(-69px);
        scale: 101%;
    }
    90%{
        transform: translateX(74px);
    }
    
}

@keyframes lalala{
    50%{
        transform: rotate(-3deg) translateY(12px) translateX(18px);
    }
    100%{
        transform: rotate(3deg) translateY(-12px) translateX(-18px);
    }
}

@keyframes boomp {
    0% {
        transform: translateX(0px);
    }

    59.9% {
        transform: translateX(-1800px);
    }

    60% {
        transform: translateX(0px) translateY(-512px);
    }

    100% {
        transform: translateX(-1800px) translateY(-512px);
    }
}

@keyframes desplazar {
    25% {
        transform-style: preserve-3d;
        transform: translateX(2vw) translateY(1vh) scale(.9) translateZ(300px) rotateY(-12deg);
    }

    75% {
        transform-style: preserve-3d;
        transform: translateX(-20vw) translateY(12vh) translateZ(-300px) scale(0.6) rotateY(12deg);
    }
}

@keyframes balance {
    0% {
        transform-origin: bottom center;
        transform:rotateZ(.12deg) translateX(-.3px) scaleY(.993) skew(.15deg, .45deg);
    }

    100% {
        transform-origin: bottom center;
        transform:rotateZ(-.12deg) translateX(.3px) scaleY(1);
        perspective: 500px;
    }
}

#primeras{
    animation: balance 420ms alternate infinite steps(6);
}
/*
@{
  var assembly = Assembly.GetEntryAssembly();
  var name = assembly.GetName();
  var version = name.Version;
}*/