/* good practice to set the margin to 0 within body */
body {
  margin: opx;
}

.container {
  display: grid;
  grid-template:
    "header header header" 50px
    "left-menu main right-menu" 1fr
    "footer footer footer" 50px /
    200px 1fr 200px;

  height: 100vh;
}

.header {
  grid-area: header;
  background-color: rgba(255, 255, 0, 0.781);
}

.left-menu {
  grid-area: left-menu;
  background-color: rgba(255, 0, 0, 0.781);
}

.main {
  grid-area: main;
  background-color: rgba(0, 255, 64, 0.781);
}

.right-menu {
  grid-area: right-menu;
  background-color: rgba(111, 0, 255, 0.781);
}

.footer {
  grid-area: footer;
  background-color: rgba(0, 47, 255, 0.781);
}