:root {
  --bg:#111;
  --bd:#4b4b4b;
}

body {
  font-family:serif;
  font-size:1.4rem;
  color:#aaa;
  background:#111;
}

main {
  margin:auto;
  padding:1rem;
  width:700px;
  max-width:90%;
}

header {
  padding:1rem 0;
}

.card {
  margin:1rem 0;
  padding:1rem;
  border:1px solid var(--bd);
}

.card h2 {
  margin:0 0 1rem;
  font-size:1.75rem;
}

.card date {
  font-size:1.25rem;
}

.stats {
  margin:1rem 0;
  padding:0;
  list-style-type:none;
}

.stats b {
  display:inline-block;
  margin:0;
  padding:0 5px;
  background-color:#222;;
}

.safe { color:#6ad36a; }
.questionable { color:#c2ae57; }
.explicit { color:#c25f47; }

.blurb {
  margin:1rem 0;
  padding-left:1rem;
  border-left:2px solid var(--bd);
}

.title {
  font-style:italic;
}

.note {
  margin:1rem 0;
  padding:1.5rem 1rem 1rem;
  font-family:sans-serif;
  font-size:1rem;
  border:1px solid var(--bd);
}

.note::before {
  content:"author's note";
  position:absolute;
  margin-top:-30px;
  padding:0 5px;
  background-color:#111;
  border:1px dotted var(--bd);
}

.story {
  margin-top:2rem;
}

hr {
  text-align:center;
  line-height:3px;
  height:1px;
  margin:2.5rem 0;
  border-color:var(--bd);
}

hr:before, hr:after {
  content:'☀︎';
  font-size:2rem;
  color:orange;
  position:absolute;
}

footer {
  margin:2rem 0;
  padding-top:1rem;
  border-top:1px solid var(--bd);
}

a {
  color:#a7c94b;
}

a:hover {
  text-decoration:none;
}