@import url('https://fonts.googleapis.com/css2?family=Emblema+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Emblema+One&family=Inconsolata:wght@600&display=swap');


/* Parámetros iniciales */
*{
    margin: 0%;
    padding: 0;
    box-sizing: border-box;
}

body{
    /* Color de fondo */
     background-color: #faebd7; 
}

/* Tamaños generales */
.general{
    height: 85vh;
    width: 100vw;
}

/* Parametros Botonera */
.botonera{ 
        /*Organizar contenido*/
        display: flex; 
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        /*Alto*/
        height: 10vh;
    }
      

/* Parametros Cabecera  */
.cabecera{
    /* Alto y ancho */
    background-color:rgb(233, 148, 156);
    height:10vh;
    width:100vw ;
    /* Fijar la sección y determinar su posición */
    position: fixed; 
    top:0%;
}

/* Parametros Pie de página */
.pie_pagina{
    /* Alto y ancho */
    background-color:rgb(233, 148, 156);
    height:5vh;
    width:100vw ;
    /* Fijar la sección y determinar su posición */
    position: fixed;
    bottom:0%;
}

/* Formato del contenido */
.principal{
    width: 90%; /* Ancho */
    margin: auto; /* Para centrar la ventana */
    margin-top: 10vh; /* El espacio que ocupa la cabecera */
    height: 85vh; /* Altura que se encuentra disponible */
    margin-bottom: 5vh; /* Espacio que ocupa el pie de pagina */

}
/* Formato presentacion*/
.presentacion{
    background:rgba(245, 102, 116, 0.3);
    padding-top: 10vh;
    min-height: 100vh;
    width: 90vw;
    margin-top: 10vh;
    /* Para centrar vertical y horizontalmente */
    display: flex; /* Ordena los items de adentro */
    justify-content: center;/* Centra horizontalmente */
    align-items: center;/* Centra verticalmente */
}
/*Espacio para el título*/
.titulo {
        /*Propiedades del texto*/
        color:antiquewhite;
        font-family: 'Emblema One', cursive;
        font-size: 8.5vh;
        letter-spacing: 0.2em;
        text-shadow: 1px 1px 2px #d5394a, 0 0 25px #d5394a, 0 0 5px #d5394a;
}

/* Determinar propiedades secciones  */
.conociendome{
    padding-top: 10vh;
    min-height: 100vh;
    width: 90vw;
    /* background-color: rgba(167, 166, 165, 0.5); El ultimo numero es para transparencia */
    background-color: rgb(233, 148, 156,0.6);       
}
html, body {
  margin: 0;
  scroll-behavior: smooth;
  font-family: 'Roboto', sans-serif;
  font-size: 24px;
}

#espaciopreguntas {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  align-content: space-around;
  width: 90vw;
}

.titulo_seccion{
  color:antiquewhite;
  font-size: 5vh;
  font-family: 'Emblema One', cursive;
  letter-spacing: 0.3em;
  width: 35%;
  margin: auto;
  height: 20%;
  padding-top: 2%;
  padding-bottom: 2%;
  text-shadow: 1px 1px 2px #d5394a, 0 0 25px #d5394a, 0 0 5px #d5394a;
}

.recuadro{
    width: 15vw;
    height: 20vh;
    padding: 20px;
    padding-top: 10px;
    margin: 10px;
    border: 1px solid #d5394a;
    border-radius: 7%;
    background-color: rgb(213, 57, 74,0.1);
    text-align: center;
    justify-content: center;
    font-family: 'Inconsolata', monospace;
    font-size: 18px;
    color: #d5394a;
}

#illia{
    padding-top: 10vh;
    min-height: 100vh;
    width: 90vw;
    background-color: rgb(233, 148, 156,0.7); 
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;/* Centra verticalmente */

}


/*.titulo_illia{
  color:antiquewhite;
  font-size: 5vh;
  font-family: 'Emblema One', cursive;
  -webkit-text-stroke: 0.7px  #d5394a;
  letter-spacing: 0.3em;
  width: 35%;
  margin: auto;
  height: 20%;
  padding-top: 2%;
  padding-bottom: 2%;
  text-shadow: 1px 1px 2px #d5394a, 0 0 25px #d5394a, 0 0 5px #d5394a;
}*/
/* filter. grayscale(100%) */

#img1{
  width: 6vw;
    transition: 1s;
    border: 2px solid #d5394a;
  } 
#img1:hover{
    width: 20vw;
  } 
  
#img2{
    transition: 1s;
    width: 10vw;
    border: 2px solid #d5394a;
  } 
#img2:hover{
    width: 30vw;
  } 

#img3{
    transition: 1s;
    width: 10vw;
    border: 2px solid #d5394a;
  } 
#img3:hover{
    width: 30vw;
  } 

#img4{
    transition: 1s;
    width: 8vw;
    border: 2px solid #d5394a;
  } 
#img4:hover{
    width: 20vw;
  } 

#img5{
    transition: 1s;
    width: 6vw;
    height: 10%;
    border: 2px solid #d5394a;
  } 
#img5:hover{
    width: 15vw;
  } 

#img6{
    transition: 1s;
    width: 7vw;
    height: 10%;
    border: 2px solid #d5394a;
  } 
#img6:hover{
    width: 20vw;
}

#img7{
  transition: 1s;
  width: 6vw;
  height: 10%;
  border: 2px solid #d5394a;
} 
#img7:hover{
  width: 20vw;
}

#img8{
  transition: 1s;
  width: 6vw;
  height: 10%;
  border: 2px solid #d5394a;
} 
#img8:hover{
  width: 20vw;
}

#img9{
  transition: 1s;
  width: 8.5vw;
  height: 10%;
  border: 2px solid #d5394a;
} 
#img9:hover{
  width: 20vw;
}


.futuro{
    padding-top: 10vh;
    min-height: 100vh;
    width: 90vw;
    background-color: rgb(233, 148, 156,0.8); 
    display: flex; /* Ordena los items de adentro */
    justify-content: center;/* Centra horizontalmente */
    align-items: center;/* Centra verticalmente */

}
  #imgloading{
  width: 40vw;
  }


.contactos{
    padding-top: 5vh;
    min-height: 100vh;
    width: 90vw;
    background-color: rgb(233, 148, 156,0.9); 
    
}

#titulo_contactos {
  color:antiquewhite;
  font-size: 4.5vh;
  font-family: 'Emblema One', cursive;
  letter-spacing: 0.3em;
  width: 35%;
  margin-left: 33%;
  margin-top: 5%;
  text-shadow: 1px 1px 2px #d5394a, 0 0 25px #d5394a, 0 0 5px #d5394a;
  margin-bottom: 3vh;
}
#btncontactos {
  width: 70%;
  margin-top: 9vh;
  margin-left: 15%;
}
#btncontactos:hover {
  box-shadow: 1px 1px 2px #d5394a, 0 0 30px #d5394a, 0 0 5px #d5394a;
}