*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
  }
html,body{
    overflow-x: hidden;
    width: 100%;
}
/* GENERAL*/
body{
    
    min-height:685vh;
    min-height:685dvh;
    
    max-width: 100%;
   
    overflow-x: hidden;
    scroll-behavior: smooth;
    display: flex;
    gap: 30px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  
}

/* HEADER */
.header {
    position: fixed;
    top: 0;
    
    z-index: 20;
    margin: auto;
    
    
    display: flex;
    justify-content: center;
    min-height: 10vh;
    max-height: 10vh;
    background: transparent;
    backdrop-filter: blur(3px);
   min-width: 50vw;
    align-items: center;
    border-left: none;
    border-right: none;
    border-top: none;
    border-radius: 9px;
    transition: all 1s;
    display: flex;
   
    animation: color 1s ease both;
    animation-timeline: scroll(root);
    animation-range: 100px 200px;
}

h1{
    font-size: 4em;
}
.showNav, .hideNav{
    padding: 7px;
    border-radius: 5px;
    display: none;
}

.header__nav{
    width: auto;
    margin-top: 13px;
    display: flex;
    justify-content: center;
    gap: 50px;
    align-items: center;
    transition: all 0.4s ease-in;
}

.header__nav-link{
   
    font-family: "Goldman", sans-serif;
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 8px;
    color: #fff;
    animation: opac 1s ease;
    transition: all 0.4s ease-in;
    scale: 1;
    outline: none;
}

/* BOTONES ANIMADOS */


.header__nav-link:hover{
    scale: 1.3;
}
.header__logos{
    filter: brightness(2);
    transition: filter 0.4s;
    
}
.header__nav-link:hover .header__logos{
    filter:brightness(2.7)
}

@media(max-width:480px){
    .header{
        width: 100vw;
       margin-top: 0;
        opacity: 1;
        border-radius: 0;
        flex-direction: column;
        justify-content: space-around;
      
        border: none;
        transition: all 0.4s linear;
    }
    
    .header__nav{
        width: 100%;
        height: 100%;  
        max-height: 100%;     
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .header__nav-link{
        display: flex;    
        flex-direction: column;
        justify-content: center;
        width: 100%;
        text-align: center;
        
        height: 100%;
        max-height: 100%;
    }
    
    #texto-sub{
        font-size: 1.3em;
    } 
}

/*  PRINCIPAL */
.main {
   
    min-height: 100vh;
    margin-top: 6rem;
    display: flex;
    flex-direction: column;
    justify-content:space-between;
}
.reset-page{
    position: absolute;
    top: 15px;
    left: 15px;
    filter: contrast();
}
.animate-reset{
animation : flipReset 1s both;
}

.main__section{
    height: 95%;
    max-height: 95%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly
}
.main__section-aside{
    margin-top: 5rem;
}
.aside2{
    height: 70%;
    max-height: 70%;
    display: flex;
    margin-top: 4rem;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    gap: 13px;
}

