/*seccion 1*/

.sobre_mi{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: blueviolet;
    border-style: solid;
    border-top-width: 1vh ;
    border-color: darkslategrey ;
}

.container{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-content: center;
}

.nombre{
    width: 100%;
    height: 13vh;
    color: white;

    display: flex;
    justify-content: space-around;
    font-style: oblique;
    font-size: 40px;
    font-family: "Edu TAS Beginner", cursive;
    text-decoration: underline;
    text-align: center;
}

.texto{
    width: 60%;
    padding-right: 10%;
    padding-left: 10%;
    color: white;
    text-align:justify;
    font-family: "Edu TAS Beginner", cursive;
    font-size: 150%;
    line-height: 1cm;
    width: 50%;
    align-self: center;

    font-weight: 700;
    font-style: normal;
}



.foto
{
    width: 40%;
    align-self: center;
    
}

.foto img
{
    width: 100%;

    border-width: 10px;
    border-style: solid;
    border-color:white black;
}

/*seccion 2*/
.curiosidades{
    height: fit-content;

}
.titulosec2{
    text-align: center;
    font-size: 40px;
    width: 100%;
    height: 13vh;
    color: blue;
    

    display: flex;
    justify-content: space-around;
    font-style: oblique;
    font-size: 40px;
    font-family: "Edu TAS Beginner", cursive;
    text-decoration: underline;
    text-decoration-color: orange;
    text-align: center;
}
.pregunta, .respuesta {
    max-width: 60%;
    padding: 10px;
    margin: 10px 0;
    border-left-width: 4px;
    border-left-style: solid;
    background-color: #f9f9f9;
}

.pregunta {
    font-weight: bold;
    font-size: 1.2em;
    color: #333;
    border-left-color: #f39c12;
    max-width: 100%;
    line-height: 0.4cm;
    font-size: 2vmin;
    font-family: "Edu TAS Beginner", cursive;
}

.respuesta {
    font-size: 1em;
    color: #666;
    border-left-color: #3498db;
    font-weight: bold;
    font-family: "Edu TAS Beginner", cursive;
    line-height: 1vmin;
    max-width: 100%;
}
.pregunta {
   
   
    border-left-width: 4px;
    
    
    color: #333;
    border-left-color: #f39c12;
    
    border-left-style: solid;
    background-color: white;
   
}


.curiosidades-container{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-content: center;
}

.text-container {
    flex: 1 1 70%;
    padding: 10px;
}

.slideshow-container {
    flex: 1 1 40%;
    position: relative;
    max-width: 50%;
    margin: auto;
}

.mySlides {
    display: none;
}

.mySlides img {
    width: 90%; 
    height: 60%;
    display: block;
    margin: auto;
    border: 10px solid #ccc; 
}
.slideshow-container {
        position: relative;
        max-width: 80%;
        margin: auto;
    }

    .mySlides {
        display: none;
    }

    .mySlides img {
        width: 85%;
        height: 90%;
    }

    .fade {
        animation-name: fade;
        animation-duration: 1.5s;
    }

    @keyframes fade {
        from {opacity: .4}
        to {opacity: 1}
    }

/*seccion 3*/
.titulosec3{
    text-align: center;
    font-size: 40px;
    height: 13vh;
    color: white;
   
    

    display: flex;
    justify-content: space-around;
    font-style: oblique;
    font-size: 40px;
    font-family: "Edu TAS Beginner", cursive;
    text-decoration: underline;
    text-decoration-color: orange;
    text-align: center;
}
.galeria
{
background-color: brown;


}

.galeria-contenedor{

    height: 90vh;   
    display: flex;
    background-color: brown;
    width: 100%;
  padding: 0 20px;
}

.slide {
    position: relative;
    cursor: pointer;
    height: 80vh;
    flex: 1;
    margin: 10px;
    border-radius: 20px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    transition: .5s
  }
  
  .slide > img {
    width: 100%;
    height: 100%;
  }
  
  .slide > h3 {
    position: absolute;
    color: #fff;
    bottom: 10px;
    left: 10px;
    opacity: 0;
    transition: .5s
    
  }
  
  .slide.active {
    flex: 10;
  }
  
  .slide.active > h3{
    opacity: 1
  }
  
  

/*seccion 4*/

.futuro
{
     /* height: 100vh;  */
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: greenyellow;
}

.title-futuro {
    font-family: "Edu TAS Beginner", cursive;
 font-size: 50px;
}
.subtitle-futuro { 
    font-family: "Edu TAS Beginner", cursive;
font-size: 25px;
position: relative;
/* left: 2vw; */
top: 5vh;
}
.subtitle-futuro2 { 
    font-family: "Edu TAS Beginner", cursive;
    font-size: 25px;
     position: relative;
   left: 50vw; 
    }

.image-container {
 display: flex;
 justify-content: center;

}
.foto-h {
    margin: 10px;
    height: 600px;
    width: 45%;
     display: none;
} 
.foto-v { 
    margin: 10px;
    height: 900px;
    width: 55%;
     display: none; 
}

@media (orientation: landscape) {
    .foto-h { 
       
        display: block; 
   }
}
@media (orientation: portrait) {
    .foto-v { 
       
         display: block; 
    }

    .subtitle-futuro {
       position: relative;
       top: 2vh;
    }
    

}
/*seccion footer*/
.footer{
    height: 35vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: darkslategray;
}
.estilos_footer
{justify-content: space-around;
flex-direction: row;
display: flex;
}
/*responsive*/

@media only screen and(max-width: 1050px)
{.curiosidades-container
    {
      flex-direction: column;
    }

    .boton {font-size: 10px;
        min-width: 10px;
         height: 30px;
        padding: 5px 5px;
    }  
    
}

@media only screen and (max-width: 800px) 
{
    .text-container{
        font-size: 10px;

    line-height: 0.4cm;
    }
    .respuesta{
        line-height: 0.6cm
    }
    .curiosidades-container
        {
          flex-direction: column;
        }
  .texto
  {
    font-size: 15px;
    padding-right: 0%;
    padding-left: 0%;
  }
  .nombre{font-size: 25px;}
    .container
    {
      flex-direction: column;
    }

    .boton {font-size: 10px;
        min-width: 10px;
     height: 30px;
        padding: 5px 5px;
    }  }
    @media only screen and (max-width: 450px) {
        .texto
  {
    font-size: 15px;
    padding-right: 0%;
    padding-left: 0%;
  }
    }