body {
  margin: 0;
  padding: 0;
  color: white;
}
#container {
  background: radial-gradient(rgb(29, 55, 78), rgb(31, 93, 117));
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-areas:
    "header header header header"
    "nav nav nav nav"
    "left main main right "
    "footer footer footer footer";
}
header {
  /* height: 150px; */
  grid-area: header;
  display: grid;
  grid-template-columns: auto auto;
}
nav {
  grid-area: nav;
  background-color: rgb(88, 189, 219);
  color: black;
  display: flex;
  justify-content: center;
}
nav ul {
  list-style: none;
  display: flex;
  gap: 25px;
}
nav ul li a {
  color: black;
  text-decoration: none;
  transition: 0.3s;
}
nav ul li {
  padding-right: 15px;
  border-right: 1px solid rgb(31, 93, 117);
}
nav ul li:last-child {
  border-right: 0;
}
nav ul li a:hover {
  color: white;
}
#left {
  /* width: 20%; */
  grid-area: left;
  padding: 30px;
}
main {
  /* width: 60%; */
  grid-area: main;
  padding: 100px;
}
#right {
  /* width: 20%; */
  grid-area: right;
  padding: 30px;
}
footer {
  grid-area: footer;
  background-color: rgb(90, 90, 90);
}
footer p {
  margin: 0;
}