*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  text-align: center;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 20px;
  display: flex;
  justify-content: center;
}
main {
  border: 2px solid black;
  width: fit-content;
  display: grid;
  padding: 10px;
  background-color: #b4e41e;
  grid-template:
    60px 30px 330px 60px /
    110px 330px;
  row-gap: 10px;
  column-gap: 10px;
}
header {
  border: 2px solid black;
  background-color: #23b14d;
  grid-row: 1 / 2;
  grid-column: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.topNavigation {
  border: 2px solid black;
  background-color: #98d9ec;
  grid-row: 2 / 3;
  grid-column: 1 / 3;
}
.sideNavigation {
  border: 2px solid black;
  background-color: #3f47cc;
  padding: 10px;
}
.content {
  border: 2px solid black;
  background-color: #a349a3;
  padding: 10px;
}

footer {
  border: 2px solid black;
  background-color: #ff7f26;
  grid-row: 4 / 5;
  grid-column: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}