* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Nunito', sans-serif;
}




  @keyframes gridMove {
  0% {
    background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
  }
  100% {
    background-position: 98px 98px, 98px 98px, 19px 19px, 19px 19px;
  }
}

body {
  background-color: #2b2e36;
  background-image: 
    linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
  animation: gridMove 20s linear infinite;
  position: relative;
  overflow: auto; /* Alterado de 'hidden' para 'auto' para permitir rolagem */
  min-height: 100vh; /* Garante que o body tenha pelo menos a altura da viewport */

  @media (max-width: 768px) {  /* PARA A SCROLL-BAR SUMIR NO MOBILE [EXPLORER]*/
    -ms-overflow-style: none;

  }
}



}

/* Adicionar efeito de linha horizontal retrowave */
.retro-line {
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, #ff00ff, #00ffff, #ff00ff);
  margin: 20px 0;
  position: relative;
  overflow: hidden;
}

.retro-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  animation: retroLineScan 2s linear infinite;
}

@keyframes retroLineScan {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
  ::-webkit-scrollbar{
    width: 2px;
    height: 2px;
  }
  ::-webkit-scrollbar-thumb {
    background: #33a0e8; /* Cor da parte que pode ser arrastada */
    border-radius: 0px; /* Borda arredondada do thumb */
  
  }
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

@keyframes neonGlow {
  0% {
      text-shadow: 0 0 5px #00f, 0 0 10px #00f, 0 0 15px #0ff, 0 0 20px #0ff;
  }
  50% {
      text-shadow: 0 0 10px #00f, 0 0 20px #00f, 0 0 25px #0ff, 0 0 30px #0ff;
  }
  100% {
      text-shadow: 0 0 5px #00f, 0 0 10px #00f, 0 0 15px #0ff, 0 0 20px #0ff;
  }
}

::-webkit-scrollbar{
  width: 2px;
  height: 2px;
}
::-webkit-scrollbar-thumb {
  background: #33a0e8; /* Cor da parte que pode ser arrastada */
  border-radius: 0px; /* Borda arredondada do thumb */

}

::-webkit-scrollbar-thumb:hover {
background: #0cebff; /* Cor do thumb quando o mouse está sobre ele */
}
/* ----------------------HEADER------------------------ */

header{
color: #FFF;
background-color: #17181b;
align-content: center;
width: 100%;
height: 70px;
border-bottom: 1px solid #fff;
box-shadow: 0PX 0px 10px #e1e1e1;

}

.Main-Header {
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: 0px 35px;

}

.FZ-Logo img {
position: absolute;
left: 50%;
transform: translateX(-50%);
padding-top: 10px;
max-width: 200px;
}

.FZ-Logo a {
text-decoration: none;
}

.Header-Icons {
position: absolute;
right: 50px;
font-size: 25px;
display: flex;
margin-left: auto;
gap: 20px;

}

.Magnify-Icon{
font-size: 24px;
color: #fff;
transition: color 0.2s;
}


.Magnify-Icon:hover {
cursor: pointer;
color: #1571f4;
}

/*=========HEADER==========*/
.post-container{
display: grid;
justify-content: center;
padding: 30px 0;
@media (max-width: 768px) {
  padding: 6px;
  
  }
  
}

.post-content{
max-width: 1000px;
background-color: rgb(54, 58, 68);
padding: 30px;
border-radius: 4px;

@media (max-width: 768px) {
padding: 10px;

}

}
.post-header{
padding-bottom: 40px;
}

.header-text{
color: #fff;
}
.header-text h1{
  }
.header-text p{
color: #ccc;
font-size: 18px;
}

a { color: inherit; }

.header-data{
display: flex;
align-items: center;
color: #ccc;
font-size: 12px;
gap: 7px;
padding-top: 7px;

}

.header-tag{
color: #000;
font-weight: bold;
border-radius: 3px;
background-color: #1571f4;
padding: 0px 4px;
text-decoration: none;
}
/*========body=========*/
.post-body{
display: flex;
color: #fff;
align-items: flex-start;
color: #ccc;
padding: 0px 0px 20px 0;

}

.post-data{
border-right: 1px solid #616161;
padding-right: 20px;
width: 70%;
}
@media (max-width: 768px) {  
  .post-data {
    width: 100%;
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center;     /* Centraliza verticalmente */
    flex-direction: column;  /* Coloca os elementos em uma coluna (se necessário) */
    border-right: none; 
    padding-right: -0px;

}
}


.post-text iframe {
  width: 100% !important;
  max-width: 600px !important;
  height: 350px !important;
}


.post-img img{
padding-top: 0px;
margin-bottom: 10px;
width: 100%;
height: auto;
border-radius: 3px;

}
.post-text {
  max-width: 100%;
  overflow: hidden;
  word-wrap: break-word;
}

.post-text img,
.post-text video,
.post-text iframe {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 10px auto;
}



/* Garantir que o conteúdo de vídeo tenha uma largura adequada em dispositivos menores */
@media (max-width: 768px) {
    .post-text iframe,
    .post-text video {
        width: 100%;   /* Ajusta a largura para 100% em telas pequenas */
        height: auto;  /* Mantém a altura automática */
    }
}



.post-sub{
padding-top: 15px;
}

.sub-title-post{
font-size: 18px;
font-weight: bold;
}

.sub-text-post{

}
.post-box{
width: 30%;
padding-left: 20px;
}
@media (max-width: 768px) {
  .post-box {
      display: none; /* Esconde o .post-box em telas pequenas */
  }


}
.post-box h3{
margin-left: 15px;
margin-top: 15px;
margin-bottom: 10px;
}

/*========footer========*/
.post-buttons {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
width: 100%;
padding-top: 30px;
list-style: none;
background-color: rgb(54, 58, 68);
margin-bottom: -10px;
margin-top: 30px;
}

.post-button {
display: flex;
align-items: center;
justify-content: center;

color: #CCC;
border: none;
font-size: 1.5rem;
background-color: #2b2e36;
cursor: pointer;
border-radius: 3px;
width: 100%;
height: 50px;
padding: 0;
transition: 0.2s;
margin-top: -60px;
}
.post-button:hover {
color: #FFF;
background-color: #1571f4;
}

.post-button i {
font-size: 1.5rem;
}

.copyright {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    color: #888;
    font-family: 'Open Sans', sans-serif;
}
/*========ADS========*/


.ads-container {
width: 100%;
aspect-ratio: 1 / 1; /* Mantém o formato quadrado */
background-color: #f8f9fa;
border: 1px solid #dfe1e5;
border-radius: 8px;
padding: 15px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
font-family: Arial, sans-serif;
text-align: left;
position: relative;
}

.ads-header {
display: flex;
align-items: center;
font-size: 14px;
color: #5f6368;
}

.ads-header span {
background-color: #fbbc05;
color: #000;
font-weight: bold;
padding: 2px 6px;
border-radius: 3px;
margin-right: 5px;
font-size: 12px;
}

.ads-title {
font-size: 16px;
font-weight: bold;
color: #1a0dab;
margin: 5px 0;
}

.ads-description {
padding-top: 50px;
font-size: 14px;
color: #3c4043;
}

.ads-link {
font-size: 12px;
color: #006621;
text-decoration: none;
margin-top: 10px;
}

.ads-link:hover {
text-decoration: underline;
}



/*========NOTICIAS DO LADO========*/


.related-post {
  background-color: #292929;
  border-radius: 8px;
  overflow: hidden;
  flex: 1 1 calc(33.333% - 20px);
  position: relative;
  cursor: pointer;
  transition: 0.3s ease;
  width: 100%; /* Largura fixa para cada post */
  height: 80px; /* Altura fixa para cada post */
  margin-bottom: 7px;
  box-shadow: inset 0px 0px 15px rgba(0, 0, 0, 0.5); /* Efeito côncavo usando box-shadow interno */
}

/* Efeito de hover para o post */
.related-post:hover {
  box-shadow: inset 0px 0px 15px rgba(0, 0, 0, 0.5); /* Efeito côncavo reforçado no hover */
  filter: brightness(1.2);
}

/* Gradiente sobre a imagem */
.related-post::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.6));
  pointer-events: none;
  z-index: 1;
}

