body {
  background-image: url("clouds.gif");
  background-repeat: repeat;
  height: 100vh;
  width: 100%;
  color: #24435C;
  font-family: fantasy;
}

.main {
  display: grid;
  grid-template-areas:
  "header header header"
  "sidebar_left middle sidebar_right"
  "sidebar_left middle sidebar_right"
  "footer footer footer";
  justify-content: center;
}

.main > * > div {
  border: 5px solid steelblue;
  border-radius: 10px;
  background: white;
  margin: 5px 2px;
} 

.main > * > * {
  padding-left: 10px;
}
 
.header {
  text-align: center;
  padding-top: 35px;
}

.sidebar_left {
  grid-area: sidebar_left;
  width: 15rem;
}

.middle {
  grid-area: middle;
  width: 35rem;
}

.sidebar_right {
  grid-area: sidebar_right;
  width: 15rem;
}

.footer {
  grid-area: footer;
  text-align: center;
}