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: 160px 160px 160px 160px 160px;
    grid-template-rows: 160px 30px 160px 160px 160px 160px 160px 160px 30px;
  gap: 4px;
  grid-template-areas: 
  'header header header header header'
  'nav nav nav nav nav'
  'picture general general general side'
  'likes general general general side'
  'likes favorites favorites favorites webring'
  'likes favorites favorites favorites posts'
  'feed feed image image posts'
  'feed feed image image posts'
  'footer footer footer footer footer';
}

#header {
  grid-area: header;
  padding: 10px;
  border: 2px solid #334c59;
  text-align: center;
  background-color: #dfe5e6;
  background-image: url('https://syserror404.neocities.org/pictures/luxbg.jpg');
  background-size: cover;
  background-position: top;
}

#nav {
  grid-area: nav;
  text-align: center;
  padding: 5px;
  border: 2px solid #334c59;
  background-color: #dfe5e6;
  background-image: url('https://syserror404.neocities.org/pictures/luxbg.jpg');
  background-size: cover;
  background-position: center;
  display: grid;
    grid-template-columns: 160px 160px 160px 160px 160px;
    grid-template-rows: 30px;
    grid-template-areas: 
    '. . links bar rss';
}

#links {
  grid-area: links;
}

#rss {
  grid-area: rss;
}

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

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

#likes {
  grid-area: likes;
  border: 2px solid #334c59;
  padding: 10px;
  background-color: #dfe5e6;
  text-align: center;
}

#favorites {
  grid-area: favorites;
  border: 2px solid #334c59;
  padding: 10px;
  background-color: #dfe5e6;
  text-align: center;
}

#side {
  grid-area: side;
  overflow-y: auto;
  border: 2px solid #334c59;
  padding: 10px;
  text-align: center;
  background-color: #dfe5e6;
}

#webring {
  grid-area: webring;
  border: 2px solid #334c59;
  padding: 10px;
  text-align: center;
  background-color: #dfe5e6;
}

#posts {
  grid-area: posts;
  overflow-y: auto;
  border: 2px solid #334c59;
  padding: 10px;
  text-align: center;
  background-color: #dfe5e6;
}

#feed {
  grid-area: feed;
  height: 300px;
  overflow: scroll;
  border: 2px solid #334c59;
  padding: 10px;
  background-color: #dfe5e6;
}

#image {
  grid-area: image;
}

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