/* Reset básico e estilo global */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter&family=Merriweather&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  background-color: #121519;
  color: #fff;
}


.header {
  background-image: 
    linear-gradient(to bottom, #121519, transparent 20%),
    linear-gradient(to top, #121519, transparent 20%),
    linear-gradient(to right, #121519, transparent 20%, transparent 20%, #121519),
    url('img/nosferatufundo.jpg');
  background-size: cover;
  background-position: center;
  height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
}


.header h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: 42px;
  line-height: 1;
  color: aliceblue;
  margin-bottom: 10px;
  margin-top: 20cm;
  
}

.header p {
  font-family: 'Merriweather', serif;
  font-size: 20px;
  color: aliceblue;
  margin-bottom: 20px;
  font-weight: 400;
}

.btn-destaque {
  margin-top: 25px;
  padding: 10px 34px;
  background-color: #00ac1c;
  border: none;
  border-radius: 6px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  color:aliceblue;
  font-weight: 600;
  margin-bottom: 30px;
}

.btn-destaque:hover {
  background-color: #00ac1c;
}

.lateral{
  font-family: 'Merriweather', serif;
  font-size: 13px;
  margin-bottom: 20px;
  font-weight: 400;
  position: relative;
  position:absolute; 
  color:#678;
  top: 47%;               
  right: 4%;               
  transform: translateY(-50%) rotate(-90deg); 
  transform-origin: right center; 
  writing-mode: horizontal-tb;  
  white-space: nowrap;          
  background: #eeeeee00;           
  padding: 5px 10px;
  font-weight: bold;
}


.destaquetexto{
  color: #789;
  font-size: 17px;
}

.Posters{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;  
  padding-top: 330px;
  padding-bottom: 5p5x;
  gap: 9px
  
}

.Posters img {
  max-width: 100%;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.2); 

}


#permite {
  color: #9ab;
  margin-top: 57px;
  margin-bottom: 10px;
  margin-left: 125px;
  
}

/*quadradinhos*/
.quadradinhos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;  
  align-items: center;    
  gap: 10px
}

.quadrado img{
  padding-top: 5px;
  margin-left: 15px;

}

.quadrado {
  width: 315px;          
  height: 120px;         
  background-color: #456;      
  display: flex;
  padding-top: 10px;  
  justify-content: center; 
  text-align: justify;
  border-radius: 3px;
}

.quadrado p{
  font-size: 15px;
  color: rgb(198, 207, 215);
  padding-top: 7px;
  margin-left: 15px;
  margin-right: 20px;
}

.quadrado:hover {
  background-color: #00ac1c;
}

.quadrado2 img{
  padding-top: 5px;
  margin-left: 15px;

}

.quadrado2 {
  width: 315px;          
  height: 120px;         
  background-color: #456;      
  display: flex;
  padding-top: 10px;  
  justify-content: center; 
  text-align: justify;
  border-radius: 3px;
}

.quadrado2 p{
  font-size: 15px;
  color: rgb(198, 207, 215);
  padding-top: 7px;
  margin-left: 15px;
  margin-right: 20px;
}

.quadrado2:hover {
  background-color: rgb(244, 83, 24);
}

.quadrado3 img{
  padding-top: 5px;
  margin-left: 15px;

}

.quadrado3 {
  width: 315px;          
  height: 120px;         
  background-color: #456;      
  display: flex;
  padding-top: 10px;   
  justify-content: center; 
  text-align: justify;
  border-radius: 3px;
}

.quadrado3 p{
  font-size: 15px;
  color: rgb(198, 207, 215);
  padding-top: 7px;
  margin-left: 15px;
  margin-right: 20px;
}

.quadrado3:hover {
  background-color:deepskyblue;
}


.quadrado4 img{
  padding-top: 5px;
  margin-left: 15px;

}

.quadrado4 {
  width: 315px;          
  height: 130px;         
  background-color: #456;      
  display: flex;
  padding-top: 10px;  
  justify-content: center; 
  text-align: justify;
  border-radius: 3px;
}

