body { 
    background-image: url("https://i.pinimg.com/736x/29/61/18/296118bea44ed78e0b97fe354e9b74e1.jpg");
    background-repeat: repeat;
    font-family: Georgia, 'Times New Roman', Times, serif; 
    color:#eee; padding:20px; }

.container { 
    display: grid;
    grid-template-columns: 70% 30%; /* suman 100% del contenedor */
    grid-template-areas:
        "banner   banner"
        "marquee marquee"
        "dreamlog columna"
        "pie      pie";
    max-width: 900px;   /* límite del contenedor */
    width: 100%;
    margin: 0 auto;
    margin-left: 100px;
    gap: 20px;
    padding: 20px; 
}
.banner{
    grid-area: banner;
    text-align: center;
}
.Banner img {
  display: block;
  margin: 0 auto;        /* centra */
  max-width: 100%;       /* nunca más grande que .general */
  width: 100%;           /* ocupa todo el ancho disponible del contenedor */
  height: auto;          /* mantiene proporción */
}
.Banner h1 {
  margin: 0;               /* quita márgenes por defecto que desplazan */
  font-size: 2rem;         /* ajustá tamaño si queda gigante */
  line-height: 1.2;
  color: rgb(228, 243, 255);
}

h5{
    grid-area: marquee;
    font-size: 12px;
    font-style: normal;
    font-weight: lighter;
    text-align: center;
}
h5:hover{
  letter-spacing: 0.5px;
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff00ff, 0 0 40px #ff00ff;
}

/* tags */
.tags-filters { 
  grid-area: columna;
  margin-bottom:16px; 
  background: #1c1c1c;
  opacity: 70%;
}

.tags-filters p {
  color: white;
  padding: 10px;
  text-align: center;
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.5px;
  line-height: 20px;
}

.tags-filters p:hover{
  letter-spacing: 1px;
  text-shadow: 0 0 5px #fff, 0 0 10px #ffffff, 0 0 20px #ff0099, 0 0 40px #2db0d4;
}

.tag {
  cursor:pointer;    
  padding:6px 10px;
  margin:4px;
  background:#fffefe;
  color:#111;
  border:1px solid #bbb;
  border-radius:4px;
  font-size:13px;
}
.tag.active { 
  background:#fffefe; 
  color:#b91e1e; 
  font-weight:700; 
  font-style: italic;
}

  /* posts */
  .posts-list{
    grid-area: dreamlog;
    background: #1c1c1c00;

  }
  .post { 
    background: #252525d2; 
    padding:12px; 
    margin:12px 0; 
    border-radius:1px; 
    font-size: 14px;
}
  .post h2 { 
    margin:0 0 6px 0; 
    font-size:16px; 
}
  .post.hidden { 
    display:none !important; 
}

  /* leyenda */
  .info { 
    font-size:10px; 
    color:#ccc; 
    margin-bottom:8px; 
}