*{
  margin: 0%;
  padding: 0;
  cursor: pointer;
}

html, body {
  height: 100%;
  width: 100%;
  font-family: 'Quicksand', sans-serif;
  background: black;
}

h1, h2{
font-family: Vidaloka;
color: white;
}

h1{
justify-content: center;
align-items: center;
color: white;
font-size: 70px;
}

h3{
justify-content: center;
align-items: center;
color: white;
font-size: 35px;
}


.section-info{
margin:50px 120px;
}
.flex-box2 .section-info, .flex-box4 .section-info, .flex-box5 .section-info{
margin:50px 0;
}
/*========HEADER==========*/

 .container1 header{
  display:flex;
  background-color:#000;
  justify-content: space-evenly;
  flex-direction:row;
  height: 300px;
  align-items: center;
}

.logo {
width: 100%;
text-align: center;
}

nav{
width: 100%;
vertical-align: middle;
text-align: left;

}
nav ul, .nav2 ul{
display: flex;
justify-content: space-evenly;

}
nav ul li, .nav2 ul li{
list-style-type: none;
height: 40px;
display: flex;
align-items: center;
}
nav ul li a, .nav2 ul li a{
text-decoration: none;
color:#fff;
opacity:.42; 
padding: 8px 16px;
transition: all 0.5s;
}

.nav2{
width: 100%;
vertical-align: middle;
}

.nav a{
color: white;
text-decoration: none;
margin: 200px 200px;
padding: 8px 16px;
border-radius: 10px;
transition: all 0.5s;
}

nav a:hover, .nav2 a:hover{
background-color: gray;
border: 0;
border-radius: 25px;
padding: 8px 16px;
}

#naav{
margin: auto;
display: flex; 
}

.login{
text-align: center;
background: white;
color: black;
font-family: 'Quicksand', sans-serif;
border-radius: 25px;
border: 0 whitesmoke;
width: 100px;
height: 40px;
padding: 10px;
font-size: 15px;
transition: 0.5s;
cursor: pointer;
}

.login:hover{
background-color: #c9c0c0;
}

/*=========== BANNER ============*/
.container2{
  background: url('./assets/img/imagen-home.png');
  background-size: cover;
  background-color: rgba(0,0,0,0.3);
  background-blend-mode: multiply;
  width: 100%;
  height: 744px;
  display: flex;
  flex-direction: column;
  justify-content: end;
}
.info{
margin: 100px 100px;
}

#info{
text-align: center;
background: white;
color: black;
font-family: 'Quicksand', sans-serif;
border-radius: 25px;
border: 0 whitesmoke;
width: 100px;
height: 40px;
padding: 10 px;
font-size: 15px;
transition: 0.5s;
}
#info a{
text-decoration: none;
color: black;
}

#info:hover{
background: #c9c0c0;
}

/*========== MOVIES ===========*/

.flex-box{
width: 100% !important;


}
.movies1{
display:flex;
justify-content: space-evenly;
gap:10px;
margin-left: 120px;
margin-right: 120px;
}

.movies-container{
display:flex;
justify-content: center;
flex:1
}
.movies-container img{
object-fit:cover;
width: 100%;
height: 100%;
cursor: pointer;
background-color: rgba(0,0,0,0.3);
background-blend-mode: multiply;
}

.movies-container .capa{
  position: absolute;
  background-color: rgba(11,103,123,0.8);
  color: white;
  opacity: 0;
  visibility: hidden;
  text-align: center;
  width: 220px;
  height: 300px;
  cursor: pointer;
  padding: 30px; 
}

.movies-container:hover .capa h4{
  margin-top: 50px;
  margin-bottom: 10px;
  color: black;
  font-family: Quicksand;
  font-size: larger;  
}

.movies-container:hover .capa{
  opacity: 1;
  visibility: visible;
}

.movies-container:hover img{
transform: scale(1.3);
}

#tittle2{
padding-bottom: 100px; 
}

#movie{
color: white;
opacity:.42;
}


/*========== CHARACTERS ===========*/

#characters2{
color: white;
opacity:.42;
}
.character1{
display:flex;
justify-content: space-evenly;
gap:10px
}
.character-container{
display:flex;
justify-content: center;
flex:1
}
.character-container img{
object-fit:cover;
width: 100%;
height: 100%;
cursor: pointer;
}

.character-container:hover img{
transform: scale(1.3);
}

.flex-box2{
padding: 0 120px;

}

#allCharacters{
background: #EEB421;
color: black;
font-family: 'Quicksand', sans-serif;
border-radius: 25px;
border: 0;
font-size: 15px;
transition: 0.5s;
display: flex;
justify-content: center;
text-align: center;
padding: 10px 20px;
margin:50px auto;
}

#allCharacters:hover{
background:  #b18619;
}

#allCharacters a{
text-decoration: none;
color: black;
}
/*========== HOUSES ===========*/
#house0{
color: #EEB421;
opacity:.42;
}

.houses{
display:flex;
flex-direction:row;
justify-content: center;
gap: 10px;
justify-content:space-evenly
}

.houses .item{
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
flex: 1;
}

.houses-container{
display:flex;
justify-content: center;
flex:1

}
.houses-container img{
object-fit: cover;
width: 100%;
height: 100%;
}


.item img{
height: 70%;
width:  80%;
cursor: pointer;
padding: 50px;
}

