body {
  background-color: #b3c6c7;
}

a {
  color: black;
}

.container {
  width: 820px;
  margin: auto;
  background-color: #334c59;
  border: 3px solid #334c59;
  padding: 25px;
  display: grid;
    grid-template-columns: repeat(10, 78px);
    grid-template-rows: 160px 30px 600px 30px;
    gap: 4px;
    grid-template-areas: 
      'header header header header header header header header header header'
      'nav nav nav nav nav nav nav nav nav nav'
      'body body body body body body body body body body'
      'footer footer footer footer footer footer footer footer footer footer';
}

.box {
  border: 2px solid #334c59;
  padding: 10px;
  background-color: #dfe5e6;
}

#header {
  grid-area: header;
  text-align: center;
  background-image: url('https://syserror404.neocities.org/pictures/luxbg.jpg');
  background-size: cover;
  background-position: top;
}

#nav {
  grid-area: nav;
  padding: 5px;
  text-align: center;
  background-image: url('https://syserror404.neocities.org/pictures/luxbg.jpg');
  background-size: cover;
  background-position: center;
}

#body {
  grid-area: body;
  overflow-y: scroll;
  padding: 30px;
}

#footer {
  grid-area: footer;
  padding: 5px;
  border: 2px solid #334c59;
  background-color: #dfe5e6;
}