body
  {
    margin-left: 250px;
    margin-right: 250px;
    /* margin: 50px; */
    /* padding: 10px; */
    font-size: 15px;
  }

.item1
  {
    grid-area: header;
    overflow: hidden;    
  }
  
.logo-img
  {
    float: left;
    position: relative;
    
  }
 
/* Navigation */
    nav
      {
        float: left;
        margin: 0;
        overflow:hidden;
        text-align: center;
        margin: 10px 15px 15px 10px;
      }
    ul
      {
        list-style-type: none;
        margin: 10px 15px 15px 10px;
        overflow: hidden;
        

        /* background-color: #333; */
      }
    
    li
      {
        float: left;
        margin: 10px 15px 15px 10px;

      }
    
    li a
      {
        display: block;
        color: darkred;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        margin: 35px 15px 15px 10px;
      }
    
    .active {
        background-color: #2196F3; /* #2196F3   #4CAF50*/
    }

/* Change the link color to #111 (black) on hover */
li a:hover {
    background-color: #2196F3;
}
.item2
  {
    grid-area: menu;
    
  }
.item3
  {
    grid-area: main;
    
  }
.item4
  {
    grid-area: right;
    
  }
.item5
  {
    grid-area: footer;
  }
.grid-container
  {
    display: grid;
    grid-template-areas:
      'header header header header header header'
      'menu main main main right right'
      'menu footer footer footer footer footer';
    grid-gap: 10px;
    background-color: #2196F3; /* #2196F3 light blue*/
    padding: 10px;
  }
.grid-container > div
  {
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 10px 0;
    font-size: 30px;
  }