#lenguajes .contenido {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 70%;
    margin: 1% auto 0 auto;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    perspective: 1000px;
}

.tarjeta {
    display: flex;
    position: relative;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 20vw;
    padding: 1.5%;
    margin: 80px auto 0 auto;
    transform-style: preserve-3d;
    transition: all 0.15s ease-out;
}

.tarjeta-img {
    font-size: 5vw;
    color: rgb(10, 187, 77);
    animation: animacionTarjeta 4s infinite ease-in-out;
}

.tarjeta p {
    font-size: 2vw;
    position: absolute;
    color: #dfdfd5;
    text-align: center;
    font-family: 'VT323', monospace;
    opacity: 0;
    background: linear-gradient(60deg,
            rgb(10, 187, 77) 0%,
            #dfdfd5 20%,
            #dfdfd5 50%,
            rgb(10, 187, 77) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: animacionTarjetaTitulo 4s infinite ease-in-out;
}

.titulo {
    display: flex;
    font-size: 3vw;
    margin: 10% auto 0 auto;
    justify-content: center;
    text-align: center;
    font-family: 'VT323', monospace;
    color: #dfdfd5;
}

.titulo h2::after {
    content: "|";
    -webkit-text-fill-color: rgb(10, 187, 77);
    animation: animacionCursor 1s infinite;
}

.proyecto {
    flex: 1;
    position: relative;
    overflow: hidden;
    width: 7vw;
    transform: skewX(-20deg);
    border: 2px solid rgb(179, 249, 206);
    box-shadow: 0px 0px 10px rgb(10, 187, 77);
    box-shadow: inset 0px 0px 200px rgba(0, 0, 0, 1);
    background-color: rgb(37, 37, 37);
    animation: carrusel 24s infinite cubic-bezier(0.10, 0.9, 0.5, 1);

}

.proyecto a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    opacity: 0;
}

#proyecto-carrusel {
    display: flex;
    flex-direction: row;
    margin: 5% auto 0 auto;
    width: 70%;
    height: 30vw;
    padding: 10px;
    border-radius: 25px;
    margin: 1% auto 0 auto;
}


.proyecto img {
    width: 100%;
    height: 100%;
    object-position: 10% center;
    object-fit: cover;
    opacity: 0.1;
    animation: carruselOcultarFondo 24s infinite cubic-bezier(0.10, 0.9, 0.5, 1);

}

.proyecto h4 {
    position: absolute;
    color: #dfdfd5;
    text-shadow: 25px 10px 7px rgba(0, 0, 0, 1);
    -webkit-text-stroke: 1px rgba(0, 0, 0, 1);
    rotate: 90deg;
    transform-origin: left center;
    animation: carruselMostrarTitulo 24s infinite cubic-bezier(0.10, 0.9, 0.5, 1);
}

.proyecto p {
    width: 80%;
    font-size: 300%;
    position: absolute;
    bottom: 10%;
    left: 10%;
    color: #dfdfd5;
    text-shadow: 10px 10px 10px rgba(0, 0, 0, 1);
    opacity: 0;
    animation: carruselMostrarDescripcion 24s infinite cubic-bezier(0.10, 0.9, 0.5, 1);
}

#perfil-sobre-mi {
    display: flex;
    flex-direction: row;
    position: relative;
    margin: 3% auto auto auto;
    width: 70%;
    height: auto;
}

#sobre-mi-contenedor-img {
    width: 40%;
}

.texto-sobre-mi-img {
    width: 40vw;
    margin: auto 0 auto auto;
    opacity: 0.5;
}

#texto-sobre-mi {
    display: flex;
    flex-direction: column;
    margin: 4% auto auto 0;
    width: 50%;
    font-size: 1.2vw;
}

#descripcion-contenedor h3 {
    text-align: left;
    background: linear-gradient(90deg, rgb(10, 186, 77), rgb(197, 197, 197), rgb(197, 197, 197), rgb(197, 197, 197), rgb(134, 134, 134));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'VT323', monospace;
}

#datos-monitor {
    display: grid;
    position: relative;
    grid-template-columns: max-content 1fr;
    text-align: left;
}

.datos-sobre-mi {
    font-family: 'VT323', monospace;
    font-size: 1vw;
    color: rgb(169, 169, 169);
    margin: 1vw 0 0 0;
}

.dato-escrito::after {
    content: "|";
    -webkit-text-fill-color: rgb(10, 187, 77);
    animation: animacionCursor 1s infinite;
}

.dato {
    text-align: left;
    background: linear-gradient(90deg, rgb(10, 186, 77), rgb(197, 197, 197), rgb(134, 134, 134));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.monitor-codigo {
    display: flex;
    z-index: -10;
    position: absolute;
    top: 20%;
    left: 65%;
}


@keyframes animacionTarjeta {
    0% {
        transform: translateZ(-1000vw);
        filter: blur(1px);
        opacity: 0.2;
    }

    5% {
        transform: translateZ(0px);
        filter: blur(2px);
        opacity: 1;
    }

    10% {
        transform: scale(0.8);
        filter: blur(1px);
    }

    35% {
        transform: scale(0.95);
        filter: blur(0);
        opacity: 1;
    }

    40% {
        transform: scale(0.6);
        opacity: 0.4;
        filter: blur(4px);
    }

    100% {
        transform: scale(0);
        filter: blur(5px);
        opacity: 0;
    }
}



@keyframes animacionTarjetaTitulo {
    0% {
        opacity: 0;
    }

    35% {
        opacity: 0;
        transform: scale(0);
        filter: blur(1px);
    }

    40% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }

    50% {
        text-shadow: 25px 10px 7px rgba(10, 187, 77, 0.7);
    }

    80% {
        text-shadow: 40px 10px 10px rgba(10, 187, 77, 0.2);
    }

    100% {
        opacity: 0;
        transform: scale(1.2);
        filter: blur(1px);
    }
}

