:root {
  color-scheme: light dark;
  /* gruvbox colors https://github.com/morhetz/gruvbox */
  --bg-color: light-dark(#f9f5d7, #282828);
  --text-color: light-dark(#427b58, #8ec07c);
  --subtext-color: light-dark(#928374, #928374);
}

html {
  font-family: sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
}

.newsarticle {
  display: grid;
  grid-template-columns: auto auto auto;
  border: 1px solid var(--text-color);
  margin: 1em 20em;
  padding: 1em;
}
.newsarticle div.header {
  grid-row: 1;
  color: var(--subtext-color);
  font-size: .8706em;
}

.newsarticle h2 {
  grid-row: 2;
  grid-column: 1 / 4;
  margin: 0.5em 0 0 0;
}

.newsarticle div.content {
  grid-row: 3;
  grid-column: 1 / 4;
}