.title-mobile{
    display: none;
}
.title-web{
    display: inline-block;
}
.bg-light-custom{
    background-color: rgb(236, 236, 236);
}
.logo-img{
    border: 10px solid rgb(0, 0, 0);
    margin-top: 8%;
    border-radius: 50%;
}
.profile-img{
    border: 10px solid gray;
    margin-top: 8%;
    border-radius: 50%;
}
.mobile-display{
    display: none;
}
.tec-bar{
    width: 60%;
}

/* ============================= START---TEXTO INICIAL ================================ */

.hello-world {
    font-size: 80px;
    font-weight: bold;
    font-style: italic;
    display: inline-block;
    border-right: 2px solid rgb(0, 0, 0);
    padding-right: 10px;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 3s steps(30), blink-caret 0.5s step-end infinite, coloring step-end infinite;
}

.typewriter {
    white-space: nowrap;
}
  
.typewriter:before {
    overflow: hidden; /* Esconde el contenido adicional */
    animation: typing 2s steps(15), blink-caret 0.3s step-end infinite, coloring step-end infinite;
}
  
@keyframes typing {
    from, to {
        width: 0; /* Inicialmente el ancho es 0 */
    }
    100% {
        width: 50%; /* Ajusta el valor para la longitud del texto "Hola Mundo" */
    }
}

@keyframes blink-caret {
    from, to {
        border-color: transparent;
    }
    50% {
        border-color: rgb(0, 0, 0);
    }
}

/* ============================= END---TEXTO INICIAL ================================ */

/* ============================= START---ANIMACIONES ================================ */

.slider-hello{
    animation: hello-slide 2s;
}
@keyframes hello-slide {
    from {
        opacity: 0;
        transform: translateY(20px); /* Desplazamiento hacia abajo en 0px (posición final) */
    } 
    to {
        opacity: 1;
        transform: translateY(0); /* Desplazamiento hacia abajo en 0px (posición final) */
    }
}


.hide-t {
    opacity: 0; /* Inicialmente ocultamos el contenido */
    transform: translateY(-50px); /* Desplazamiento hacia arriba */
}
.hide-l {
    opacity: 0; /* Inicialmente ocultamos el contenido */
    transform: translateX(-50px); /* Desplazamiento */
}
.hide-r {
    opacity: 0; /* Inicialmente ocultamos el contenido */
    transform: translateX(50px); /* Desplazamiento hacia arriba */
}
.hide-b {
    opacity: 0; /* Inicialmente ocultamos el contenido */
    transform: translateY(50px); /* Desplazamiento hacia arriba */
}

.slider-t.show-t {
    opacity: 1;
    transform: translateY(0); /* Desplazamiento hacia abajo en 0px (posición final) */
    transition: opacity 1s ease-out, transform 1s ease-out; /* Transiciones más rápidas */
}
.slider-l.show-l {
    opacity: 1;
    transform: translateX(0); /* Desplazamiento hacia abajo en 0px (posición final) */
    transition: opacity 1s ease-out, transform 1s ease-out; /* Transiciones más rápidas */
}
.slider-r.show-r {
    opacity: 1;
    transform: translateX(0); /* Desplazamiento hacia abajo en 0px (posición final) */
    transition: opacity 1s ease-out, transform 1s ease-out; /* Transiciones más rápidas */
}
.slider-b.show-b {
    opacity: 1;
    transform: translateY(0); /* Desplazamiento hacia abajo en 0px (posición final) */
    transition: opacity 1s ease-out, transform 1s ease-out; /* Transiciones más rápidas */
}

/* ================== START---CASO MOBILE ====================== */
.hide-l-mobile {
    opacity: 0; /* Inicialmente ocultamos el contenido */
    transform: translateX(-50px); /* Desplazamiento hacia arriba */
}
.slider-l-mobile.show-l-mobile {
    opacity: 1;
    transform: translateX(0); /* Desplazamiento hacia abajo en 0px (posición final) */
    transition: opacity 1s ease-out, transform 1s ease-out; /* Transiciones más rápidas */
}
.hide-r-mobile {
    opacity: 0; /* Inicialmente ocultamos el contenido */
    transform: translateX(50px); /* Desplazamiento hacia arriba */
}
.slider-r-mobile.show-r-mobile {
    opacity: 1;
    transform: translateX(0); /* Desplazamiento hacia abajo en 0px (posición final) */
    transition: opacity 1s ease-out, transform 1s ease-out; /* Transiciones más rápidas */
}
/* ================== END---CASO MOBILE ====================== */


/* ============================= END---ANIMACIONES ================================ */
  
@media (max-width: 1200px) {
    @keyframes typing {
        from, to {
            width: 0; /* Inicialmente el ancho es 0 */
        }
        100% {
            width: 90%; /* Ajusta el valor para la longitud del texto "Hola Mundo" */
        }
    }
}
@media (max-width: 700px) {
    .title-mobile{
        display: inline-block;
    }
    .title-web{
        display: none;
    }
    .about-text{
        font-size: 0.9rem;
    }
    .desktop-display{
        display: none;
    }
    .mobile-display{
        display: flex;
    }
    .tec-icon{
        width: 45px;
    }
    .tec-bar{
        width: 80%;
    }
    .tec-domain-text{
        font-size: 0.7rem;
    }

    .hello-world {
        font-size: 35px;
    }
    @keyframes typing {
        from, to {
            width: 0; /* Inicialmente el ancho es 0 */
        }
        100% {
            width: 95%; /* Ajusta el valor para la longitud del texto "Hola Mundo" */
        }
    }

    /* ================== START---CASO MOBILE ====================== */
    .hide-l-mobile {
        opacity: 0; /* Inicialmente ocultamos el contenido */
        transform: translateX(0);
        transform: translateY(30px); 
    }
    .slider-l-mobile.show-l-mobile {
        opacity: 1;
        transform: translateY(0); 
        transition: opacity 1s ease-out, transform 1s ease-out; /* Transiciones más rápidas */
    }
    .hide-r-mobile {
        opacity: 0; /* Inicialmente ocultamos el contenido */
        transform: translateX(0);
        transform: translateY(-30px); 
    }
    .slider-r-mobile.show-r-mobile {
        opacity: 1;
        transform: translateY(0); 
        transition: opacity 1s ease-out, transform 1s ease-out; /* Transiciones más rápidas */
    }
    /* ================== END---CASO MOBILE ====================== */

}