.lenguaje-programacion-contendor{
    position: absolute;
    color: aliceblue;
    font-size: 20px;
    font-family: "smoolthan";
    text-align: center;
    width: inherit
}

@keyframes girar{
    0%{
        transform:rotateY(90deg)
    }
    3.125%{
        transform:rotateY(0deg)
    }
    
    9.375%{
        transform:rotateY(0deg)
    }
    
    12.5%{
        transform:rotateY(-90deg)
    }
    
    100%{
        transform:rotateY(-90deg)
    }
    
}

@keyframes aparecer{
    0%{
        transform:translateY(10px);
        opacity: 0;    
    }
    3.125%{
        transform:translateY(0px);
        opacity: 1;
    }
    
    9.375%{
        transform:translateY(0px);
        opacity: 1;
    }
    
    12.5%{
        transform:translateY(-10px);
        opacity: 0;
    }
    100%{
        transform:translateY(-10px);
        opacity: 0;
    }
}

#icono-desarrollo-contenedor-1{
    animation-name: girar;
    animation-duration: 32s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: backwards;
    animation-delay: 0s;
}

#lenguaje-programacion-contendor-1 {
    animation-name: aparecer;
    animation-duration: 32s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: backwards;
    animation-delay: 0s;
}


#icono-desarrollo-contenedor-2{
    animation-name: girar;
    animation-duration: 32s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: backwards;
    animation-delay: 4s;
}

#lenguaje-programacion-contendor-2 {
    animation-name: aparecer;
    animation-duration: 32s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: backwards;
    animation-delay: 4s;
}

#icono-desarrollo-contenedor-3 {
    animation-name: girar;
    animation-duration: 32s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: backwards;
    animation-delay: 8s;
}

#lenguaje-programacion-contendor-3 {
    animation-name: aparecer;
    animation-duration: 32s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: backwards;
    animation-delay: 8s;
}

#icono-desarrollo-contenedor-4{
    animation-name: girar;
    animation-duration: 32s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: backwards;
    animation-delay: 12s;
}

#lenguaje-programacion-contendor-4 {
    animation-name: aparecer;
    animation-duration: 32s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: backwards;
    animation-delay: 12s;
}

#icono-desarrollo-contenedor-5 {
    animation-name: girar;
    animation-duration: 32s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: backwards;
    animation-delay: 16s;
}

#lenguaje-programacion-contendor-5 {
    animation-name: aparecer;
    animation-duration: 32s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: backwards;
    animation-delay: 16s;
}

#icono-desarrollo-contenedor-6 {
    animation-name: girar;
    animation-duration: 32s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: backwards;
    animation-delay: 20s;
}

#lenguaje-programacion-contendor-6 {
    animation-name: aparecer;
    animation-duration: 32s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: backwards;
    animation-delay: 20s;
}

#icono-desarrollo-contenedor-7 {
    animation-name: girar;
    animation-duration: 32s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: backwards;
    animation-delay: 24s;
}

#lenguaje-programacion-contendor-7 {
    animation-name: aparecer;
    animation-duration: 32s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: backwards;
    animation-delay: 24s;
}

#icono-desarrollo-contenedor-8 {
    animation-name: girar;
    animation-duration: 32s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: backwards;
    animation-delay: 28s;
}

#lenguaje-programacion-contendor-8 {
    animation-name: aparecer;
    animation-duration: 32s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: backwards;
    animation-delay: 28s;
}