:root {
  --background: #2d2d2d;
  --foreground: #d3d0c8;
  --decoration: #747369;
  --link-underline: #cd98cd;
  --link-fancy: #ffcd5d;
  --background-alt: #353535;
  --fontset: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
    Bitstream Vera Sans Mono, Courier New, monospace, serif;
}

html {
  font-size: 16px;
  background-color: #222222;
}

body {
  margin: auto;
  max-width: 80ch;
  font-size: 1rem;
  line-height: 1.6;
  font-family: var(--fontset);
  color: var(--foreground);
  background-color: var(--background);
  padding: 1rem;
}

code {
  background-color: #454545;
  padding: 0 0.25ch;
  padding-top: 0.5ch;
  border: 1px solid var(--decoration);
}

strong {
  text-decoration: underline;
}

h1,
h2,
h3 {
  font-weight: bold;
  font-size: 1em;
  margin-bottom: 0;
}

h1.site-title {
  margin-top: 0;
  font-size: 2em;
  line-height: 1;
}

h1.post-title {
  padding-top: 0.5em;
}

h1:not(.site-title):not(.post-title) {
  font-size: 1.25em;
  text-decoration: underline;
  /* border-bottom: 4px solid var(--foreground); */
  /*border-top: 4px solid var(--foreground);*/
}


h2 {
  /* border-bottom: 2px solid var(--foreground); */
  font-size: 1.25em;
}

h1:not(.site-title):not(.post-title)::before {
  content: "# ";
  color: var(--decoration);
}

h2::before {
  content: "## ";
  color: var(--decoration);
}

h3::before {
  content: "### ";
  color: var(--decoration);
}

a {
  text-decoration: none;
  border-bottom: 1px solid var(--link-underline);
  color: var(--foreground);
}

a:not(.internal)::after {
  content: " " url("/link.svg");
}

a.show-url::after {
  content: " [" attr(href) "]" url("/link.svg");
  color: var(--link-fancy);
}

.site-title a {
  border-bottom: none;
}

.site-title a::after {
  content: "";
}

nav {
  margin-bottom: 2em;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline;
}

nav a {
  color: var(--link-fancy);
}

nav a.internal {
  margin-right: 1ch;
}

div.table-wrapper {
  overflow-x: auto;
}

div.table-wrapper table {
  border-collapse: collapse;
  border: 2px solid;
}

div.table-wrapper table,
th,
td {
  padding: 0.5em;
}

div.table-wrapper th {
  border-bottom: 2px solid var(--foreground);
}

div.table-wrapper td {
  border: 1px solid var(--foreground);
}

div.table-wrapper table tr td:first-child {
  border-left: 0;
}

div.table-wrapper table tr td:last-child {
  border-right: 0;
}

div.table-wrapper table tr:last-child td {
  border-bottom: 0;
}

div.table-wrapper tr:nth-child(even) {
  background-color: var(--background-alt);
}

#toc-toggle {
  border: none;
  font-family: var(--fontset);
  font-size: 1rem;
  line-height: 1.6;
  background-color: var(--foreground);
  color: var(--background);
  padding: 0 0.5em;
  margin: 0;
  float: right;
  cursor: pointer;
}

#toc {
  border: 1px solid var(--decoration);
}

#toc ol {
  counter-reset: item;
  list-style-type: none;
}

#toc li {
  display: block;
  color: var(--decoration);
}

#toc li:before {
  content: counters(item, ".") " ";
  counter-increment: item;
}

h1.post-title {
  font-size: 1.5em;
  border: none;
  line-height: 1;
  margin: 0;
}

li p.post-date {
border-bottom: none;
}

p.post-date {
  color: var(--decoration);
  margin: 0;
  border-bottom: 1px solid var(--decoration);
}

p.post-desc {
  margin-top: 0;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.flex * {
  margin-left: 1em;
  margin-right: 1em;
}