body {
  background-image: url(../imgs/paisaje.jpg);
  font-family: sans-serif;
  color: rgb(0, 0, 0);
}

main {
  width: 730px;
  margin: 100px auto 50px;
  display: flex;
  align-items: center;
  position: relative; /* Asegura que el botón se posicione en relación a este contenedor */
}

.section1 {
  background-color: rgb(255, 255, 255, 0.2);
  padding: 0 10px 10px 10px;
  border-radius: 8px;
}

h1 {
  text-align: center;
  font-size: 20px;
}

button {
  height: 100px;
  width: 100px;
  font-size: 40px;
  color: black;
  font-weight: bold;
}

button:hover {
  cursor: pointer;
}

.section2 {
  padding: 0 20px;
  background-color: rgba(255, 255, 255, 0.2);
  width: 250px;
  height: 400px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.estadisticas {
  border: 3px solid rgb(255, 255, 255);
  height: 105px;
  padding: 8px 20px;
  box-sizing: border-box;
}

footer {
  text-align: center;
}

a {
  text-decoration: none;
  color: rgb(8, 164, 0);
}

img {
  margin-left: -8.9px;
}

#retornar {
  display: none; /* Ocultarlo por defecto */
  margin: 20px auto;
  padding: 15px 10px; /* Reducir el padding para hacerlo más alto y menos ancho */
  font-size: 16px; /* Reducir el tamaño de la fuente */
  font-weight: bold;
  color: white;
  background-color: #007bff; /* Color azul */
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
  width: 300px; /* Ajustar el ancho del botón */
  height: 50px;
  text-align: center; /* Centra el texto */
  border-radius: 6px; /* Bordes redondeados */
}

#retornar:hover {
  background-color: #0056b3; /* Color azul más oscuro al pasar el ratón */
  transform: translateY(-2px);
}

#retornar:active {
  transform: translateY(0);
}
/* Estilos del botón de compartir */
#compartir-btn {
  position: fixed; /* Cambiar a posición fija */
  top: 20px; /* Espaciado desde la parte superior */
  right: 20px; /* Espaciado desde la derecha */
  z-index: 1000; /* Asegura que esté por encima de otros elementos */
  display: flex; /* Usar flexbox para alinear el ícono y el texto */
  align-items: center; /* Centra verticalmente el ícono y el texto */
  padding: 0.5em; /* Ajustar padding para que el botón se vea bien */
  font-size: 1em; /* Tamaño de fuente */
  width: 7em; /* Ancho del botón */
  height: 3em; /* Altura del botón */
  color: white; /* Color del texto */
  background: #212121; /* Fondo del botón */
  background-size: cover;
  background-blend-mode: overlay;
  border-radius: 0.5em; /* Bordes redondeados */
  outline: 0.1em solid #353535; /* Contorno */
  border: 0; /* Sin borde */
  box-shadow: 0 0 1em 1em rgba(0, 0, 0, 0.1); /* Sombra */
  transition: all 0.3s ease-in-out; /* Transición */
}

#compartir-btn:hover {
  transform: scale(1.1); /* Escalar al pasar el ratón */
  box-shadow: 0 0 1em 0.45em rgba(0, 0, 0, 0.1); /* Sombra más pequeña */
  background: linear-gradient(45deg, #212121, #252525); /* Gradiente de fondo */
  background: radial-gradient(
      circle at bottom,
      rgba(50, 100, 180, 0.5) 10%,
      #212121 70%
  ); /* Fondo radial */
  outline: 0; /* Sin contorno */
}

.icon {
  fill: white; /* Color del ícono */
  width: 1em; /* Tamaño del ícono */
  aspect-ratio: 1; /* Mantener proporciones */
  margin-right: 5px; /* Espacio entre el ícono y el texto */
}

@media only screen and (max-width: 350px) {
  /* Ajustar imágenes */
  img {
      max-width: 49px; /* Ajustar ancho máximo de la imagen al ancho de la pantalla */
      height: auto; /* Ajustar alto de la imagen automáticamente */
      max-height: 49px;
      margin-top: -2px;
      margin-right: 0.3px;
  }

  /* Ajustar otros elementos según sea necesario */
  main {
      width: 100%; /* Ajustar ancho del elemento main al ancho de la pantalla */
  }

  .section1 {
      padding: 0 5px 10px 5px; /* Ajustar padding para que se vea bien en pantallas pequeñas */
  }

  button {
      height: 50px; /* Ajustar alto de los botones */
      width: 50px; /* Ajustar ancho de los botones */
      font-size: 20px; /* Ajustar tamaño de la fuente de los botones */
  }

  /* Estilos del botón de compartir en pantallas pequeñas */
  #compartir-btn {
      top: 10px; /* Ajustar la posición desde la parte superior */
      right: 10px; /* Ajustar la posición desde la derecha */
  }
}

.aa {
  color: white;
}