.grid-container {
  display: grid;
/*1 column and 1 row inside apostrophe's*/
  grid-template-areas:
    '. main .';
  gap: 10px;
  background-color: #333333;
  padding: 10px;/*outside padding*/
  justify-content: center;
}

.grid-container > div {
  background-color: #f1f1f1;
  color:#000;
  padding: 0px;/*inside padding*/
  font-size: 40px;
  text-align: center;
  justify-content: center;
}

/*Container with no gap for top elements.
 3 columns and 2 rows.
 Items span 3 columns.*/
.grid-container_no_gap {
  display: grid;
  grid-template-areas:
    'header header header'
    'menu menu menu';  
  gap: 0px;
  background-color: #333333;
  padding: 0px;/*outside padding*/
}

.grid-container_no_gap > div {
  background-color: #f1f1f1;
  color:#000;
  padding: 0px;/*inside padding*/
  font-size: 40px;
  text-align: center;
}

/*Navigation bar*/
.topnav {
  overflow: hidden;
  background-color: #000000;
}

.topnav a {
  float: right;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 20px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #D2000A;
  color: white;
}

.item1 { grid-area: header; 
}

.item2 { grid-area: menu; }

.item3 { 
   grid-area: main;
   width: 100%;
 
   padding: 0px;
   overflow: hidden;
}

.item4 { grid-area: right;
   width: 100%; 
 
}

.item5 { grid-area: footer; 
   width: 100%;

}

/* Edit or add properties to this to fit.
  Had to reduce width from 1200px to 900px when moved from header to external stylesheet. */
.img{ 
   width: 900px;
}

/*Fill image into container*/

.fill {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.fill img {
    min-width: 100%;
    min-height: 100%
    object-fit: cover;
}