/* Establece el tamaño de la página al 100% del ancho y alto de la ventana */
body {
   width: 100%;
   height: 100vh; /* 100% de la altura de la ventana */
   overflow-x: hidden; /* Oculta el desplazamiento horizontal */
   background-color: firebrick;
}

/* caracteristicas de cabecera */
.cabecera { 
   width: 100%;
   height: 5%;
   background-color: rgb(73, 10, 10);
   
/* para fijar la cabecera */
   position: fixed;
   top: 0;
}

/* caracteristicas de pie de pagina */
.pie_pagina {
   width: 100%;
   height: 3%;
   background-color:  rgb(73, 10, 10);
   
/* para fijar el pie de pagina */
   position: fixed;
   bottom: 0;
}

/* seccion principal */
.principal {
   width: 100%;
   margin: auto;
   min-height: 87%;
   background-color: darkred;

/* organizar contenido */

   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
}

/* seccion presentacion*/

.titulo_principal{
   font-family: Georgia, 'Times New Roman', Times, serif;
   font-size: 6vmin;
   color: darkgoldenrod;
   letter-spacing: 0.25em;
   background-color: transparent;
   text-align: center;
   text-shadow: 2px 2px 2px silver;
   padding-top: 1%;
}

.presentacion{
   width: 100vw;
   height: 100vh;
   margin: auto;
   padding-top: 0%;

/*organizar contenido*/

   display: flex;
   flex-direction: row;
   justify-content: space-around;
   align-items: center;

/*propiedades del texto*/

   background-color: rgb(173,40, 40);
   font-size:100% ;
   color: white;
   text-align: center;

}

/*seccion conociendome*/

.titulo_secundario{
   font-family: Georgia, 'Times New Roman', Times, serif;
   font-size: 6vmin;
   color: darkgoldenrod;
   letter-spacing: 0.25em;
   background-color: transparent;
   text-align: center;
   text-shadow: 2px 2px 2px silver;
   padding-top: 1%;
   text-decoration: underline;
}

.conociendome{
   font-family: Arial, Helvetica, sans-serif;
   font-size: 2.5vmin;
   line-height: 4.5vmin;
   background-size: cover;
   
}

/* preguntas izq*/

.izq{ 
   background-color: rgba(238, 213, 180, 0.5);
   margin-left: 5%;
   padding-left: 5%;
   margin-right: 5%;
   text-align: left;
   color: brown;
   border-left: 1vmax solid brown;
}

.illia{
   width: 100px;
   height: 100px;
   margin: auto;
   padding-top: 5%;
   text-decoration: underline;

/*organizar contenido*/

   display: flex;
   flex-direction: row;
   justify-content: space-around;
   align-items: top center;

/*propiedades del texto*/

   font-family: Georgia, 'Times New Roman', Times, serif;
   font-size: 6vmin;
   color: darkgoldenrod;
   letter-spacing: 0.25em;
   background-color: transparent;
   text-align: center;
   text-shadow: 2px 2px 2px silver;
   padding-top: 1%;
}

/*propiedades de las imagenes*/

.foto1{
   width: 20%;
   height: auto;
   position: relative; 
   top: 430px;
   left: 2%;
 } 

 .foto2{ 
   width: 25%;
   height: auto;
   position: relative; 
   top: 130px;
   left: 24%;
}

.foto3{ 
   width: 20%;
   height: auto;
   position: relative; 
   top: -430px;
   left: 77%;
} 

.foto4{ 
   width: 25%;
   height: auto;
   position: relative; 
   top: -730px;
   left: 50%;
} 

.futuro{
   width: 100vw;
   height: 100vh;
   margin: auto;
   padding-top: 5%;
   text-decoration: underline;

   
/*organizar contenido*/

   display: flex;
   flex-direction: row;
   justify-content: space-around;
   align-items: top center;
 
/*propiedades del texto*/
 
   font-family: Georgia, 'Times New Roman', Times, serif;
   font-size: 6vmin;
   color: darkgoldenrod;
   letter-spacing: 0.25em;
   background-color: transparent;
   text-align: center;
   text-shadow: 2px 2px 2px silver;
   padding-top: 1%;
}

/*foto y texto de futuro*/
.texto {
   font-size: 3vmin;
   display: flex;
   flex-direction: column;
   align-items: center; /* Centra el contenido horizontalmente */
   text-align: center; /* Centra el texto horizontalmente */
   color: white;
   padding: 10px; /* Ajusta el relleno según tus necesidades */
   max-width: 100%; /* Ajusta el ancho máximo según tus necesidades */
   margin-top: -950px; 
}

/* Imagen */
.foto5 {
   width: 55%;
   height: auto;
   display: block;
}

.contactos{
   width: 100px;
   height: 100px;
   margin: auto;
   text-decoration: underline;
   
/*organizar contenido*/

   display: flex;
   flex-direction: row;
   justify-content: space-around;
   align-items: top center;
 
/*propiedades del texto*/
 
   font-family: Georgia, 'Times New Roman', Times, serif;
   font-size: 6vmin;
   color: darkgoldenrod;
   letter-spacing: 0.25em;
   background-color: transparent;
   text-align: center;
   text-shadow: 2px 2px 2px silver;
   padding-top: 1%;
}

/* Estilo para el logotipo de Instagram */
.logo1 {
   width: 220px;
   height: auto;
   margin-left: 20%;
   margin-top: 100px;
 }
 
 /* Estilo para el logotipo de Facebook */
 .logo2 {
   width: 180px;
   height: auto;
   margin-left: 40%;
   margin-top: -600px;
 }
 
 /* Estilo para el logotipo de Gmail */
 .logo3 {
   width: 180px;
   height: auto;
   margin-left: 60%;
   margin-top: -650px;
 }

 /* Estilo para el logotipo de Twitter */
 .logo4 {
   width: 280px;
   height: auto;
   margin-left: 80%;
   margin-top: -1100px;
 }
 
/* diseño botones*/

.nav-button {
   background-color: transparent; /* Fondo transparente */
   color: #070606; /* color de texto */
   padding: 10px 20px; /* Espaciado interior del botón */
   font-size: 2rem; /* Tamaño del texto del botón */
   width: auto; /* Ancho automático para ajustarse al contenido */
   height: auto; /* Altura automática para ajustarse al contenido */
   margin: 65px; /* Margen entre los botones */
   cursor: pointer; /* Cambia el cursor al pasar por encima */
   outline: none; /* Elimina el borde de enfoque en el clic */
}

/* Establece el estilo para cuando el cursor está sobre el botón */
.nav-button:hover {
   background-color: #fff; /* Fondo blanco al pasar el cursor */
   color: #333; /* Texto oscuro al pasar el cursor */
   transform: translateY(-3px); /* Efecto de elevación al pasar el cursor */
}