body{
  background-image: url(/Oddities/flowers\ \(8\).gif);
}

.Banner{
  grid-area: banner;
  text-align: center;
}

.Banner h1 {
  margin: 0;               /* quita márgenes por defecto que desplazan */
  font-size: 40px;         /* ajustá tamaño si queda gigante */
  color: #948a82;
}


.general {
  display: grid;
  grid-template-columns: 80% 20%; /* suman 100% del contenedor */
  grid-template-areas:
    "banner banner"
    "log  derecha"
    "content  derecha";
  max-width: 800px;   /* límite del contenedor */
  width: 100%;
  grid-template-rows: 5% 5% 65%;
  margin: 0 auto;
  gap: 15px;
}

.columnaderecha{
  grid-area: derecha;
  background: #e9d9cd95;
  padding: 10px;
  border-radius: 8px;
}

.log{
  grid-area: log;
  font-size: 14px;
  background-color: #fffcfc7a;
  
  border-style: double;
  border-radius: 8px;
  border-width: 5px;
  border-color: #D3D3D3;
  overflow-y:auto;
  padding-left: 10px;
}
.logTexto{
  font-family: "Times New Roman";
  color: #a7a7a7;
}

.content{
  grid-area: content;
  background: #e9d9cd95;
  padding: 20px;
  border-radius: 8px;
  height: fit-content;

  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.texto1{
  font-family: "Courier New", monospace;
  text-align: center;
  color: #FFFFFF;
  font-size: 12px;
}


.cont img{
  border-radius: 10px;  
}

.cont img:hover{
  transform: scale(1.5); /* cuánto la agranda */
  z-index: 10;
}

h2{
  margin: auto;
  padding: 5px;
  background-color: #131313a8;
  margin-bottom: 0px;

  font-size: 25px;
  color: #FFFFFF;
  text-shadow: 0px 0px 12px #FF96B2;
  text-align: center;
  font-weight: bold;
}

a{
  display: block;
  text-decoration: none;
  color: #867c72;
  background-color: rgba(255, 249, 248, 0.724);
  padding: 5px;
  font-size: 18px;
  text-align: center;
  margin-bottom: 10px;
  border-radius: 5px;
}

/* mouse over link */
a:hover {
  background-color: #948a82;
  color: #f6f0eb;
  text-decoration: none;
}