.text-presentation{
    font-size: 1.4em;
    font-family: "Zen Dots", sans-serif;;
    font-weight: 400;
    text-wrap: pretty;
    color: #fff;
    opacity: 1;
    
}
.main_Image{
    width: 100vw;
    height: 40vh;
    max-height: 40vh;
}
.imageContainer{
    margin-top: 30px;
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.yo{
    opacity: 0.8;
    position: relative;
    height: auto;
    border-radius: 25%;
    transition: all .4s ease;
    aspect-ratio: 1/1;
    overflow: hidden;
}

.yo:hover{
    opacity: 1;
    scale: 1.1;
}

.text-presentation:first-child{
    text-align: start;
}
#text2{
    text-align: end;
}
.scroll-element{
    padding: 10px;
    width: 40%;
    height: 20vh;
    max-height: 20vh;
    background-color: transparent;;
    text-align: start;
    text-wrap:pretty;
    word-spacing: 2px;
    opacity: 0;
    padding: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.move-left{
    text-align: end;
}
.js-scroll.scrollable{
    opacity: 0;
}
.scrollable.move-right{
    animation: moveRight 1.6s both;
    animation-timing-function: cubic-bezier(0.44, 0, 0.56, 1);
    
}
.scrollable.move-left{
    animation: moveLeft 1.6s  both;
    animation-timing-function: cubic-bezier(0.44, 0, 0.56, 1);
}

@media(max-width:850px){
   
    .main_Image{
        width: 100vw;
        
    }
    .imageContainer{
        width: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .yo{
        width: 30%;
        opacity: 1;
    }
    .yo:hover{
        scale: 1;
    }
}

@media(max-width:480px){
    .main{
        justify-content: flex-start;
       
        gap: 0px;
    }
    .main__section{
        height: 100%;

        justify-content: space-evenly; 
    }
    .text-presentation{
        margin: 10px;
        font-size: 1.1em;
    }
    .text-presentation:nth-child(2){
        margin-bottom: 20px;
    }
    h2{
        margin-bottom: 40px;
        font-size: 2.5em;
        padding-right: 7px;
    }
    .aside2{
        
        display: flex;
        
        font-size: 0.9em;
        flex-direction: column;
        justify-content: space-around;
    }
    .main_Image{
        width: 100vw;
        
    }
    .imageContainer{
        width: 100%;
        
        align-items: center;
        justify-content: center;
    }

    .yo:hover{
        scale: 1;
    }
    .scroll-element{
        gap: 25px;
    }
}

/* SECONDARY*/
.secondary-container{
    height: 85vh;
    min-height: 85vh;
    max-height: 85vh;
    width: 50vw;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
   align-items: center;
    gap: 30px;
}


.secondary-section{
    width: 100vw;
    
    display: flex;
    
}
.section-logos{
    /*No tocar altura*/
   
    filter: brightness(1.5);
    width: 100%;
    height:50%;
    max-height: 50%;
   
    
}
.logos{
    margin: auto;
    display: grid;
    position: absolute;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 26px;
    
    width: 90%;
    
}
.logos-text{
   width: 50vw;
    min-height: 100%;
    max-height: 100%;
    
    display: grid;
    justify-content: center;
    align-items: center;    
    justify-items: center;
    
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap:3rem;
}
.logos-text-container{
    z-index:100;
    box-shadow: 0 0 2px #4e46e5a2;
    color: #fff;
    background: rgba(20, 20, 40, 0.85);
    
    border-radius: 15px;
    padding: 1rem;
    min-width: 150px;
    max-width: 150px;
    font-family: 'Orbitron', sans-serif; /* fuente futurista */
    min-height: 50px;
    max-height: 50px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
    padding: 6px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    
    transition: transform .8s ease, filter .8s ease, background .8s ease;;
    
    }

  .logos-text-container:hover{
    animation: animateCard .8s ease-in-out both;
  }
  
  .logos-text-container:nth-child(even){
    transform: rotate(2deg);
  }
  .logos-text-container:nth-child(odd){
    transform: rotate(-2deg);
  }
.logos-languages{
    
    max-width: 50%;
    
}
.logos-text-container .html-container:hover{
    cursor: pointer;
}


.scrolledBottom{
    animation:moveBottom 1.2s ease-in-out both;
}

.lottie{
    
    
  height: auto;
}
.aside-info-personal{
    width: 70vw;
    min-height: 80vh;
    max-height: 80vh;
    margin: 0 auto;
    margin-top: 100px;
    border-radius: 12px;
    background: transparent;
    
    opacity: 0;
    display: flex;
    border: 1px solid transparent;
    flex-direction: column;
    
    align-items: center;
    transition: all 1s ease-out;
}
.info-personal{
    width: 60%;
    min-height: 450px;
    max-height: 450px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    text-wrap: pretty;
    border-radius: 6px;
    position: relative;
    padding: 7px 9px;
    background-color: #000000;
    transition: all .9s ease-in;
}
.info-personal:hover{
    outline: 1px solid #fff;
}

.moveTop{
    animation: moveTop 1.8s ease-in-out both;
}


#adentr{
    position: absolute;
    bottom: 5px;
    left: 20px;
    color: #002766;
}
.info-personal::before{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    background-color: #ffffff;
    bottom: 60px;
    width: 95%;
    height: 1px;
    max-height: 1px;
}
.agrandar.info-personal{
    animation: agrandado 3s linear both;
}
#texto-info, #adentr{
    font-size: 140%;
    text-wrap: pretty;
    padding: 11px 8px;
    line-height: 1.3;
    letter-spacing: 1px;
    
}
#texto-info{
    color: #FF00FF;
    max-width: 90%;
    min-height: 90%;
    max-height: 90%;
    line-height: 2.4;
}



