#bn-Inicio{
    button{
         background-color: rgb(255, 192, 84);
  color: rgb(0, 0, 0);
  border-radius: 10px;
  width: 70px;
  padding: 5px;
  border: none;
}
button:hover{
  background-color: rgb(17, 74, 55);
  color: antiquewhite;
}
}
.navbar {

  display: flex;

  justify-content: space-between; /* Elementos en los extremos con espacio entre ellos */

  align-items: center; /* Alinear los elementos verticalmente */

  padding: 10px 20px;

  background-color: #333;

  color: white;

}

.nav-links {

  display: flex;

  gap: 15px; /* Espacio entre los enlaces */

}

.login-button {

  background-color: #007BFF;

  color: white;

  border: none;

  padding: 10px 15px;

  cursor: pointer;

}
.cookie-footer {

  position: fixed; /* Siempre visible al final de la pantalla */

  bottom: 0; /* Pegado a la parte inferior */

  left: 0;

  right: 0;

  background-color: #222; /* Fondo oscuro para que destaque */

  color: #fff; /* Texto en blanco para buen contraste */

  padding: 1em;

  display: flex; /* Organiza el contenido de manera horizontal */

  justify-content: space-between; /* Espacia el texto y el botón */

  align-items: center;

  z-index: 1;
}

.cookie-footer button {

  background-color: #4caf50; /* Verde para el botón */

  color: white;

  border: none;

  padding: 0.5em 1em;

  cursor: pointer;

}

.cookie-footer button:hover {

  background-color: #45a049; /* Efecto al pasar el ratón sobre el botón */

}
.card-horizontal {

  display: flex;

  align-items: center; /* Alinear elementos verticalmente */

  gap: 20px; /* Espacio entre la imagen y la descripción */

  padding: 20px;

  border: 1px solid #ddd;

  border-radius: 8px;

  margin-bottom: 20px;

}

.card-image {
  width: 150px;
  height: auto;
  border-radius: 8px;
}
.card-description {
  flex: 1; /* Hacer que la descripción ocupe el espacio disponible */
}

/* Diseño adaptable */
@media (max-width: 600px) {
  .card-horizontal {

    flex-direction: column; /* Apila la imagen y la descripción en pantallas pequeñas */

    align-items: flex-start; /* Alinear a la izquierda en modo columna */
  }
}
.game-container {
  display: flex;
  flex-direction: column;
  align-items: center;

  position: relative;

  width: 700px;
  height: 400px;
  margin: 30px auto;
  border: 10px solid white;
  border-radius: 15px;
  box-shadow: 1px 1px 3px 2px #cbcbcb;
}

.btn-play {
  position: absolute;
  width: 200px;
  height: 70px;
  top: 5%;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 25px;
  cursor: pointer;
}

.bird {
  position: absolute;
  width: 50px;
  height: 50px;
  transform: rotateZ(45deg);
}
.bird-1 {
  background-color: rgb(255, 224, 51);
  left: 30%;
  top: 60%;
}
.bird-2 {
  background-color: rgb(12, 161, 254);
  right: 15%;
  top: 20%;
}

.bg-game {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
}

.equis {
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
  font-size: 1.5rem;
}

.game-title {
  margin-top: 7%;
}

.btn-config-game {
  display: flex;
  justify-content: flex-start;
  position: absolute;
  width: 100%;
  bottom: 10px;
  padding: 0 20px;
  gap: 15px;
}
.btn-world {
  margin-left: auto;
}
.btn-config-game button {
  font-size: 2rem;
  border: none;
  padding: 9px;
  border-radius: 10px;
  cursor: pointer;
}