#house1{
background: #C61D58;
color: white;
font-family: 'Quicksand', sans-serif;
border-radius: 25px;
border: 50px;
width: 100px;
height: 40px;
font-size: 15px;
transition: 0.5s;
vertical-align: top;
display: flex;
justify-content: center;
text-align: center;
padding: 11px;
}

#house2{
background: #EEB421;
color: white;
font-family: 'Quicksand', sans-serif;
border-radius: 25px;
border: 200px;
width: 100px;
height: 40px;
font-size: 15px;
transition: 0.5s;
vertical-align: top;
display: flex;
justify-content: center;
text-align: center;
padding: 11px;


}

#house3{
background: #1D7452;
color: white;
font-family: 'Quicksand', sans-serif;
border-radius: 25px;
border: 50px;
width: 100px;
height: 40px;
font-size: 15px;
transition: 0.5s;
vertical-align: top;
display: flex;
justify-content: center;
text-align: center;
padding: 11px;
text-decoration: none;
}


#house4{
background: #15669C;
color: white;
font-family: 'Quicksand', sans-serif;
border-radius: 25px;
border: 50px;
width: 100px;
height: 40px;
font-size: 15px;
transition: 0.5s;
vertical-align: top;
display: flex;
justify-content: center;
text-align: center;
padding: 11px;
}
#house1:hover{
background-color: #990c3d;
}

#house1 a{
text-decoration: none;
color: white;
}

#house2:hover{
background-color: #b18619;
}

#house2 a{
text-decoration: none;
color: white;
}

#house3:hover{
background-color: #14543b;
}

#house3 a{
text-decoration: none;
color: white;
}

#house4:hover{
background-color:#124f78;
}

#house4 a{
text-decoration: none;
color: white; 
}

#house{
color: #EEB421;
}

.flex-box5{
padding: 120px;
}
/*========== BOOKS ===========*/

#book1{
color: white;
opacity:.42;
}

.book2{
display:flex;
justify-content: space-evenly;
gap:10px
}
.book-container{
display:flex;
justify-content: center;
flex:1
}
.book-container img{
object-fit:cover;
width: 100%;
height: 100%;
cursor: pointer;
background-color: rgba(0,0,0,0.3);
background-blend-mode: multiply;
}

.book-container:hover img{
transform: scale(1.3);
}

.book-container .capa1{
position: absolute;
 background-color: rgba(11,103,123,0.8);
 color: white;
 opacity: 0;
 visibility: hidden;
 text-align: center;
 width: 220px;
 height: 340px;
 cursor: pointer;
 padding: 30px; 
}

.book-container:hover .capa1 h5{
 margin-top: 50px;
 margin-bottom: 10px;
 color: black;
 font-family: Quicksand; 
 font-size: larger;  
}

.book-container:hover .capa1{
 opacity: 1;
 visibility: visible;
}

.flex-box4{
padding: 0 120px
} 

/* ===== FILTER DE ORDENADO CHARACTERS.HTML  ==== */

.card{
  display: flex;
  border: 0;
  border-radius: 5px;
  color: black;
  background-color: white;
  width: 30%;
  min-height: 50px;
  margin: 10px;
  padding: 20px;

}

/* ======= CHARACTERS.HTML ========== */
#characters-container{
  color: white; 
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 50px;
}

#characters-container ul li{
  list-style-type: none;
}

.container7{
  background: url('./assets/characters-html/banner2.jpg');
  background-size: cover;
  background-color: rgba(0,0,0,0.3);
  background-blend-mode: multiply;
  width: 100%;
  height: 744px;
  display: flex;
  flex-direction: column;
  justify-content: end;
}

#houses-select{
  border: 0;
  border-radius: 15px;
  color: black;
  background-color: #EEB421;
  font-family: 'Quicksand', sans-serif;
  padding: 10px;
  margin: 50px;
}

#species-select{
  border: 0;
  border-radius: 15px;
  color: black;
  background-color: #EEB421;
  font-family: 'Quicksand', sans-serif;
  padding: 10px;
  margin: 50px;
}

#orderAZ{
  border: 0;
  border-radius: 15px;
  color: black;
  background-color: #EEB421;
  font-family: 'Quicksand', sans-serif;
  padding: 10px;
  margin: 50px;
  margin-left: 50px;
}

#input-box{
  display: flex;
  margin: auto;
  justify-content: center;
}

.img-houses{
  background-image: url(./assets/casas/hogwarts.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 30%;
  border: 0;
  border-radius: 50px;
}

.Gryffindor{
  background-image: url(./assets/casas/gryffindor.png);
}
.Slytherin{
  background-image: url(./assets/casas/slytherin.png);
}
.Hufflepuff{
  background-image: url(./assets/casas/hufflepuff.png);
}
.Ravenclaw{
  background-image: url(./assets/casas/ravenclaw.png);
}

/* ======= FOOTER ========== */
footer{
  color: #fff;
  background-color: #000;
  text-align: center;
  padding: 50px 0;
  width: 100%;
  display: block;
  clear: both;
}

.rrss{
display: flex;
justify-content: center;
gap: 20px;
margin-bottom:20px
}
.rrss li{
list-style-type: none;
}
.rrss li a{
text-decoration:none
}

iconify{
display: flex;
flex-direction: row;
text-align: row;
gap: 20px;
text-align: center;
justify-content: center;

}

.icon{
display: flex;
flex-direction: row;
gap: 10px;
text-align: center;
justify-content: center;
align-items: center;
color: white;
}

#copy{
opacity: .30;
}

#p2{
color: #EEB421;
}

@media (max-width:600px){
  body{
    color: red;
  }
}