body {
  margin: 0;
  padding: 0;
  border: none;
  font-size:15px;
  font-family: Helvetica;
}

h1 {
  font-family:Copperplate,sans-serif;
  font-size:2.6em;
  font-weight:normal;
  margin:30px 0;
  padding:0;
  text-align:center;
  color:#000;
}

h1 a {
  text-decoration: none;
}

h2 {
  font-family:Copperplate,sans-serif;
  font-weight: normal;
  font-size: 2em;
}

.wrapper {
  background-color:#699;
  color:#fff;
  display: grid;
  grid-column-gap: 60px;
  grid-template-columns: 1fr auto auto 1fr;
  grid-template-areas:
    ". posts links .";
  justify-items: center;
}

@media(max-width: 700px) {
  .wrapper {
    justify-items: baseline;
    grid-column-gap: 10px;
    grid-template-areas:
      ". links links ."
      ". posts posts .";
  }
}

aside { grid-area: links; }
main { grid-area: posts; }

.links {
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
}
.links dt { display: none; }
.links dd { margin: 0; }

.posts {
  list-style-type: none;
  margin: 0;
  padding: 0;
  max-width: 800px;
}
.posts li {
  background-color: rgba(255,255,255,0.3);
  border: 1px solid rgba(0,0,0,0.3);
  display: block;
  padding: 0.5em;
  margin: 1em 0;
}
.posts time {
  color: rgba(255,255,255,0.9);
  font-size: 0.9em;
}


/* @media(min-width:800px) {
} */

a{ color:#000; }
a:hover{ text-decoration:none; }