.head {
  margin: 2em 0;
  text-align: center;
}

.nav {
  padding: 1rem;
}
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}

.nav__links {
  display: grid;
  gap: 15px;
 justify-content: center;
}

.nav__link {
  background-color: red; /* Color de fondo */
  text-decoration: none; /* Sin subrayado */
  font-size: 1.4rem; /* Tamaño de fuente */
  color: #fff; /* Color del texto */
  padding: 12px 24px; /* Relleno */
  border: none; /* Sin borde */
  border-radius: 8px; /* Bordes redondeados */
  box-shadow: 0 6px 0 darkred, 0 6px 20px rgba(0, 0, 0, 0.3); /* Sombra para el efecto 3D */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Sombra para el texto */
  font-weight: bold;
  letter-spacing: 1.2px;
  transition: all 0.3s ease; /* Suaviza las transiciones */
  cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
}

.nav__link:hover {
  background-color: orangered; /* Cambia el color de fondo al pasar el mouse */
  box-shadow: 0 8px 0 darkred, 0 8px 20px rgba(0, 0, 0, 0.4); /* Ajusta la sombra al pasar el mouse */
}

.nav__link:active {
  box-shadow: 0 3px 0 darkred, 0 6px 10px rgba(0, 0, 0, 0.2); /* Ajusta la sombra cuando se presiona el botón */
  transform: translateY(4px); /* Mueve el botón hacia abajo */
}

.nav__link--green{
  background-color: green; /* Color de fondo verde */
  box-shadow: 0 6px 0 darkgreen, 0 6px 20px rgba(0, 0, 0, 0.3); /* Sombra para el efecto 3D */
}

.nav__link--green:hover {
  background-color: limegreen; /* Cambia el color de fondo al pasar el mouse */
  box-shadow: 0 8px 0 darkgreen, 0 8px 20px rgba(0, 0, 0, 0.4); /* Ajusta la sombra al pasar el mouse */
}

.nav__link--green:active {
  box-shadow: 0 3px 0 rgb(3, 255, 53), 0 6px 10px rgba(0, 0, 0, 0.2); /* Ajusta la sombra cuando se presiona el botón */
  transform: translateY(7px); /* Mueve el botón hacia abajo */
}