.projects_section{
    width: 100vw;
    min-height: 90vh;
   
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 10rem;
    font-family: "Goldman", sans-serif;
}
.projects_section h3{
    color: #fff;
    font-size: 2.3em;
    animation: opac .5s ease both;
    animation-timeline: scroll(root);
    animation-range: 30px 100px;
    opacity: 0;
    
}
.project_card h4{
    position: absolute;
    font-size: 1.3em;
    top: -35px;
    left: 10px;
}
.project_card{
    width: 45%;
    min-height: auto;
    opacity: .4;
    margin: auto;
    margin-top: 8rem;
    position: relative;
    background:#ffffff2d;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    backdrop-filter: brightness(2);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: transform 0.2s ease;
   display: flex;
   
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 5px;
    transition: all .3s ease;
    border: 1px solid transparent;
}
.project_images-container{
height: 100%;
max-height: 100%;
display: flex;
flex-direction: column;

}
.project_images{
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 12px;
    
    
    
}

.project_text{
    color: #fff;
   display: flex;
   margin-top: 10px;
   flex-direction: column;
   justify-content: end;
   min-height: 100%;
   
   width: 100%;
}
.project_text p{
    font-size: 1.2em;
    font-weight: 400;
    text-wrap: pretty;
   transition: color .3s ease;
}
.project_container-logo{
    width: 100%;
    height: 100%;
    max-height: 100%;
    max-height: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    margin-top: 20px;
    gap: 2rem;
    position: relative;
}
.logos_container{
  
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 1rem;
    height: 100%;
    max-height: 100%;
   }
.project_logo{
    height: 48px;
    max-height: 48px;
    filter: grayscale(1.5);
    object-fit: contain;
    transition: filter .3s ease;
}
.fb{
    background-color: #fff;
    border-radius: 8px;
    padding: 4px;
}
.project_images-container h4{
    font-size: 1.5em;
    font-weight: bold;
}
.project_card:hover{
     background:#000000d5;
     opacity: 1;
     
     border: 1px solid #000;
     .project_text{
        color: #ffffff;
     }
     .project_logo{
       
        filter: contrast(2);
     }
     .fb{
        filter:contrast(1)
     }
}
.action{
    background-color:  #4f46e5;
    padding: 6px 12px;
    position: absolute;
    border-radius: 8px;
   
   
    right: 0;
    transition: background-color .2s ease;
}
.action:hover{
    background-color:  #4e46e564;
    cursor: pointer;
}
#oculto{
    display: none;
    font-size: 1.2em;
    padding: 5px;
    background-color: #090909;
    border-color: #00FFFF;
    color: #fff;
    margin: auto;
    border-radius: 6px;
}
#oculto:hover{
    cursor: pointer;
    background-color: #00FFFF;
    border-color: #090909;
    color: #090909;
}

