/* Grid */
body {
  display: grid;
  grid-template-columns: 2fr 4fr 4fr;
  max-width: 80%;
  margin: 0 auto;
  font-family: "Ubuntu variable", Verdana, Helvetica, Arial;
}

body > header, body > footer {
  grid-column-start: 1;
  grid-column-end: 4;
}

/* Body */
body {
  background-color: #D2BF80;
}
a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}


/* Site header */
body > header {
  text-align: center;
}


/* Navbar */
body > nav {
  background-color: #683e18;
}
body > nav > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
body > nav > ul > li {
  margin: 10px;
}
body > nav > ul > li > a {
  color: #000000;
}
body > nav > ul > li > a:hover {
  color: #FFFFFF;
}

/* Main */
body > main > article {
  background-color: #A26430;
  padding: 10px;
  margin: 10px;
}
body > main > article > h2 {
  text-align: center;
}
body > main > article a {
  color: #FFFFFF;
}

/* Aside */
body > aside section#microposts {
  background-color: #BEAB6B;
}
body > aside > section#microposts > article {
  font-size: 10px;
  display: grid;
  grid-template-columns: 2fr 8fr;
}
body > aside > section#microposts > article > h3 {
  font-size: 10px;
  margin-right: 10px;
}
body > aside > section#microposts > article > h3 > a {
  color: #000000;
  font-size: 10px;
}
body > aside > section#microposts > article > h3 > a:hover {
  color: #FFFFFF;
}

/* Page Footer */
body > footer {
  text-align: right;
}