html {
  --accent: color(display-p3 0.98898 0.54605 0.24681);
  --gray: #aaa;
  --text: #fff;
}
body {
  -webkit-font-smoothing: antialiased;
  font-family: OutputSans2, system-ui;
  background: #333;
  color: var(--text);
  margin: .5rem 1.5rem;
  
  display: grid;
  grid-template-columns: 25em 2fr;
  grid-template-rows: auto 1fr;
  gap: .5rem 2rem;
}
h2 {
  font-family: PixelFont17;
  font-weight: 400;
  margin: 1rem 0 1rem;
}
a {
  color: var(--accent);
  text-decoration: none;
  
  &:hover {
    color: var(--text);
  }
}

table {
  border-collapse: collapse;
  width: 100%;
  
  td {
    padding-top: .15em;
    padding-bottom: .15em;
  }
}


.stats {
  grid-column: 1;
  grid-row: 1;
  
  th {
    color: var(--gray);
    font-weight: 400;
    text-align: right;
    vertical-align: bottom;
    white-space: nowrap;
  }
  th:first-of-type {
    text-align: left;
  }
  td {
    text-align: right;
    width: 5em;
  }
}
.og-images {
  grid-column: 2;
  grid-row: 1 / span 2;
  
  .og-card {
    display: inline-block;
    margin: .5rem;
  }
  img {
    width: 350px;
    display: block;
  }
  .word-count {
    color: var(--gray);
    margin-top: .4rem;
    display: block;
  }
}
.tag-list {
  grid-column: 1;
  grid-row: 2;
  table {  
    .count {
      color: var(--text);
      text-align: right;
    }
    .date {
      text-align: right;
      color: var(--gray);
    }
  }
}

.sentiment.pos { color: #6c6; }
.sentiment.neu { color: var(--gray); }
.sentiment.neg { color: #e66; }

@font-face {
  font-family: OutputSans2;
  src: url(../_unsung/OutputSans2Beta-Regular.woff2) format('woff2');
}
@font-face {
  font-family: PixelFont17;
  src: url(../_unsung/PixelFontUniversity17.woff2?v5) format("woff2");
}