*{
  margin: 0;
  box-sizing: border-box;
}

:root{
  /*Primary Colors*/
  --primary-black:#000000;
  --primary-red:#E50914;
  --primary-white:#FFFFFF;
  --primary-white2:#e7e7e7;

  /*Secondary Colors*/
  --secondary-red-200:#C11119;
  --secondary-red-300:#F50723;
  --secondary-blue-100:#0071EB;
  --secondary-green:#46d369;

  /*Neutral Colors*/
  --grey-10: #e5e5e5;
  --grey-500: #363636;
  --grey-400:#414141;
  --grey-900: #141414;
}

@font-face {
  font-family: 'Netflix-Sans'; 
  src: url('fonts/NetflixSans-Bold.woff2') format('woff2'),
       url('fonts/NetflixSans-Bold.otf') format('oft');
}

@font-face {
  font-family: 'Netflix-Sans-Regular'; 
  src: url('fonts/NetflixSans-Regular.woff2') format('woff2'),
       url('fonts/NetflixSans-Regular.otf') format('otf');
}

@font-face {
  font-family: 'Netflix-Sans-Light'; 
  src: url('fonts/NetflixSans-Light.woff2') format('woff2'),
       url('fonts/NetflixSans-Light.otf') format('otf');
}

@font-face {
  font-family: 'Netflix-Sans-Medium'; 
  src: url('fonts/NetflixSans-Medium.woff2') format('woff2'),
       url('fonts/NetflixSans-Medium.otf') format('otf');
}

body {
  background: url(./assets/BlurBackground.png);
  background-size: 2200px;
  background-repeat: no-repeat;
}

/* Estilos para o contêiner principal */
.container {
 /* border: 4.7px solid var(--primary-red);*/
  background: #414141b4;
  border-radius: 20px;
  margin: 2rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: sans-serif;
  justify-content: center;
}


.find-container {
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Estilos para o título */
h1 {
  color: var(--primary-red); /* Vermelho Netflix */
  margin: 20px 0;
  font-family: 'Bebas Neue',serif;
  font-weight: 1000;
  font-size: 3rem;
  text-decoration: none;
}

.find-container p {
  margin: 1rem 0.7rem 2rem ;
  font-family: 'Netflix-Sans-Regular', sans-serif;
  color: var(--primary-white);
  font-size: 18px;
}

/* Estilos para o botão "Recomendar" */
.find {
  background-color: var(--primary-red); /* Vermelho Netflix */
  color: var(--primary-white);
  width: 60%;
  height: 5vh;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-bottom: 2rem;
  font-family: 'Netflix-Sans';
  font-size: 18px;

  transition: background 0.5s ;
}

.find:hover {
  border: 2.5px solid var(--primary-white);

}

/* Estilos para o contêiner principal */
#filmes-container {
  display: block;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

/*Estilos para o gradiente dos filmes*/
#gradiente {
  background-image: linear-gradient(180deg, #00000008 5%, #262626d8 40%, #141414 100%);
  height: 100%;
  border-radius: 0 0 20px 20px;
  
 }

/* Estilos para cada filme */
#filme-div {
  display: block;
  border-radius: 10px 10px 20px 20px; 
  text-align: center;
  margin: 0;
  padding: 0;
}

/* Estilos para a imagem */
#filme-div img {
  margin-top: 2rem;
  max-width: 200px;
  height: auto;
  box-shadow: 0px 5px 10px rgb(5, 5, 5); /* Deslocamento vertical de 5px e desfoque de 10px */
  }

/*Estilos para o Titulo e Sinopse*/
#filme-text {
  margin: -4rem 0rem 0 0rem;
  padding: 4.5rem 1rem 1rem;
}

/* Estilos para as informações */
#filme-div h2 {
  margin-bottom: .5rem;
  font-family: 'Netflix-Sans', sans-serif;
  font-size: 20px;
  color: var(--primary-white);
}

#filme-div p {
  margin: 1rem;
  text-align: justify;
  font-family: 'Netflix-Sans-Regular', sans-serif;
  color: var(--primary-white2);

}

/* Estilos para o botão "Assistir Agora" */
.assistir-agora {
  padding: 10px 20px;
  width: 200px;
  height: 4.5vh;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  margin: 1rem;
  background-color: var(--primary-red);
  color: var(--primary-white);
  font-family: 'Netflix-Sans-Medium';
  font-size: 16px;

  transition: background 0.2s;
}

.assistir-agora:hover {
  border:2.5px solid var(--primary-white);
}

.logo img {
  height: auto;
  width: 20px;
  
}

@media (min-width:800px) {
  .container.grid { /* Styles for grid layout */
      display: grid;
      grid-template-columns: 1fr 1fr; /* Two equal columns */
      height: 94vh; 
      align-items: stretch; /* Stretch items to fill height */
  }

  .container {
    margin: 1rem;
  }

  .find-container, #filmes-container { /* Target both divs */
      display: flex; /* Use flexbox for vertical centering */
      flex-direction: column; /* Stack elements vertically */
      height: 100%; /* Fill the grid cell height */
    }
    
    .find-container {
      justify-content: center; /* Center content vertically */
      align-items: center;
      text-align: center;
      padding: 30vh 0;
      height: 92vh;
    }
    
    #gradiente {
     background-image: linear-gradient(180deg, #00000008 5%, #262626d8 40%, #141414 100%);
     border-radius: 20px 20px 20px 3rem;
     
    }
  #filmes-container {
    width: 100%;
  }

  #filme-div img {
    max-width: 350px;
    margin: 2rem 0;
  }

  #filme-div {
    border-radius: 3rem 20px 20px 3rem ;
  }

  #filme-text h2 {
    font-family: 'Netflix-Sans';
    font-size: 28px;
  }

  #filme-text p {
    margin: 0 6rem;
    font-family: 'Netflix-Sans-Medium';
  }
  

  #filme-div{
    display: block;
    height: 100%;
  }

  .logo img {
    height: auto;
    width: 30px;
  }

  .assistir-agora {
    margin-bottom: 3rem;
    width: 350px;
  }

}


