/*------------------------------*/
/*------------HEADER------------*/
/*------------------------------*/

.headerContainer{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: black;
  padding: 4vh 14vw;
}

.logoContainer {
  display: flex;
  cursor: pointer;
  margin-right: 4vw;
}

.titleWebsite{
  padding-left: 0.1vw;
  font-family: Minora;
  color: white;
  font-size: 1.8rem;
}

.menu{
  color: white;
  display: none;
}

.mainNav{
  width: 100%;
}

.navSide{
  padding-left: 2vw;
}

.navSide a{
  font-family: sans-serif;
  color: var(--colorMainNav);
}

.navSide a:hover{
  color: var(--colorMainNavHover);
}

.mainNav ul{
  display: flex;
  justify-content: flex-end;
}

/*------------------------------*/
/*-------------MAIN-------------*/
/*------------------------------*/

.mainContainer{
  padding: 4vw 14vw;
}

.mainContainer > h1{
  padding-bottom: 2vw;
}

.mainDiscoverContainer{
  display: flex;
}

.filterContainer{
  width: 20%;
}

.filterContainer h2{
  font-size: var(--h4font);
}

.filterContainer hr{
  margin: 1vh 0 3vh;
  width: 80%;
  background-color: #d9d9d9a1;
  border: none;
  height: 1px;
}

.nameFilter{
  width: 80%;
  display: flex;
  flex-direction: column;
}

.nameFilter h3{
  font-size: var(--h5font);
  font-weight: bold;
  margin-bottom: 2vh;
}

.nameFilter p{
  color: #d9d9d9;
}

label{
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.7vh;
  align-items: center;

} 

input[type="radio"]{
  accent-color: white;
  appearance: none;
  padding: 1.2vh;
  
}

input[type=radio]:checked {
  background-color: #004293;
  
}

.inputContainer{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  border: 1px solid white;

}

.filmContainer{
  width: 80%;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 
  gap: 1vw;
}

.film{
  box-shadow: 0 6px 6px rgba(10, 0, 97, 0.293);
}

.filmImage{
  height: 100%;
  transition: transform .2s;
}

.filmImage:hover{
  transform: scale(1.2);
}

.film img{
  aspect-ratio: 1 / 1.5;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.filmPosition{
  height: 100%;
}

.filmCard{
  height: 20%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8);

  position: absolute;
  bottom: 0;
  display: none;
}

.filmCard a{
  width: 50%;
}

.filmCard img:hover{
  filter: brightness(100%);
}

.filmCard img{
  padding: 1vw;
  height: 100%;
  width: 100%;
  object-fit: contain;
  filter: brightness(30%);
}

/*------------------------------*/
/*------------FOOTER------------*/
/*------------------------------*/
footer {
  padding: 2vw;
  background-color: #151515;
}

.socialMediaContainer {
  padding-bottom: 4vh;

  display: flex;
  justify-content: center;
}

.socialMediaContainer a {
  display: contents;
  cursor: default;
}

.linkContainer {
  max-height: 50px;
  max-width: 50px;
  border-radius: 50%;
  margin: 0 10px;

  background-color: black;

  display: flex;
  align-items: center;
  justify-content: center;
}

.linkImage {
  filter: brightness(15%);
  cursor: pointer;

}

.linkImage:hover {
  animation-name: toWhite;
  animation-fill-mode: forwards;
  animation-duration: 0.3s;
}

.termLinkContainer {
  padding-bottom: 3vh;

  display: flex;
  justify-content: center;
  gap: 0 2vw;
  flex-wrap: wrap;
}

.termLinkContainer a {
  color: rgb(69, 69, 69);
}

.termLinkContainer a:hover {
  color: rgb(229, 229, 229);
}

.copyRight {
  color: rgb(69, 69, 69);
}

.copyRight p {
  text-align: center;
}

.backToTop{
  position: fixed;
  bottom: 3vh;
  right: 2vw;

  height: 7vh;
  width: 7vh;
  background-color: #004293;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;

  border: none;
}

.backToTop img{
  filter: brightness(80%);
}

.backToTop img:hover{
  filter: brightness(100%);
}

.backToTop img{
  object-fit: scale-down;
  padding: 10%;
  display: block;
  border-radius: 50%;
}



/*------------------------------*/
/*----------ANIMATIONS----------*/
/*------------------------------*/

@keyframes toWhite {
  0% {
    filter: grayscale(100%) brightness(20%);
  }

  100% {
    filter: grayscale(0) brightness(80%);
  }
}

/*------------------------------*/
/*---------MEDIA-QUERY----------*/
/*------------------------------*/


@media (max-width: 1024px){

  
  .mainDiscoverContainer{    
    flex-direction: column;
  }

  .filterContainer{
    width: 100%;
  }

  .filmContainer{
    width: 100%;
  }

  .mainContainer h1{
    text-align: center;
  }

  .mainContainer hr{
    width: 100%;
  }

  .nameFilter{
    width: 100%;
  }
}

@media (max-width: 768px){

  .filmImage:hover{
    transform: scale(1);
  }
  
  .headerContainer{
    padding: 4vh 4vw;
  }

  .menu{
    display: block;
  }

  .mainNav{
    display: none;
  }

  .headerContainer{
    align-items: center;
    
  }

  .mainContainer{
    padding: 4vw 4vw;
  }

  

  .termLinkContainer{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .termLinkContainer a{
    padding: 1vh;
  }
}



/*------------------------------*/
/*----------ASIGNED-JS----------*/
/*------------------------------*/

.displayNav{
  align-items: center;
  display: block;

}

.openNav{
  transform: rotate(-90deg);
  transition: .2s; 
}

.closeNav{
  transform: rotate(0deg);
  transition: .2s; 
}

.displayMenu{
  display: flex;
  padding: 2.5vh 0;
  justify-content: flex-end;
  margin-left: auto; 
  margin-right: 0;

}

.displayLogo{
  display: none;
}

.displayHeaderContainer{
  flex-direction: column;
}

.ulMainNav{
  flex-direction: column;
  align-items: center;
}

.displayLiMainNav{
  padding: 2vh 0 2vh;
}

.filmCardOn{
  display: flex;
  justify-content: center;
}

.filmCardOver{
  position: relative;
  bottom: 0;
}