:root {
  --bg: hsl(0 0 100);
  --text: hsl(0 0 20);
  --muted: hsl(0 0 60);
  --primary: hsl(240 60 45);
  --info: hsl(180 60 30);
  --success: hsl(120 40 30);
  --warning: hsl(60 70 30);
  --danger: hsl(0 60 45);
  --code-bg: hsl(0 0 90);
}

* {
  margin: 0;
  font-family: Monospace;
}

.verso {
  background-color: var(--bg);
  color: var(--text);
  padding: 1ch;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Blocks */
.verso .h1,
.verso .h2,
.verso .h3,
.verso .h4,
.verso .h5,
.verso .h6 {
  font-weight: bold;
  color: var(--warning);
}
.verso .p {}
.verso .blockquote {
  color: var(--muted);
}
.verso .blockquote .line {}
.verso .ul,
.verso .ol {
}
.verso .li {}
.verso .pre {}
.verso .hr {
  color: var(--muted);
}
.verso .table {
  display: block;
  margin-bottom: -1lh;
  background-color: var(--code-bg);
}
.verso .reference {
  color: var(--muted);
}

/* Inline */
.verso .strong {

  color: var(--danger);
}
.verso .em {
  font-style: italic;
}
.verso .del {
  color: var(--muted);
  text-decoration: line-through;
}
.verso .pre {
  display: block;
  margin-bottom: -1lh;
  background-color: var(--code-bg);
  color: var(--success);
}
.verso .code {
  color: var(--success);
  background-color: var(--code-bg);
}
.verso a {
  color: var(--primary);
  text-decoration: none;
}
.verso a:hover {
  text-decoration: underline;
}
.verso .img {
  color: var(--info);
}

.verso ::selection {
  background-color: var(--primary);
  color: var(--bg);
}

.verso a:focus-visible {
  outline: 1px solid var(--muted);
}

@media (max-width: 600px) {
  .verso {
    padding: 1ch;
  }
}