/*-------------------------------------------RECOMENDS FIXEDS-----------------------------*/
#carousel {
  background: var(--primary-black);
  padding:1rem .5rem; 
  width: 100%; /* Largura total do contêiner */
}

#filme-recomend {
  display: flex;
  gap: 20px; /* Espaçamento entre os filmes */
  padding: 2rem; /* Espaçamento interno */
  overflow-x: auto; /* Barra de rolagem horizontal */
  -webkit-overflow-scrolling: touch; /* Rolagem suave em dispositivos móveis */
}

.slider {
  scroll-snap-align: start; /* Alinha o início de cada filme ao "snap" */
  flex-shrink: 0; /* Impede que os filmes encolham */
  width: 200px; /* Largura fixa para cada filme */
  height: 100%; /* Altura automática */
}

.slider img {
  width: 100%; /* Largura total da imagem dentro do slider */
  height: 100%; /* Altura automática */
  border-radius: 10px;
}

/* Estilos para o título do carrossel */
#carousel h2 {
  text-align: left; /* Centraliza o título */
  margin: 0 2rem; /* Espaçamento inferior */
  color: var(--primary-white2); /* Cor do título (exemplo) */
  font-family: 'Netflix-Sans-Medium'; /* Fonte do título (exemplo) */
  font-size: 20px;
}

/* Estilos para a barra de rolagem (opcional) */
#filme-recomend::-webkit-scrollbar {
  height: 0;
  width: 0;
}

#filme-recomend::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1); /* Cor de fundo da barra de rolagem */
  border-radius: 4px;
  border: none;
}

#filme-recomend::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.5); /* Cor do "polegar" da barra de rolagem */
  border-radius: 4px;
  border: none;
}

@media (min-width:800px) {

  #filme-recomend{
    padding: 1rem 0;
    justify-content: center;
    margin-top: .5rem;
  }

  .slider{
    transition: duration, 70ms;
    &:hover { 
      margin: 0 10px;
      transform: scale(1.1);
    }
  }

  #carousel h2{
    margin-left: 4rem;

  }
}

/*-------------------------------------------------FOOTER-------------------------------------*/

.footer-container{
  border-top:4px solid var(--secondary-red-200) ;
  background: var(--grey-900);
}

#logo-footer{
  font-family: 'Bebas Neue';
  color: var(--primary-red);
  font-size: 20px;
  padding: 1rem;
}

#about{
  padding: 0 1rem;
}

#about h3{
  font-family: 'Netflix-Sans-Regular';
  font-size: 18px;
  color: var(--primary-white);
  margin-bottom: .5rem;

}

#about p{
  margin-left: 1rem;
  font-family: 'Netflix-Sans-Light';
  font-size: 15px;
  text-indent: 20px;
  text-align:justify;
  color: var(--primary-white2);
}

#social{
  display: flex;
  justify-content: space-between;
}
#social-links{
  padding: 1rem;
}

#social-links h3{
  font-family: 'Netflix-Sans-Regular';
  font-size: 18px;
  color: var(--primary-white);
  margin-bottom: 1rem;
}

#link a{
  margin-left: 20px;
  font-family: 'Netflix-Sans-Medium';
  font-size:20px ;
  text-decoration: none;
  color: var(--primary-white2);
}

#link a:hover{
  color: var(--secondary-red-300);
}

#timmy{
  margin: 1rem 2rem;
  padding: 1rem 0;
}

#timmy img{
  width: 100px;
  height: auto;
}

#devloped{
  background-color: var(--primary-black);
  text-align: center;
  padding: .5rem;
  font-family: 'Netflix-Sans-Light';
  font-size: 12px;
  color: var(--primary-white2);
}

#devloped a{
  text-decoration: none;
  color: var(--secondary-red-300);

}

#devloped a:hover{
  color: var(--primary-white);
}

@media (min-width:800px){
  #grid{
    display: grid;
    grid-template-columns: 1fr 1fr; /* Divide a div mãe em duas colunas iguais */
    grid-template-rows: 1fr 1fr; /* Divide a div mãe em duas linhas iguais */
}

#logo-footer{
  font-size: 28px;
}

  #footer-logoAbout {
  grid-column: 1;
  grid-row: 1; 
}

#about h3{
  font-size: 24px;
}

#about p{
  font-size: 20px;
}


#social {
  grid-column: 1; 
  grid-row: 2; 
}

#social-links{
  padding: 0 1rem;
}

#social-links h3{
  font-size: 24px;
}

#social-links p{
  font-size: 20px;
}

#timmy {
  grid-column: 2; 
  grid-row: 1 / 3; 
  text-align: center;
}

#timmy img{
width: 200px;  
}
}

/*
                              ____                 ____
                         ____     ____         ____     ____
                      ____               ______           ____
                      ____    __                    __    ____
                        ____                             ____
                          _____    <>           XX    _____
                              ___                   ___
                              ___                   ___
                            ____         (J)         ____
                            _____      _______      _____
                              ______            ______
                                   ______________



*/