:root {
   --sidebar-width: 270px;
   --header-height: 150px;
   --button-width: calc((100% - var(--sidebar-width))/3);
}
body {
   margin: 0;
   min-width: 1920px;
   overflow-x: auto;
}
.butt {
   margin: 0;
   border: 2px solid gray;
   background-color: lightgray;
   font-size: 1.5em;
   height:300px;
   width: 100%;
   cursor:pointer;
}
.butt:hover {
   background-color: gray;
   color:white;
}
.sidenav {
   height: 100%;
   width: var(--sidebar-width);
   position: fixed;
   z-index:1;
   top:0;
   left:0;
   background-color: darkgreen;
   overflow-x: hidden;
   padding-top:20px;
}
.sidenav a {
   padding:6px 8px 6px 16px;
   text-decoration:none;
   color:#f1f1f1;
   display:block;
   font-size:25px;
}
.sidenav a:hover{
   color:gray;
}
.containerHomePage {
   position: fixed;
   overflow-y: auto;
   grid-template-columns: auto auto auto;
   grid-template-columns: repeat(3, 1fr);
   display: grid;
   margin-left: var(--sidebar-width);
   margin-top: var(--header-height);
   width: calc(100% - var(--sidebar-width));
   height: calc(100% - var(--header-height));
   background-color: azure;
   padding: 10px;
}
.header {
   position: fixed;
   margin-left: var(--sidebar-width);
   width: calc(100% - var(--sidebar-width));
   height: var(--header-height);
   background-color:darkgreen;
   border: 0px;
   padding: 0px;
}
.header p {
   position: absolute;
   margin-top: 2.8%;
   margin-left: 20%;
   text-align: center;
   font-size: 3em;
   color:white;
}

.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}
.active, .collapsible:hover {
  background-color: #ccc;
}
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}