.certificados_section{
    width: 100vw;
    margin-top: 5rem;
    min-height: 50vh;
    min-height: 50dvh;
    max-height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.4rem;
    gap: 3rem;
    font-family: "Goldman", sans-serif;
}
.certificados_section h3{
    color: #fff;
    font-size: 2.3em;
    animation: opac .5s ease both;
    animation-timeline: scroll(root);
    animation-range: 30px 100px;
    opacity: 0;
    
}
.certificados{
    display: grid;
    place-content: center;
    margin: auto;
    
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    
}
.certificado{
    width: 100%;
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.img-certificado{
    width: 100%;
    max-width: 356px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
/*Parte del article que muestra cursos */
.article{
    width: 100vw;
    height: 80vh;
    max-height: 80vh;
    transition: all 1s ease-in out;
    opacity: 0;
    min-height: 60vh;
    max-height: 60vh;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background:transparent;
    
}
.carousel-flex{
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.carousel{
    height: 90%;
    max-height: 90%;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;    
    background: linear-gradient(to bottom,transparent,#00276676,  #6a0dad65, transparent);
    
    transition: all 1s ease-in-out;
}
.carousel-content{
    height: 60vh;
    min-height: 60vh;
    width: 35vw;
    overflow-x: hidden;
    margin: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: transparent;
    justify-content: space-around;
    align-items: center;    
    background:transparent;
    transition: all 1s ease-in-out;
}
.carousel-buttons{
 display: flex;
 gap: 3rem;   
}
small{
    font-family: "Goldman", sans-serif;
}
.carousel-title, .technologies-title{
    font-weight: 200;
    font-size: 1.5em;
    top: 24px;
    color: #fff;
    text-align: center;
    font-family: "Goldman", sans-serif;
}
.carousel-subtitle{
    display: none;
}

.carousel-container{
    width: 35vw;
    min-height: 60%;
    height: 60%;
    max-height: 60%;
    
    border-radius: 10px;
    
    margin: auto;
    background-size: cover;
   
    background-attachment: fixed;
    
    position: relative;
}
.container-grids{
 
    border-radius: 12px;
    width: 100%;
    min-height: 100%;
    
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.carousel-inner {
    display: flex;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    width: 100%;
    transition: all 1s ease;
}
.carousel-grid{
    min-width: 100%;
    height: 100%;
    min-height: 100%;
 
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: auto;
    
}
.carousel-grid a{
    display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px 24px;
  width: 35%;
  background: linear-gradient(135deg, #ff006e, #8338ec);
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
  border-radius: 25px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 0, 110, 0.4);
  position: relative;
  overflow: hidden;
}

.carousel-grid a:hover {

 
  background: linear-gradient(135deg, #8338ec, #ff006e);
}

.carousel-grid a:active {
  transform: translateY(-1px);
}
.carousel-grid a::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s ease;
}

.carousel-grid a:hover::before {
  width: 300px;
  height: 300px;
  max-height: 300px;
}


.courses-info{
    font-family: "Goldman", sans-serif;
    color: #fff;
    font-size: 0.9em;
    padding: 4px 6px;
    text-align: center
}
.grid-item{
    
    background: transparent;
    border-radius: 5px;
    min-width: 100%;
    min-height: 100%;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    
    
}

        @keyframes shine {
            0% { transform: translateX(-100%) translateY(-100%); }
            100% { transform: translateX(100%) translateY(100%); }
        }
.grid-item p{
    color: #fff;
}
.img-grid{
    aspect-ratio: 4 / 3;
    height: auto;
    width: 100%;
    object-fit: contain;
    
    position: absolute;
}




.showCarrusel{
   animation: showArticle 1s ease-in-out both;
    
}
#btn-prev{
    width: 50px;
    height: 50px;
    max-height: 50px;
    border-radius: 5px;
    font-size: 2em;
    background-image: url('images/flecha-izquierda.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none; 
    opacity: 0.1; 
}
#btn-next{
    width: 50px;
    height: 50px;
    max-height: 50px;
    border-radius: 5px;
    font-size: 2em;
    background-image: url('images/flecha-correcta.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;  
}
#btn-next,#btn-prev:hover{
    cursor: pointer;
}


/* Formulario*/
label{
    color: #fff;
    font-family: 'Goldman', sans-serif;
}
.form-container{
    width: 100vw;
    min-height: 70vh;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.form-container h3{
    color: #fff;
    font-family: 'Goldman', sans-serif;
    font-size: 1.8em;
    text-align: center;
    margin-bottom: 5rem;
}
.form{
    width: 36vw;
    min-height: 100%;
    max-height: 100%;
    
    display: flex;
    border: 1px solid #cccccc55;
    border-radius: 12px;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    padding: 8px 10px;
    transition: background-color .2s ease-in;
}
.form:hover{
    background-color: #1717178a;
    border-color: #fff;
    
}
.form:hover input,textarea{
    border-color: #fff;
}
input,textarea{
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: 60%;
    min-height: 60%;
    max-height: 60%;
    padding: 6px;
    border-radius: 4px;
    margin-top: 5px;
    border: 1px solid #cccccc55;
    background-color: transparent;

    border-left: none;
    border-top: none;
    color: #ffffff;
    font-family: 'Goldman', sans-serif;
}
textarea{
    min-height: 100px;
    max-height: 100px;
    height: 100px;
    
   padding: 12px;
}
.container-input{
    width: 100%;
    padding: 8px;
}
.form-button{
    z-index: 20;
    min-width: 35%;
    width: 35%;
    padding: 12px 16px;
    margin: auto;
    margin-bottom: 20px;
    border-radius: 8px;
    
    background:  linear-gradient(135deg, #ff006e, #8338ec);
    color: #fff;
    font-family: "Zen Dots", sans-serif;
    transition: all 0.2s ease-in;
    font-size: 1.1em;
  
      
    
}

.form-button:hover{
    cursor: pointer;
    background-color: transparent   ;
    color: #4f46e5;
    outline: 2px solid #4f46e5;
}
.form-button:active{
    animation: button .3s ease-in-out both;
}
svg {
    
    width: 100%;
    height: 100%;
  }
/* Footer */
footer{
    border: 1px solid #FF00FF;
    border-bottom: none;
    border-left: none;
    border-right: none;
    min-height: 10vh;
    
    width: 100%;
    
    display: grid;
    place-content: center;
}
footer p{
    text-align: center;
    color: aliceblue;
}

@media(max-width:1800px){
    .info-personal{
        height: 80%;
        max-height: 80%;
    }
    #text-info{
        font-size: 1em;
    }
    
    .boton-info{
        font-size: 0.6em;
        
    }
    
}


@media(max-width:1080px){
     
    h1{
        font-size: 2.8em;
    }
    .main__section{
        gap:20px;
        height: 100%;
        max-height: 100%;
    }
    #container-circle{
        display: none;
    }
    .info-personal{
        width: 100%;
        
        padding: 8px;
    }
    .header{
        animation: hide 1s ease both;
        animation-timeline: scroll(root);
        animation-range: 100px 200px;
    }
    .carousel{
        width: 100%;
        min-height: 100vh;
        max-height: 100vh;
        padding: 10px;
        background: linear-gradient(to bottom,transparent,#00276676,  #6a0dad65, transparent);
    }
    .project_card{
        background: #000000d5;
        backdrop-filter: none;
        filter: grayscale(0);
    }
    .project_logo{
        filter: grayscale(0);
    }
    .action{
        filter: grayscale(0);
    }
  
   .scroll-element{
    
    width: 60%;
    
}
.logos-text{
    grid-template-columns: 1fr 1fr;
}
.project_card{
    width: 95vw;
    filter: grayscale(0);
    opacity: 1;
}
    .carousel-subtitle{
        display: flex;
        height: 100px;
        max-height: 100px;
        flex-direction: column;
        justify-content: space-around;
       
        text-align: center;
        width: 100%;
    }
    .carousel-subtitle small{
        color: #fff;
        text-align: center;
    }
    .carousel-flex{
        height: 90%;
        max-height: 90%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .carousel-container{
        min-width: 80vw;
    }
    .carousel-content{
        height: 100%;
        max-height: 100%;
        width: 85vw;
        gap: 4rem;
        flex-direction: column;
        
    }
    .info-personal{
        height: 50%;
        max-height: 50%;
    }
    #texto-info{
        font-size: 1.1em;
    }
    .boton-info{
        font-size: 0.8em;
        width: 20vw;
    }
    .form{
        width: 75vw;
    }
    
}
@media(max-width:860px){
    body{
        min-height: 750vh
    }
}
@media(max-width:480px){
     body{
        min-height: 700vh
    }
    #scroll-progress{
        max-width: 97vw;
    }
    h1{
        font-size: 2.4em;
    }
    
    .carousel-container{
      
        background-repeat: repeat;
        background-clip: border-box;
        background-size: contain;
    }
    .carousel-title{
        font-size: 1.3em;
    }
    .aside-info-personal{
        width:90vw;
        margin: auto;
       
        min-height: 80vh;
        max-height: 80vh;
        opacity: 0;
        display: flex;
        border: 1px solid transparent;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
    }
    .logos_container{
        display: grid;
        place-content: center;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap:26px;
    }
    .secondary-container{
        width: 90vw;
        max-width: 100%;
    }
    .project_card{
        width: 95vw;
        border-top: 5px solid #ffffff;
    }
   .project_container-logo{
    flex-direction: column;
   }
   .logos-text{
    width: 80vw;
   }
   
   .action{
    position: static;
    align-self: flex-end;
   }
    .projects_section{
        margin-top: 0;
    }
    .info-personal{
        width: 90%;
        height: 80%;
        max-height: 80%;
    }
    #texto-info{
        font-size: 0.9em;
    }
   
    .form{
        width: 90%;
    }
    .form-container h3{
        font-size: 1.5em;
        margin-bottom: 2rem;
    }
}
@media(max-width:380px){
    #scroll-progress{
        max-width: 97vw;
    }
    h1{
        font-size: 2em;
    }
    .aside2{
        min-height: 60vh;
        max-height: 60vh;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        font-size: 0.8em;
    }
    .imageContainer{
        margin-top: 0;
    }
   
    .carousel-container{
       
        background-repeat: repeat;
        background-size: contain;
        background-clip: border-box;
    }
    .aside-info-personal{
        width:90vw;
        margin: auto;
       
        min-height: 80vh;
        max-height: 80vh;
        opacity: 0;
        display: flex;
        border: 1px solid transparent;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
    }
    .logos-text{
        width: 100vw;
        gap: .2rem;
    }
    .logos{
        width: 90%;
    }
    .logos-languages{
        width: 100%;
    }
  
    .info-personal{
        width: 90%;
        height: 80%;
        max-height: 80%;
    }
    #adentr{
        font-size: 1.2em;
        bottom: 7px;
    }
    #texto-sub{
        font-size: 1.1em;
    }
    .form-button{
        padding:6px 10px;
        width: auto;
        
    }
}

