@import './reset.css';
@import './variables.css';
@import'./variables.css';
@import '../component/films/style.css';
@import '../component/trailer/style.css';
@import '../component/galerie/style.css';
@import '../component/featured/style.css';
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

body{
  background-color: var(--clr-background);
  font-family: "Nunito";
}



.header{
  position: sticky;
  top: 0; 
  background-color: var(--clr-background);
  
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 5rem;
  z-index: 11;
}
.film__label{
  
  display: flex;
  align-items: center;
  gap: 3rem;
}
.burger{
    
    z-index: 10;  
    cursor: pointer;
  }
.film__nav{
  display: flex;
  justify-content: center;
  padding-top: 5rem;
  
    position: fixed;
    inset:0;
    translate: -100% 0 ;
    transition: translate 0.3s ease-in-out;
    background-color: var(--clr-background);
   
  }
  input[type='checkbox']{
    appearance: none;
  }
  input[type='checkbox']:checked ~ .film__nav{
    translate: -40% 0 ;
  }
  
  .film__menu{
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 10rem;
  }
 
 
.category{
    margin: 1rem;
    padding: 1rem;
    padding-right: 2rem;
    padding-left: 2rem;
    background-color: var( --clr-lighterbg);
    color: white;
    outline: none;
    border-radius: 0.5rem;
}
.category:hover{
    background-color:var(--clr-grey);
}

.film__logo{
    height: 5rem;
    width: 5rem;
    z-index: 5
}

.film__setings{
  display: flex;
  flex-direction: column;
  background-color: var(--clr-grey);
  list-style: none;
  outline: none;
}
.film__menu{
  gap:2rem;
 
}
.film__abonner{
  padding: 1rem;
  padding-right: 3.5rem;
  padding-left: 3.5rem;
  background-color: var(--clr-whitegreen);
  border-radius: 0.5rem;
}
.film__abonner:hover{
  background-color: var(--clr-whitegreenHover);
}
.film__session{
  padding: 1rem;
  padding-right: 0.7rem;
  padding-left: 0.7rem;
  border-radius: 0.5rem;
  background-color: var(--clr-background);
  border: solid white;
  color: white;
}
.films__featured{
  display: flex;
  flex-wrap: wrap;
  padding: 1rem;
  gap: 1rem;

}
.films__section{
  padding: 1rem;
  font-size: 3rem;
  color: var(--clr-whitegreen);
}

@media (min-width: 54rem){
   
  .burger{
    display: none;
  }
  .film__nav{
    translate: 0% 0;
    position: relative;
    padding:1rem;
  }
  .film__menu{
    flex-direction: row;
    padding-left: 0rem;
    
  }
 
 
}