/* Estilo da imagem */
.related-post img {
  width: 100%;
  height: 100%; /* A imagem vai cobrir toda a altura e largura da div */
  object-fit: cover; /* Garante que a imagem cubra toda a div sem distorção */
  display: block;
  z-index: 0;
  border-radius: 8px; /* Mantém o border-radius consistente com o da div */
  padding: 0; /* Remove qualquer padding que possa estar afetando a imagem */
}

@media (max-width: 1019px) {
  .related-posts .related-posts {
    padding-right: 5%; /* Reduzindo o padding */
    width: 90%; /* Ajustando a largura, se necessário */
  }
}

/* Título sobre a imagem */
.related-post-title {
  position: absolute;
  bottom: 0px;
  left: 0px;
  font-size: 10px;
  font-weight: bold;
  color: #ffffff;
  padding: 5px 10px;
  border-radius: 5px;
  z-index: 2;
}

/* Estilo do conteúdo do post */
.related-post-content {
  padding: 15px;
  color: #ffffff;
}


/*=======GAME-ADS=========*/
.game-ads-container{
  width: 100%;
  padding-top: 30px;
}
.game-ads{
  position: relative;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
  transition: 0.2s;
}
.game-ads:hover{
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
  cursor: pointer;
}

.game-ads-cover img{
    position: relative;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
  transition: 0.2s;
 width: 100%;
 height: auto;
 border-radius: 3px;

}

