@font-face {
    font-family: "ntbtstf";
    src: url(ntbtstf.otf);
}

* {
  box-sizing: border-box;
}

body {
    font-size: 28px;
    color: white;
    text-align: center;
    background-image: linear-gradient(to right, black, #333333, black);
    margin: 0px;
}


/* The grid container */
.grid-container {
  display: grid;
  grid-template-areas: 
    'header header header header header header header header header' 
    '. . left middle middle middle right . .' 
    '. . left2 middle2 middle2 middle2 right2 . .'
    'footer footer footer footer footer footer footer footer footer';
    grid-gap: 20px;
} 

/* Style the header */
.header {
  grid-area: header;
  color: white;
  font-size: 60px;
  text-shadow: -10px 10px 2px black;
  font-family: ntbtstf, impact, arial;
  background: maroon;
}

.left,
.middle,
.right,
.left2,
.middle2,
.right2 {
  padding: 0px;
  background-color: rgba(0,0,0,0.65);
  border: 2px solid maroon;
  border-radius: 10px;
}

/* Style the left column */
.left {
  grid-area: left;
  font-family: ntbtstf, impact, arial;
}

h3 {
  margin: 0px;
  text-decoration: underline;
}

/* Style the middle column */
.middle {
  grid-area: middle;
}

/* Style the right column */
.right {
  grid-area: right;
}

/* Style the left column */
.left2 {
  grid-area: left2;
}

/* Style the middle column */
.middle2 {
  grid-area: middle2;
}

/* Style the right column */
.right2 {
  grid-area: right2;
}

/* Style the footer */
.footer {
  grid-area: footer;
  font-family: ntbtstf;
  color: black;
  background: url(chevron.avif) repeat-x bottom left;
  -mask-image: linear-gradient(to top, black 5%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, black 5%, transparent 100%);
  padding: 10px;
  text-align: center;
  height: 230px;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .grid-container  {
    grid-template-areas: 
      'header header header header header header' 
      'left left left left left left' 
      'middle middle middle middle middle middle' 
      'right right right right right right'
      'left2 left2 left2 left2 left2 left2' 
      'middle2 middle2 middle2 middle2 middle2 middle2' 
      'right2 right2 right2 right2 right2 right2'
      'footer footer footer footer footer footer';
  }
}