@keyframes carrusel {
    0% {
        flex: 1;
    }

    3% {
        flex: 30;
    }

    15% {
        flex: 30;
    }


    18% {
        flex: 1;
    }

}

@keyframes carruselMostrarTitulo {

    2% {
        font-size: 600%;
        bottom: 40%;
        left: 1.5vw;
        rotate: 0deg;
    }

    15% {
        font-size: 600%;
        rotate: 0deg;
    }

    17% {
        opacity: 1;

    }

    20% {
        font-size: 150%;
        opacity: 0;
        bottom: 40%;
        left: 1.5vw;
        rotate: 90deg;
    }

    100% {
        font-size: 150%;
        opacity: 0;
    }
}

@keyframes carruselMostrarDescripcion {
    0% {
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    17% {
        opacity: 0;
    }
}


@keyframes carruselOcultarFondo {
    0% {
        opacity: 0.1;
    }

    16% {
        transform: scale(1.1);
        opacity: 0.2;
    }

    17% {
        transform: scale(1);
        opacity: 0.5;
    }

    100% {
        opacity: 0.1;
    }
}

/* Delay carrusel */

#proyecto-carrusel .proyecto:nth-child(1),
#proyecto-carrusel .proyecto:nth-child(1) h3,
#proyecto-carrusel .proyecto:nth-child(1) h4,
#proyecto-carrusel .proyecto:nth-child(1) p,
#proyecto-carrusel .proyecto:nth-child(1) img {
    animation-delay: 0s;
}

#proyecto-carrusel .proyecto:nth-child(2),
#proyecto-carrusel .proyecto:nth-child(2) h3,
#proyecto-carrusel .proyecto:nth-child(2) h4,
#proyecto-carrusel .proyecto:nth-child(2) p,
#proyecto-carrusel .proyecto:nth-child(2) img {
    animation-delay: 4s;
}

#proyecto-carrusel .proyecto:nth-child(3),
#proyecto-carrusel .proyecto:nth-child(3) h3,
#proyecto-carrusel .proyecto:nth-child(3) h4,
#proyecto-carrusel .proyecto:nth-child(3) p,
#proyecto-carrusel .proyecto:nth-child(3) img {
    animation-delay: 8s;
}

#proyecto-carrusel .proyecto:nth-child(4),
#proyecto-carrusel .proyecto:nth-child(4) h3,
#proyecto-carrusel .proyecto:nth-child(4) h4,
#proyecto-carrusel .proyecto:nth-child(4) p,
#proyecto-carrusel .proyecto:nth-child(4) img {
    animation-delay: 12s;
}

#proyecto-carrusel .proyecto:nth-child(5),
#proyecto-carrusel .proyecto:nth-child(5) h3,
#proyecto-carrusel .proyecto:nth-child(5) h4,
#proyecto-carrusel .proyecto:nth-child(5) p,
#proyecto-carrusel .proyecto:nth-child(5) img {
    animation-delay: 16s;
}

#proyecto-carrusel .proyecto:nth-child(6),
#proyecto-carrusel .proyecto:nth-child(6) h3,
#proyecto-carrusel .proyecto:nth-child(6) h4,
#proyecto-carrusel .proyecto:nth-child(6) p,
#proyecto-carrusel .proyecto:nth-child(6) img {
    animation-delay: 20s;
}

#proyecto-carrusel:hover .proyecto,
#proyecto-carrusel:hover img,
#proyecto-carrusel:hover h4,
#proyecto-carrusel:hover p {
    animation-play-state: paused;
}

/* Delay tarjetas */

#lenguajes .contenido .tarjeta:nth-child(1) .tarjeta-img,
#lenguajes .contenido .tarjeta:nth-child(1) p {
    animation-delay: 0s;
}

#lenguajes .contenido .tarjeta:nth-child(2) .tarjeta-img,
#lenguajes .contenido .tarjeta:nth-child(2) p {
    animation-delay: 0.2s;
}

#lenguajes .contenido .tarjeta:nth-child(3) .tarjeta-img,
#lenguajes .contenido .tarjeta:nth-child(3) p {
    animation-delay: 0.4s;
}

#lenguajes .contenido .tarjeta:nth-child(4) .tarjeta-img,
#lenguajes .contenido .tarjeta:nth-child(4) p {
    animation-delay: 0.6s;
}

#lenguajes .contenido .tarjeta:nth-child(5) .tarjeta-img,
#lenguajes .contenido .tarjeta:nth-child(5) p {
    animation-delay: 0.8s;
}

#lenguajes .contenido .tarjeta:nth-child(6) .tarjeta-img,
#lenguajes .contenido .tarjeta:nth-child(6) p {
    animation-delay: 0.7s;
}

#lenguajes .contenido .tarjeta:nth-child(7) .tarjeta-img,
#lenguajes .contenido .tarjeta:nth-child(7) p {
    animation-delay: 0.5s;
}

#lenguajes .contenido .tarjeta:nth-child(8) .tarjeta-img,
#lenguajes .contenido .tarjeta:nth-child(8) p {
    animation-delay: 0.3s;
}

#lenguajes .contenido .tarjeta:nth-child(9) .tarjeta-img,
#lenguajes .contenido .tarjeta:nth-child(9) p {
    animation-delay: 0.1s;
}