body{
  background-color: black;
}

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

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


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

.columnaderecha{
  grid-area: derecha;
  background: #1c1c1c;
  padding: 10px;
  border-radius: 8px;
  text-align: center;
}

.columnaizquierda{
  grid-area: izquierda;
  background: #1c1c1c00;
  border-radius: 8px;
}

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

.log a{
  text-decoration: none;
  color: #c79ba7;
}

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

  display: grid;
  grid-template-areas: "cont1 cont2"
                       "cont3 cont3";
  grid-template-columns: 50% 50%;
  grid-template-rows: 40% 60%;
  gap: 15px;
  padding: 15px;
  justify-content: center;
}

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

.Box1{
  background-color: #1c1c1c;
  grid-area: box1;
  padding: 10px;
  border-radius: 8px;
}

.Box2{
  background-color: #1c1c1c;
  grid-area: box2;
  color: #D3D3D3;
  font-size: 12px;
  border-radius: 8px;
  place-items: center;
  letter-spacing: 2px;
  height: fit-content;
}


.Box3{
  background-color: #1c1c1c;
  grid-area: box3;
  padding: 10px;
  border-radius: 8px;
}

.Box4{
  background-color: #1c1c1c;
  grid-area: box4;
  padding: 10px;
  border-radius: 8px;
}

.cont1{
  grid-area: cont1;
  background-color: rgb(49, 48, 48);
  background-image: url('/assets/images/bg/bg01.jpg');
  background-size: contain;
  background-position: center;
  background-repeat: repeat-x;
  padding: 0px;
  overflow-y: auto;
}

.cont1 li{
  list-style-image: url('/assets/images/list01.gif');
  margin-left: 5px;
  color:#c1c1c1;
  font-size: 12px;
  letter-spacing: 2px;
  line-height: 15px;
}

.cont2{
  grid-area: cont2;
  background-color: rgb(255, 255, 255);
  border-image: url(/assets/images/lace1.png) 40 fill / 30px /
    20px round;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cont2 a:link{
  background-color: #ffffff;
  text-decoration: none;
  margin: auto;
  padding: 0%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cont3{
  grid-area: cont3;
  background-color: rgb(0, 0, 0);
  display: flex;
  margin: 5px;
  border:#FF96B2 3px solid;
  border-radius: 5px;
  align-items: center;
  justify-content: center;
}

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;
}

.columnaizquierda a{
  display: block;
  text-decoration: none;
  color: #33202c;
  background-color: pink;
  padding: 5px;
  font-size: 16px;
  text-align: center;
  margin-bottom: 10px;
  border-radius: 5px;
}

/* mouse over link */
.columnaizquierda a:hover {
  background-color: #251d22;
  color: #c699a8;
  text-decoration: none;
}