/* creear minijuego antes de empezar que se base en el efecto hover, primero pasar unas murallas y luego atrapar un boton*/
@keyframes move {
    from{
        transform: translateX(-600px);
    }
    to{
        transform: translateX(0px);
    }
}

@keyframes moveRight {
    from{
        -webkit-transform: translateX(-120%);
        transform: translateX(-120%);
        opacity: 0;
    }
    to{
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
        opacity: 1;
    }
}

@keyframes moveLeft {
    from{
        -webkit-transform: translateX(140%);
        transform: translateX(140%);
        display: none;
        opacity: 0;
    }
    to{
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
        display: block;
        opacity: 1;
        background-color: transparent;
    }
}

@keyframes moveBottom {
    from{
        -webkit-transform: translateY(-800px);
        transform: translateY(-800px);
        opacity: 0;
    }
    to{
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
        opacity: 1;
    }
}

@keyframes moveX{
    from{
        transform: translateX(-150%);
        -webkit-transform: translateX(-150%);
    }
    to{
        transform: translateX(200%);
        -webkit-transform: translateX(200%);
    }
}

@keyframes moveTop{
    from{
        transform: translateY(900px);
        -webkit-transform: translateY(900px);
        opacity: 0;
    }
    to{
        transform:translateY(100px);
        -webkit-transform: translateY(100px);
        opacity: 1;
    }
}

