.grid-container {
    display: grid;
    grid-template-columns: 200px 200 px 200 px 200px;
    
  }



.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header'
    'herbert herbert herbert herbert'
    'left leftmiddle rightmiddle right'
    'footer footer footer footer';

  gap: 10px;
  background-color: rgba(0, 255, 26, 0.767);
  padding: 10px; font-family: "Eater"; 
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.7);
  text-align: center;
  padding: 20px 0;
}
body{
  background-image: url(herbie\ background.jpg);
  padding: 100px; background-repeat: no-repeat; background-size: cover; 
}
.eater-regular {
  font-family: "Eater", serif;
  font-weight: 400;
  font-style: normal;
}
.metal-mania-regular {
  font-family: "Metal Mania", system-ui;
  font-weight: 400;
  font-style: normal;
}
.header { grid-area: header; font-size: 30pt; font-family: "Metal Mania";}
.herbert { grid-area: herbert;}
.left { grid-area: left; }
.right { grid-area: right; }
.leftmiddle { grid-area: leftmiddle; }
.rightmiddle { grid-area: rightmiddle; }
.footer { grid-area: footer; }