#container {
  display: grid;
  height: 100vh;
  grid-template-columns: .5fr 1fr 1fr .5fr;
  grid-template-rows: .2fr .2fr 1fr 1fr auto;
  grid-template-areas:
    "nav    nav    nav    nav"
    "sidebar tab    tab    sidebar2a"
    "sidebar main   main   sidebar2a"
    "sidebar main   main   sidebar2b"
    "footer footer footer footer";
  gap: 0.4rem;
}

.nav        { grid-area: nav;       background: #1a1a1a; color: white; padding: 1rem; text-align:center; }
#tab        { grid-area: tab;       background: #00FFFF; }
.main       { grid-area: main;      background: yellow; padding: 1rem; }
#sidebar    { grid-area: sidebar;   background: #800080; color: white; padding: 1rem; }
#sidebar2a  { grid-area: sidebar2a; background: #008000; color: white; padding: 1rem; }
#sidebar2b  { grid-area: sidebar2b; background: #FFA500; color: white; padding: 1rem; }
.footer     { grid-area: footer;    background: purple; color: white; padding: 1rem; text-align:center; }

@media only screen and (max-width: 550px){
  #container{
     grid-template-columns: 1fr;
  grid-template-rows: .2fr .2fr 2.2fr .2fr auto;
  grid-template-areas:
  "nav"
  "tab"
  "main"
  "sidebar"
  "sidebar2a"
  "sidebar2b"
  "footer";
  }
}
/* end of grid work DO NOT TOUCH*/
/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}
.footer{
 grid-area: footer;
 background: purple;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  animation: fadeEffect 1s; /* Fading effect takes 1 second */
}


/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}