@keyframes bordesPresent{
    from{
        opacity: 0;
        border: none;
        
    }
    to{
        opacity: 1;
        border: 2.5px solid #fff;
        
    }
}

@keyframes writer{
    from{
        opacity: 0;
        display: none;
    }
    to{
        opacity: 1;
        display: block;
    }
}


@keyframes button{
    from{
        transform: translateY(1px);
    }
    to{
        transform: translateY(0px);
    }
}



@keyframes showArticle{
    from{
        
        opacity: 0;
        
    }
    to{
        
        opacity: 1;
        
    }
}

@keyframes opac {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
@keyframes hide {
    from{
        display: block;
    }
    to{
        display: none;
    }
}
@keyframes cards{
    from{
        transform: rotate3d(1,1,1,0deg);
        opacity: 1;
    }
    to{
        transform: rotate3d(1,1,1,360deg);
        transform-style: preserve-3d;
        opacity: 0;
    }
}
@keyframes flipReset {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg)
    }
}

@keyframes color{
    from{
        background:transparent;
    }
    to{
        background: #636e9e42;
        filter: contrast(2);
    }
}

@keyframes animateCard{
    from{
        
        background: rgba(0, 0, 0, 0.815);
        filter: contrast(1);  
    }
    to{
        
        background: transparent;
        filter: contrast(1);  
    }
}
/* diseñar una animacion que haga que caigan los iconos de los lenguajes cuando voy a pasar del ultimo texto*/