.quadrado4 p{
  font-size: 15px;
  color: rgb(198, 207, 215);
  padding-top: 7px;
  margin-left: 15px;
  margin-right: 40px;
}

.quadrado4:hover {
  background-color: #00ac1c;
}

.quadrado5 img{
  padding-top: 5px;
  margin-left: 15px;

}

.quadrado5 {
  width: 315px;          
  height: 130px;         
  background-color: #456;      
  display: flex;
  padding-top: 10px;  
  justify-content: center; 
  text-align: justify;
  border-radius: 3px;
}

.quadrado5 p{
  font-size: 15px;
  color: rgb(198, 207, 215);
  padding-top: 7px;
  margin-left: 15px;
  margin-right: 40px;
}

.quadrado5:hover {
  background-color: rgb(244, 83, 24);
  
}


.quadrado6 img{
  padding-top: 5px;
  margin-left: 15px;

}

.quadrado6 {
  width: 315px;          
  height: 130px;         
  background-color: #456;      
  display: flex;
  padding-top: 10px; 
  justify-content: center; 
  text-align: justify;
  border-radius: 3px;
}

.quadrado6 p{
  font-size: 15px;
  color: rgb(198, 207, 215);
  padding-top: 7px;
  margin-left: 15px;
  margin-right: 40px;
}

.quadrado6:hover {
  background-color:deepskyblue;
}


.linha {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
  color: #9ab; 
  padding: 0 10px;
  margin-bottom: 2px;
}

.traço {
  width: 970px; 
  border: none;
  border: 0;               
  border-top: 0.5px solid #9ab; 
  margin: 5px auto 20px auto;
  margin-bottom: 10px;
}

.mais {
  font-size: 10px;
}

#revisar {
  margin-left: 110px;
}

#assistidos {
  font-size: 10px;
  margin-right: 110px;
}

.filminhos {
  display: flex;
  flex-wrap: wrap;
  margin-left: 120px;
  gap: 8px;
  margin-bottom: 40px;
}

.filminhos img {
  max-width: 100%;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.2); 
}

#compile {
  margin-left: 150px;
  margin-right: 120px;
  color: #9ab; 
  font-size: 25px;
}

.vida {
  display: block;
  text-align: center;
  margin-bottom: 9px;
}

#abaixo {
  text-align: center;
  color: #9ab; 
  font-size: 15px;
  margin-bottom: 60px;
}

.container {
  display: flex;
  gap: 45px;
  
}

/*AVALIAÇÕES*/
.avaliações { 
  flex: 2; 
  margin-left: 110px;
  margin-bottom: 20px;
 
}
.listas { 
  flex: 1;
  margin-right: 110px;
}

.titulo h3{
    font-family: 'Cormorant Garamond', serif;
    font-size: 25px;
}

.traço2 {
  border: 0;               
  border-top: 0.5px solid #9ab; 
  margin-left: 10px;
  width: 610px;
}

.traço3 {
  border: 0;               
  border-top: 0.5px solid #9ab; 
  margin-left: 10px;
  width: 295px;
}

.imgavaliações {
  margin-right: 20px;
  max-width: 100%;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.2); 
}

.avaliação {
  margin-left: 10px;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  
  
}

.conteudo {
   max-width: 490px;
   margin-right: 10px;
  font-family: 'Cormorant Garamond', serif;
}

.titulo {
  font-size: 20px;
  margin: 0;
  font-weight: bold;
  font-family: 'Cormorant Garamond', serif;
  margin-bottom: 10px;
}

.ano {
  color: #9ab;
  font-size: 18px;
  margin-left: 5px;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
}

.estrelas {
  color: #00e054; 
  margin-left: 10px;
  font-size: 20px;
}

.usuario {
  display: flex;
  align-items: center;
  margin: 5px 0 10px;
}

.avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 6px;
}

.nome {
  font-size: 14px;
  color: #9ab;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
}

.texto {
  margin-top: 13px;
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.4;
  color: #9ab;
  margin-bottom: 13px;
}

.curtidas {
  color: #9ab;
  font-size: 14px;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
}

.traço4 {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;               
  border-top: 0.5px solid #9ab; 
  margin-left: 10px;
  width: 610px;

}


