/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
  

* { box-sizing: border-box; margin: 0; padding: 0; }
  
  html, body { height: 100%; width: 100%; }
  
  body {
    
    font-family: Helvetica, sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.1em;
    text-transform: lowercase;
    letter-spacing: 0em;
    font-size: 5px;
    
    }
  
  .logo {
    position: absolute;
    top: 40px;  
    left: 40px;
    max-width: 5%; 
    height: auto;
  }
  
  .pedra {
     
    position: absolute;
    top: 20%;
    left: 2%;
    width: 40px;
    height: auto;
    
  }
  
  .paz {
    
    position: absolute;
    top: 50%;
    right: 2.5%;
    width: 40px;
    height: auto;
    
  }
  
  .folha {
    
    position: absolute;
    top: 80%;
    right: 3%;
    width: 40px;
    height: auto;
    
  }
  
  .tres {
    
    position: absolute;
    bottom: 5%;
    left: 20%;
    font-size: 40px;
    font-weight: bold;
    
  }
  
  .horizontal {
  
  width: 100%;
  max-width: 100%;
  display: flex;
  margin: 0.5rem auto 0 auto;
  padding: 0;
  gap: 0;
}

/* duas imagens dividem perfeitamente o espaço */
  .horizontal img:not(.logo){
    
  width: 50%;
  height: auto;
  display: block;
  object-fit: cover;
  margin: 0;
  padding: 0;
  
  }
  
   /* ========== COLUNA CENTRAL SCROLLÁVEL ========== */
    /* posição fixa e centralizada; só ela tem scroll */
    .posts-container {
      position: relative;
      top: 10vh;        /* deixa espaço para o logo */
      bottom: 8vh;     /* deixa espaço para os números */
      left: 50%;
      transform: translateX(-50%);
      width: 100%;    /* largura fixa desejada */
      max-width: 84vw; /* responsividade */
      overflow-y: auto; /* só essa área rola */
      padding: 6vh 2rem;
      z-index: 10;     /* abaixo dos fixos */
      -webkit-overflow-scrolling: touch;
    }

    /* cada post */
    .post {
      max-width: 100%;
      margin: 0 auto 6rem auto;
      text-align: left;
    }
    .data {
      font-size: 11px;
      color: #222;
      margin-bottom: .5rem;
    }
    .texto {
      font-size: 11px;
      margin-bottom: 1rem;
      line-height: 1.2;
      color: #000;
    }

    .post img {
      display: block;
      width: 100%;
      max-width: 100%;  
      height: auto;
      margin: 0.5rem auto 0 auto; 
      object-fit: contain;
    }

    /* responsivo */
    @media (max-width: 720px) {
      .posts-container { width: 92vw; padding: 5vh 1.2rem; }
      .logo { max-width: 20px; }
      .numeros { font-size: 32px; left: 4vw; }
      .tres { font-size: 32px; left: 19vw; }
    }
/* POSTS */

/* BLOCO HORIZONTAL */

.horizontal {
  
    width: 100%;
    display: flex;
    margin: 1rem auto 0 auto;
    gap: 0;
}

.horizontal img:not(.logo) {
  
    width: 50%;
    height: auto;
    display: block;
    object-fit: cover;
    margin: 0;
    padding: 0;
    
}

/* textos */
.data {
  color: black;
  text-decoration: none;
  margin: 0.5em 0 0.2em 0;
}

.texto {
  margin: 0;
}

/* remove comportamento de "link azul" no mobile */
time, .data {
  color: inherit;
  text-decoration: none;
}