* {
  margin: 0;
  padding: 0;
  font-family: Lato, Montserrat, system-ui, -apple-system, Helvetica, sans-serif;
  }

a {
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  opacity: 0.7;
}

.logo {
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 4px;
  height: 10vh;
  width: auto;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  
  /* background: rgba(35, 35, 46, 1); */
  background-color: rgba(0, 0, 0, 1);
  height: 12vh;
}

main {
  background: url("../img/target-aim-arrows-bow.jpg") no-repeat center center;
  background-size: cover;
  /* height: 252vh; */
  height: 232vh;
}

.nav-list {
  list-style: none;
  display: flex;
}

.nav-list li {
  letter-spacing: 3px;
  margin-left: 32px;
}

.mobile-menu {
  display: none;
  cursor: pointer;
}

.mobile-menu div {
  width: 32px;
  height: 2px;
  background: rgba(255, 255, 255, 1);
  margin: 8px;
  transition: 0.3s;
}

@media (max-width: 900px) {
  a {
    /* hasta 900 px los links color blanco */
    color: rgba(255, 255, 255, 1);

  }
      body {
    overflow-x: hidden;
  }
  .nav-list {
    position: absolute;
    top: 8vh;
    right: 0;
    width: 50vw;
    height: 92vh;
    background: rgba(35, 35, 46, 1);
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    transform: translateX(100%);
    transition: transform 0.3s ease-in;
  }
  .nav-list li {
    margin-left: 0;
    opacity: 0;
  }
  .mobile-menu {
    display: block;
  }
}

@media (max-width: 750px) {
  a {
    /* hasta 700 px los links color amarillo */
  color: rgba(255, 208, 0, 1);
  }
}

@media (max-width: 600px) {
  a {
    /* hasta 600 px los links color naranja */
    color: rgba(255, 153, 0, 1);
  }
}

.nav-list.active {
  transform: translateX(0);
}

@keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.mobile-menu.active .line1 {
  transform: rotate(-45deg) translate(-8px, 8px);
}

.mobile-menu.active .line2 {
  opacity: 0;
}

.mobile-menu.active .line3 {
  transform: rotate(45deg) translate(-5px, -7px);
}

/* Pie de página: color de fondo, altura, tamaño de fuente,
color de texto alineación de texto. */
footer{
  background-color: rgba(0, 0, 0, 1);
  height: 12vh;
  text-align: center;
  color: rgba(240, 248, 255, 1);
}

/* Eliminar comportamiento en bloque entre divs del footer */
/* .footer-text{
  display: inline-block;
  padding-top: 6vh;
} */

/* Setear color rojo para los links */
p a {
  color: rgba(199, 0, 57, 0.8); /* Cambia el color del texto del enlace */
  text-decoration: none; /* Opcional: quitar la subrayado del enlace */
}

/* flex container en el footer */
.footer-container{
  display: inline-flex; /* Situa en linea las divs */
  padding-top: 3vh; /* Agrega separación del borde del pie de página al texto */
  flex-wrap: wrap; /* Permite desborde al achicarse la ventana */
  row-gap: 1vh; /* Hueco entre filas al desbordar */
  column-gap: 1vw; /* Hueco entre columnas (divs) */ 
  justify-content: center;
  /* align-content: space-around; /* no esta funcionando */
}

/* .footer-item {
  padding-left: 1vw;
} */

.footer-item a {
  color: rgba(199, 0, 57, 0.8); /* Cambia el color del texto del enlace */
  text-decoration: none; /* Opcional: quitar el subrayado del enlace */
}