@import url("https://fonts.googleapis.com/css2?family=Catamaran:wght@700&family=Hind+Vadodara&family=Wendy+One&display=swap");

* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}
header {
  background-color: rgb(43, 156, 226);
  width: 100%;
  height: 120px;
  display: flex; /*como se va a mostrar*/
  align-items: center; /*centrado de forma vertical*/
  gap: 15%; /*espacio entre el logo y el texto*/
}
#logo {
  width: auto;
  height: 120px;
}
h1 {
  font-family: "Wendy One", sans-serif;
  color: white;
  font-size: 3em;
  letter-spacing: 0.2em; /*espacio entre las letras*/
}
h2 {
  font-family: "Catamaran", sans-serif;
  text-align: center;
  font-size: 1.7em;
  color: rgb(18, 85, 126);
}
h3 {
  font-family: "Hind Vadodara", sans-serif;
  color: rgb(18, 85, 126);
  font-size: 1em;
  line-height : 1.8em;
}
h4 {
  font-family: "Hind Vadodara", sans-serif;
  text-align: center;
  font-size: .9em;
  letter-spacing: 0.2em;
}
h5{
  font-family: "Hind Vadodara", sans-serif;
  margin: 10px;
  text-align: center;
  font-size: 2em;
  letter-spacing: 0.2em;
  width: 240px; /* CHECAR EL ANCHO DE MORE INFO  */
}
#textoStudioGhibli {
  text-align: justify;
  margin: 40px;
  line-height : 1.8em;
}
section {
  margin: 40px;
  text-align: center;
}

.selectores{
  font-family: "Hind Vadodara", sans-serif;
  font-size: 1.4em;
  color: rgb(18, 85, 126);
  width: 80%;
  margin: 10px;
  padding: 5px 17%;
  background: rgb(27, 129, 193,0.7);
  }
.filtroZA{
  font-family: "Hind Vadodara", sans-serif;
  font-size: 1.4em;
  color: rgb(18, 85, 126);
  width: 80%;
  margin: 10px;
  padding: 5px 17%;
  background: rgb(27, 129, 193,0.7);
 }
/* BOTON */
.home {
  align-items: center;
  appearance: button;
  background-color: rgb(27, 129, 193,0.7);
  border-radius: 8px;
  border-style: none;
  box-shadow: rgba(255, 255, 255, 0.26) 0 1px 2px inset;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  font-family: "Hind Vadodara", sans-serif;
  font-size: 1.7rem;
  line-height: 1.15;
  margin: 0;
  padding: 10px 21px;
  text-align: center;
  text-transform: none;
  transition: color .13s ease-in-out,background .13s ease-in-out,opacity .13s ease-in-out,box-shadow .13s ease-in-out;
  user-select: none;
  touch-action: manipulation;
}
.home:active {
  background-color: #006AE8;
}
.home:hover {
  background-color: #1C84FF;
}
/*Carrusel*/
#contenedorItemCarrusel {
  height: 400px;
  margin: 40px;
  text-align: center;
  overflow: hidden;
}
.itemCarrusel {
  position: relative;
  height: 100%;
}
.tarjetaCarrusel {
  height: 100%;
  width: 100%;
  background-size: 100% 100%;
}
.flechasCarrusel {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5%;
  height: 100%;
}
.flechasCarrusel > i {
  text-decoration: none;
  color: rgb(216, 211, 211);
  font-size: 2rem;
  text-shadow: 3px 3px 1px gray;
}
#allFilms {
  display: flex;
  flex-wrap: wrap;
  background-color: rgba(91, 143, 176, 0.2);
  border-radius: 15px;
  }
.peli {
  flex: 1 0 40%;  text-align: center;
  margin: 30px;
  padding: 10px;
  color: rgb(18, 85, 126);
 
}
.peli > img{
  border-radius: 15px;
  filter: drop-shadow(14px 14px 4px rgba(27, 129, 193, 0.5));
  margin-bottom: 10px;
}

.seccionBuscador{
  gap: 8%;
  display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    align-content: space-around;
}
.inputBuscador{
  width: 65%;
  height: 50px;
  padding: 5px;
  border-radius: 5px;
  border: 1.5px solid rgb(43, 156, 226);
  font-size: 1.4rem;
}

