@font-face { font-family: "Guttman Yad-Brush"; src: local("Guttman Yad-Brush"), url("../images/GYADBR.TTF") format("truetype"); }
grid-container { display: grid; grid-template: "side1 header side2" 50px "side1 main side2" calc(100% - 80px) "side1 footer side2" 26px / 1fr 360px 1fr; gap: 2px; height: 100%; width: 100%; background-color: gold; }
grid-item { display: block; margin: 0px; border-radius: 7px; height: 100%; width: 100%; overflow: auto; word-break: break-word; background-color: rgb(255, 255, 255); }
grid-item.main { grid-area: main; }
grid-item.header { grid-area: header; }
grid-item.header header { text-align: center; font-family: "Guttman Yad-Brush"; font-size: 30px; font-weight: bold; 
font-style: italic; letter-spacing: 10px; line-height: 50px; 
text-shadow: rgb(128, 128, 128) -1px -1px 2px ,rgb(0, 255, 0) 1px 1px 2px , rgb(0, 0, 255) 2px 2px 3px; }
grid-item.footer { grid-area: footer; text-align: center; }
grid-item.side1 { grid-area: side1; display: flex; align-items: center; justify-content: center; }
grid-item.side2 { grid-area: side2; display: flex; align-items: center; justify-content: center; background-image: url("../images/histograma.png"); background-attachment: local; background-repeat: no-repeat; background-position: center top; background-size: 50%; }
grid-item.side1 img, grid-item.side2 img { width: 100%; max-width: 400px; }
@media screen and (max-width: 365px) {
  grid-container { grid-template: "side1 header side2" 45px "side1 main side2" calc(100% - 84px) "side1 footer side2" 35px / 1fr 360px 1fr; gap: 2px 0px; }
  grid-item.header { }
  nav { margin-top: 3px; }
  grid-item.side1, grid-item.side2 { display: none; }
}