@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400&display=swap');
:root{ --color-primary: #000000; --color-secondary: #f6f6f6; --color-tertiary: #22D4FD; --color-fourth: #272727; --font-montserrat: 'Montserrat', sans-serif; --font-krona: 'Krona One', sans-serif; }
body { background-color: var(--color-primary); color: var(--color-secondary); font-family: Arial, sans-serif; /* Fuente predeterminada */ height: 100vh; box-sizing: border-box; }
.header { text-align: center; /* Centra el nav dentro del header */ width: 100%; }
.menu{ display: flex; justify-content: center; }
.header nav ul { list-style: none; padding: 0; display: flex; justify-content: center; }
.header nav ul li { margin: 0 10px; }
.menu_link{ font-family: var(--font-montserrat); font-weight: 600; color: var(--color-tertiary); padding: 10px 20px; text-decoration: none; border-radius: 10px; transition: background-color 0.3s ease; width: 100px; /* Ancho fijo para todos los enlaces / text-align: center; / Centra el texto dentro de los enlaces */ }
.menu_link:hover { background-color: var(--color-fourth); }
.title { font-size: 36px; font-family: var(--font-krona); }
.title-strong { color: var(--color-tertiary); }
.description { font-size: 24px; font-family: var(--font-montserrat); }
.link { display: flex; color: var(--color-secondary); padding: 10px 20px; text-decoration: none; border-radius: 10px; border: 2px solid var(--color-tertiary); transition: background-color 0.3s ease; width: 100px; /* Ancho fijo para todos los enlaces */ align-items:center ; gap: 10px;
}
.link img { width: 24px; /* Ajusta el tamaño del icono / height: 24px; / Ajusta el tamaño del icono */
}
.link:hover{ background-color: var(--color-fourth); }
.presentation_home { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 80vh; width: 100%; }
.presentation_about { display: flex; flex-direction: row; align-items: center; justify-content: center; text-align: center; min-height: 80vh; width: 100%; }
.content { display: flex; flex-direction: column; /* Alinea las secciones en columna / max-width: 60%; / Ajuste el ancho del contenido */ width: 100%; }
.home { display: flex; align-items: center; gap: 50px; max-width: 1000px; /* Ancho máximo del div del main / width: 100%; / Asegura que el div tome todo el ancho posible hasta el máximo / margin: 0 auto; / Centra el div horizontalmente */ }
.home div { flex: 1; /* Permite que el div ocupe el mismo espacio que la imagen */ }
.photo { max-width: 300px; width: 100%; /* Ajuste para que la imagen se adapte al espacio disponible / border-radius: 10px; flex: 1; / Permite que la imagen ocupe el mismo espacio que el div */ }
.links { display: flex; justify-content: space-between; flex-direction: column; align-items: center; gap: 16px; }
.links_subtitle{ font-family: var(--font-krona); font-size: 24px; font-weight: 400; }
.footer{ background-color: var(--color-tertiary); color: var(--color-primary); text-align: center; font-family: var(--font-montserrat); font-size: 20px; font-weight: 400; margin-top: 50px; /* Añade espacio entre el contenido y el footer */ }
.footer p { margin: 0; /* Elimina el margen de los párrafos en el footer / padding: 2px; / Ajusta el relleno para separar los párrafos */ }
