* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* The grid container */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas: 
    'header header header header header header' 
    'left left middle middle right right' 
    'footer footer footer footer footer footer';
  column-gap: 10px; 
  background-color: #FFD700;
  /* grid-template-columns: width: 2fr 1fr 1fr; */
} 

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other 
@media (max-width: 400px) {
  .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' 
      'footer footer footer footer footer footer';
  }
}
*/
/* Style the header */
.header {
  grid-area: header;
  min-width: 960px;
  background-color: #FFD700 /*#cfb41a*/;
  /* padding: 30px; */
  text-align: center;
  /* font-size: 35px; */
  
  height:20em;
  width: 100%;

  img {
    height: 100%;
    width: 100%;
    object-fit: none;
   }
}



.left,
.middle,
.right {
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

/* Style the left column */
.left {
  grid-area: left;
  background-color:#00a2ed;
  align-items: center;
  justify-content: center;
}

/* Style the middle column */
.middle {
  grid-area: middle;
  background-color:#FFD700;
  
  text-align: center;

  img {
    height: 100%;
    width: 100%;
    object-fit: none;
   }
}

/* Style the right column */
.right {
  grid-area: right;
  background-color:#00a2ed;
  }

/* Style the footer */
.footer {
  grid-area: footer;
  background-color: #FFD700; 
  display: block;
  border: black;
  padding: 10px;
  text-align: center;
  min-width: 960px;

/*
background-image: url(../images/SmallBusinessComputerGuys-logos_transparent.png) no-repeat scroll center top;
background-color: #f50a0a;*/

/*  background:  url("images/Small Business Computer Guys-logos_transparent.png") no-repeat scroll center top;

 

img {

  display: block;
  margin-left: auto;
  margin-right: auto;
}

 height: 200px;
 width: 200px;

*/

}