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

/* Aplica la fuente a todas las etiquetas h */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Wire One', sans-serif;
}

/* Estilo responsivo para h1 */
h1 {
  font-size: 7em; /* Tamaño grande */
}

@media (max-width: 768px) {
  h1 {
    font-size: 3.5em; /* Tamaño ajustado para dispositivos móviles */
  }
}

/* Estilo responsivo para h2 */
h2 {
  font-size: 5em;
}

@media (max-width: 768px) {
  h2 {
    font-size: 2.5em;
  }
}

/* Estilo responsivo para h3 */
h3 {
  font-size: 3.5em;
}

@media (max-width: 768px) {
  h3 {
    font-size: 1.75em;
  }
}

html, body {
  height: 100%; /* Asegura que el body ocupe toda la altura de la página */
  margin: 0; /* Elimina los márgenes predeterminados */
}

body {
    /*background-image: url('sydney-andrea-echeverry-bg.jpg');*/
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://andreaecheverry.com/img/sydney-andrea-echeverry-bg.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
	margin: 0; /* Elimina cualquier margen inesperado */
}

.cover-container {
  max-width: 42em;
}

/* Clase personalizada para enlaces */
.custom-nav-link {
  color: #6c757d; /* Texto gris por defecto */  
  text-decoration: none; /* Elimina el subrayado predeterminado */
  transition: color 0.3s, text-decoration 0.3s; /* Transición suave para los cambios */
}

/* Cuando el ratón pasa por encima del enlace */
.custom-nav-link:hover {
  color: white; /* Cambia a blanco */
  text-decoration: underline; /* Subraya el texto */
}

/* Estilo para el enlace activo */
.custom-nav-link.active {
  color: white; /* Cambia el color de texto activo */
}

/***********************************************************/
/*                   Botones Tatiana                       */
/***********************************************************/
.icon-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

.icon-img {
    max-width: 140px; /* Ajusta el tamaño máximo según tus necesidades */
    height: auto;
    margin: 0;
}

@media (max-width: 600px) {
    .icon-img {
        max-width: 80px; /* Ajusta el tamaño máximo para dispositivos móviles */
    }
}

/* --- Inicio estilos botón que lleva hacia arriba --- */
#myBtn {
  width: 50px; /* Tamaño del botón */
  height: 50px; /* Tamaño del botón */
  background-color: rgba(0, 0, 0, 0.7); /* Fondo negro semitransparente */
  color: white; /* Flecha blanca */
  border-radius: 50%; /* Hace el botón completamente redondo */
  border: 1px solid white; /* Borde blanco muy fino */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px; /* Tamaño de la flecha */
  transition: background-color 0.3s ease;
}

#myBtn:hover {
  background-color: rgba(0, 0, 0, 0.9); /* Se oscurece un poco al pasar el ratón */
}

#myBtn i {
  font-size: 24px; /* Tamaño de la flecha, ajustado al tamaño del botón */
  margin: 0; /* Elimina márgenes extra */
}
/* --- Fin estilos botón que lleva hacia arriba --- */