#contenedorGeneralPeli{
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  width: 90vw;
  }
.selectPeli{
  width: 100%;
  background-color: rgba(91, 143, 176, 0.2);
  border-radius: 15px;
  padding: 10px;
}
.sinopsisPoster{
  display: inline;
  float: left;
  width: 20%;
}
.sinopsisTitulo{
  display: inline;
  float: right;
  width: 55%;
  line-height : 1.8rem;
  text-align: justify;
  }
.contenedorExtra{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}
.selectPersonajes {
 width: 100%;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-evenly;
 align-items: center;
 align-content: flex-start;
 margin: 15px;
 background-color: rgba(91, 143, 176, 0.2);
 border-radius: 15px;
}
.selectPersonajes img {
  width: 120px;
  margin-bottom: 10px;
  border: solid #8fcbf0;
  filter: drop-shadow(14px 14px 4px rgba(27, 129, 193, 0.5));
  border-radius: 15px;
}
.selectLocaciones {
width: 95%;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-evenly;
 align-items: center;
 align-content: flex-start;
 background-color: rgba(91, 143, 176, 0.2);
 border-radius: 15px;
 }
 .selectLocaciones img {
  width: 120px;
  margin-bottom: 10px;
  border: solid #8fcbf0;
  border-radius: 15px;
  filter: drop-shadow(14px 14px 4px rgba(27, 129, 193, 0.5));
}
.selectVehiculos{
  width: 95%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  align-content: flex-start;
  padding: 0 80 0 0;
  background-color: rgba(91, 143, 176, 0.2);
  border-radius: 15px;
}
.selectVehiculos img {
  width: 120px;
  text-align: center;
  margin-bottom: 10px;
  border: solid #8fcbf0;
  border-radius: 15px;
  filter: drop-shadow(14px 14px 4px rgba(27, 129, 193, 0.5));
}
.subtitulos{
  width: 100%;
}
.click{
  background-color: rgb(27, 129, 193,0.5);
  border-radius: 5px;
  text-align: center;
}
.contenedorColumna{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: center;
  margin: 15px;
  border-radius: 15px;
}

.chart{
  width: 70%;
}

.contenedorGrafica{
  background-color: rgba(91, 143, 176, 0.2);
  border-radius: 15px;
  padding: 10px;
  align-items: center;
  text-align: center;

}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 50px;
  width: 100%;
  background-color: rgb(43, 156, 226);
  color: white;
  text-align: center;
  align-items: center;
  padding: 1%;
}
i {
  text-decoration: none;
  color: rgb(255, 255, 255);
}
/* VERSION PARA ESCRITORIO */
    @media only screen and (min-width: 768px) {
    
      h5{
        margin: 10px;
        text-align: center;
        font-size: 1rem;
        letter-spacing: 0.2rem;
        width: 160px;
      }
      .selectores{
        font-size: 1rem;
        width: 20%;
        margin: 5px;
        padding: 5px;
      }
      .filtroZA{
        font-size: 1rem;
        width: 20%;
        margin: 5px;
        padding: 5px;
      }
      .home {
        font-size: 100%;
        }
    
        .peli {
          flex: 1 0 20%;  text-align: center;
        }
        .seccionBuscador{
          gap: 10%;
                 
        }
        
        .inputBuscador{
          width: 30%;
          height: 32px;
        }
        .contenedorExtra{
          width: 100%;
    
        }
        .selectPersonajes {
          width: 65%;
         
         }
         .selectPersonajes img {
          width: 8rem;
         margin-bottom: 1.5rem;
       }
       .selectLocaciones {
        width: 100%;
        align-items: flex-start;
        margin: 10px;
        padding: 10px;
       }
       .selectLocaciones img {
        width: 8rem;
        margin-bottom: 1.5rem;
      }
      .selectVehiculos{
        width: 100%;
        margin: 10px;
        padding: 10px;
      
      }
      .selectVehiculos img {
        width: 8rem;
        margin-bottom: 1.5rem;
      }
      
      .contenedorColumna{
        width: 30%;
        }
      

  }