.game-ads-title{
  display: flex;
  align-items: center;
  white-space: nowrap;
  border-radius: 3px;

  font-weight: bold;
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 10px 10px;
  gap: 15px;
  background-color: #000;
}

.game-ads-title i{
  font-size: 1.25em;
}

/*==========OTHER-ARTICLES==========*/
.other-articles-container{

  padding-top: 30px;
  width: 100%;
}

.other-articles-title{
  padding-bottom: 10px;
  font-size: 14px;

}

.other-articles-content{

}

.other-articles-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;

}


.article-item{
  display: flex;
  width: 100%;
  height: 80px;
  background-color: #2b2e36;
  cursor: pointer;
  border-radius: 3px;

}



.other-articles-cover{
  height: auto;
  width: 30%;
  min-width: 175PX;
  @media (max-width: 768px) {
    width: 30%;
    min-width: 125PX;
  }
  
  
}

.other-articles-cover img {
  width: 100%;
  height: 100%;
}

.other-articles-text{
  position: relative;
  padding: 5px;
  width: 100%;
  height: auto;
  border-radius: 3px;

}

.other-articles-text h2 {
  font-size: 14px;
  line-height: 1.3;
  font-weight: normal;
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 3;  /* Limita para 3 linhas */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.other-article-data a{
  position: absolute;
  bottom: 10px;
  right: 10px;
  text-decoration: none;
  color: #000;
  background-color: #1571f4;
  border-radius: 3px;
  padding: 0 4px;
  font-size: 12px;
  font-weight: bold;
  
  @media (max-width: 768px) {
  bottom: 5px;
  right: 5px;
  }
  
  
}

.side-ad.right-ad {
  position: sticky;
  top: 100px; /* Distância do topo da janela quando fixado */
  max-height: 600px; /* Altura máxima opcional para o anúncio */
  z-index: 100; /* Garante que fique acima de outros elementos */
}

/* Se você quiser adicionar uma transição suave quando o anúncio começa a seguir o scroll */
.side-ad.right-ad {
  transition: top 0.3s ease;
}

/* Estilo para o anúncio lateral que acompanha o scroll */
.side-ad.left-ad {
  position: sticky;
  top: 100px; /* Distância do topo da janela quando fixado */
  max-height: 600px; /* Altura máxima opcional para o anúncio */
  z-index: 100; /* Garante que fique acima de outros elementos */
}

/* Se você quiser adicionar uma transição suave quando o anúncio começa a seguir o scroll */
.side-ad.left-ad {
  transition: top 0.3s ease;
}

/* Media query para dispositivos móveis (opcional) */
@media (max-width: 768px) {
  .side-ad.left-ad {
    position: static; /* Volta ao comportamento normal em telas pequenas */
  }
  .side-ad.right-ad {
    position: static; /* Volta ao comportamento normal em telas pequenas */
  }
}