/* Reset CSS */
body {

  background-color: #406f9d7f;

}

#header {
  background-image: url('https://i.postimg.cc/FRz3f2dz/Dise-o-sin-t-tulo-2-1-1.png');
  background-size: auto 100%;
  background-position: center;
  animation: backgroundScroll 25s linear infinite;
  /* Establece la animación de desplazamiento de fondo */
}

@keyframes backgroundScroll {
  0% {
    background-position: 0 0;
    /* Inicia las imágenes en la posición inicial */
  }

  100% {
    background-position: 100% 100%;
    /* Desplaza las imágenes diagonalmente */
  }
}

#goHomeButton,
#showFilmsButton,
.ordenador {
  background-color: #406f9de4;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  text-decoration: none;
}

h5 {
  height: 5%;
  width: 20%;
  font: small-caps 80%/80%;
  color: beige;
  background-color: #406f9de4;
  font-size: 250%;
  text-align: center;
  border-radius: 10%;
  margin: auto;
}

.buscador {
  display: flex;
  justify-content: center;
  align-items: center;
}

h1 {
  height: 200%;
  width: 40%;
  font: small-caps 80%/80% serif;
  color: #406f9de4;
  background-color: #efebe5bd;
  font-size: 700%;
  text-align: center;
  border-radius: 10%;
  margin: auto;
}

h3 {
  height: 10%;
  width: 70%;
  font: small-caps 100%/100% serif;
  color: beige;
  background-color: #406f9de4;
  font-size: 250%;
  border-radius: 10%;
  text-align: center;
  margin: auto;
}

h2 {
  font-size: 180%;
  margin-bottom: 8px;
  text-align: center;
  color: rgb(255, 250, 250);
}

input {
  outline: none;
  box-sizing: border-box;
  height: 20%;
  width: 20%;
  color: black;
  border-radius: 50px;
  font-size: 20px;
  border: 3px solid #406f9de4;
  transition: all .7s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif
}

.primera-interfaz {
  display: block;
}

.segunda-interfaz {
  display: none;
}

p {
  font-size: 20px;
  text-align: center;
  color: #fffefe;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif
}

#popup-container {
  position: absolute;
  top: 45%;
  right: 69%;
  height: auto;
  width: 300px;
  padding: 1%;
  background-color: #406f9dd9;
  box-shadow: 0 2px 5px rgb(255, 255, 255);
  border-radius: 15px;
  transform: translate(0, -30%);

}

#contenedor-peliculas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style-type: none;
}



#contenedor-peliculas .pelicula {
  border: 3px solid#406f9d96;
  /* Cambia "red" al color de borde deseado */
  border-radius: 5%;
  margin: 10px;
  text-align: center;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 20);
  background-color: #3b6793c9;
  width: 25%;
}

#contenedor-peliculas .pelicula .imagen-pelicula {
  width: 55%;
  /* Ajusta el ancho de la imagen según tus necesidades */
  margin: left;
  /* Centra horizontalmente la imagen */
  border-radius: 5%;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 20);
}

footer img {

  height: 50px;

}

footer .contenedor {
  display: flex;
  justify-content: center;
}

footer .redes-sociales {
  display: flex;
  align-items: center;
  background-color: #406f9d90;
  padding: 11px;
  width: 30%;
  height: 25%;
  margin: auto;
}

footer .redes-sociales a {
  display: flex;
  align-items: center;
  width: 25%;
  padding: 25 px;
  height: 60px;
  margin: 0 20px;
  justify-content: center;
  /* Centrar los iconos horizontalmente */
}

footer .redes-sociales .twitter:hover {
  background: #b7d3e4;
}

footer .redes-sociales .facebook:hover {
  background: #3b5998;
}

footer .redes-sociales .youtube:hover {
  background: #cd201f;
}

footer .redes-sociales .instagram:hover {
  background: #ee80a5;
}

 /* Media query para tablet */
 @media (min-width: 768px) {
    .iframe-header {
      width: 100%;
      height: 400px;
    }
  
    .pelicula {
      width: 47%;
    }
    
    .iframe-header {
      width: 100%;
      height: 400px;
    }
  
    .pelicula {
      width: 47%;
    }
  }
  
  /* Media query para teléfono */
  @media (max-width: 480px) {
    h1 {
      font-size: 300%;
    }
  
    h2 {
      font-size: 150%;
    }
  
    input {
      width: 80%;
    }
  
    #contenedor-peliculas .pelicula {
      width: 90%;
    }
  }