/*LISTA*/


.lista {
  margin-top: 15px;
  margin-bottom: 20px;
}

.capas-lista {
  display: flex;
  margin-left: 15px;
}

.capas-lista img {
  width: 80px;
  height: 120px;
  object-fit: cover;
  margin-right: -30px; 
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.2); 
}

.listainfo {
  margin-left: 15px;
  color: white;
  font-size: 14px;
  margin-top: 5px;

}

.listainfo h4 {
    color: #9ab;
}

.listainfo span {
  margin-left: 20px;
  font-size: 12px;
  color: #9ab;
  margin-right: -15px;
  align-items: center; 
}

.avatarl {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  margin-right: 6px;
}

.usuariol {
  display: flex;
  align-items: center;
  margin: 5px 0 5px;
}

/*OPINIÕES POPULARES*/
.usuariop {
  display: flex;
  align-items: center;
  margin-top: 7px;
  margin-bottom: 7px;
  margin-left: 10px;
}

.avatarp {
  margin-bottom: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 6px;
}

.usuariop-info {
  margin-top: 5px;
  margin-left: 5px;
  margin-bottom: 7px;
  
}

.usr {
  margin-bottom: 5px;
  font-size: 15px;
}

.resep {
  margin-top: 10px;
  font-size: 13px;
  color: #9ab;
 
}

/*HISTÓRIAS*/
.hrecentes {
  margin-left: 110px;
}

.qgs {
  font-size: 10px;
  margin-right: 110px;
}


.historias {
  columns: 3; /* Número de colunas desejado */
  column-gap: 30px; /* Espaço entre as colunas */
  margin: 20px 120px; /* Espaço superior/inferior e nas laterais */
}

.card {
  background-color: #1F282F;
  border-radius: 4px;
  overflow: hidden;
  break-inside: avoid-column; /* Evita que o card se divida entre as colunas */
  margin-bottom: 30px; /* Espaço entre as caixas */
}


.cardimg {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.usuarioc {
  display: flex;
  align-items: center;
  margin: 5px 0 15px;

}

.avatarc {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 6px;
}

.nomec {
  font-size: 15px;
  color: #9ab;;
}

.conteudocard {
  padding: 15px;
}

.conteudocard h3 {
  font-size: 25px;
  margin: 0 0 8px;
  font-family: 'Cormorant Garamond', serif;
}


.conteudocard p {
  font-size: 13px;
  color:#9ab;
  margin: 10px 0 10px;
}

.conteudocard h4 {
  margin-top: 15px;
  font-size: 12px;
  color: white;
}

/*CONFRONTOS/NOTÍCIAS RECENTES*/
.confrontos {
  columns: 3; /* Número de colunas desejado */
  column-gap: 13px; /* Espaço entre as colunas */
  margin: 23px 120px; /* Espaço superior/inferior e nas laterais */
}

.confronto img {
  width: 350px;          
  height: 175px;   
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  border-radius: 3px;

}

.confronto {
  overflow: hidden;
  break-inside: avoid-column; /* Evita que o card se divida entre as colunas */
  margin-bottom: 30px; /* Espaço entre as caixas */ 
  border-radius: 3px;
}

.conteudoconfronto {
  margin-top: 13px;
}

.conteudoconfronto h3 {
  font-size: 17px;
}

.conteudoconfronto p {
  color: #9ab;
  font-size: 15px;
  margin-top: 5px
}

/*RODAPÉ*/

.linkspe {
  margin-top: 5px;
  font-size: 14px;
  margin-bottom: 10px;
  color: #9ab;
  
}

.linkspe span {
  margin-left: 10px;
}

.linkspe img {
  margin-left: 10px;
}

.containerpe {
  display: flex;
  gap: 45px;
  margin-left: 110px;
  
}

.redespe img {
  margin-left: 10px;
} 


footer {
  padding-top: 35px;
  background-color: #2c3440;
  padding-bottom: 115px;
}

footer p {
  margin-top: 10px;
  color: #678;;
  font-size: 13px;
  margin-left: 120px;
}