* {
    scrollbar-width: thin;
    scrollbar-color: pink;
}

.container{
  display:grid;
  grid-template-columns: 1fr 1 fr 1fr 1fr;
  gap: 5px;
  background-color: #2196F3;
  padding: 5px;
  grid-template-rows: 0.2fr 1.5fr 1.2 fr 0.8fr;
  grid-template-areas: 
  "nav nav nav nav"
  "sidebar main main main"
  "sidebar content1 content2 content3"
  "sidebar footer footer footer";
  grid-gap: 0.2rem;
  
}

.container > nav{
  background: #89ffff;
  grid-area: nav;
}


.container > main{
  background: #84ffff;
  grid-area: main;
}
#sidebar{
  background: #18ffff;
  grid-area: sidebar
}
#content1{
  background: #d0f2f2;
  grid-area:content1;
}

#content2{
  background: #83c7c7;
  grid-area:content2;

}

#content3{
  background: #59a8a8;
  grid-area:content3;

}

footer{
  background: #0e6666;
  grid-area:footer;
}

@media only screen and (max-width: 550px) {
  .container{
    grid-template-columns: 1fr;
    grid-template-rows: 0.4 fr 0.4fr 2.2 fr 1.2fr 1.2fr 1.2fr 1fr;
    grid-template-areas:
    "nav"
    "sidebar"
    "main"
    "content1"
    "content2"
    "content3"
    "footer";
  }
  
   body {
  background-color: white;
  color: black;
  font-family: Verdana;
}

}