body { background-color: #333333;}

* {
  margin: 0;
  box-sizing: border-box;
  /*min-width: 500px; COMMENTED OUT.
  Can combine min-width property with @media rule to "scale up" entire page size.
  Think of the body tag here as another outer container.*/
}

/*Outer container centers everything.*/
.container {
   display: flex;
   margin: auto;
   justify-content: center;
}

.grid-container {
  display: grid;
/*3 columns and 3 rows inside apostrophe's*/
  grid-template-areas:
    'header header header'
    'menu menu menu'
    'main right footer';
  gap: 5px;
  background-color: #333333;
  padding: 20px;/*This is gray padding OUTSIDE div*/
  justify-content: center;
  max-width:1200px;
}

.grid-container > div {
  background-color: #333333;/*#f1f1f1;*/
  color:#000;
  padding: 0px;/*This is padding INSIDE div*/
/*Hack if no other image-fill options work:
  Reduce font-size to 2px so image height fills container.
   If text instead of image, increase font size.*/
  font-size: 40px;
  text-align: center;
  justify-content: 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;
  /*width: 920px;
  height: 73px;*/
}

.item2 { grid-area: menu; }

.item3 { 
   grid-area: main;
   width: 300px;
   height: 300px;
  /* padding: 0px;
   overflow: hidden; COMMENTED OUT*/
}

.item4 { grid-area: right;
   width: 300px; 
   height: 300px; 
}

.item5 { grid-area: footer; 
   width: 300px;
   height: 300px; 
}

/* Edit or add properties to this to fit. */
.img{ 
   width: 85%;
}

/*Fill container with image.
These fill classes work, so no need for the
font/fill hack shown above.*/
.fill {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.fill img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

.grid-container {
  display: grid;
/*1 columns and 5 rows inside apostrophe's*/
  grid-template-areas:
    'header'
    'menu'
    'main' 
    'right' 
    'footer';
  gap: 10px;
  background-color: #333333;
  padding: 10px;
  justify-content: center;
   }/*grid-container close*/


.img_smallscreen { 

   width: 100%;
}



/*Centers image in single-column rows*/
.grid-container > div {
   margin: auto;
}

/*Shrinks to fit small screen*/
.item1 { grid-area: header;
    margin: auto; 
    width: 100%;
    height: auto;
    align-items: normal;
}/*item1 close*/


.item2 { grid-area: menu;
    margin: auto; 
    width:100%;

}


}


}
</style>