@import url('https://fonts.googleapis.com/css2?family=Fira+Mono&family=Prociono&display=swap');

html {
  background: #d8d0b9;
  font-family: "Prociono", serif;
  font-size: 1.4em;
  line-height: 1.75;
  margin: auto;
  max-width: 70ch;
  padding: 3em 1em;
}

h1, h2, h3, h4, h5, h6 {
  color: #4d442a;
  margin: 1em 0 1em;
  text-align: center;
}

h2::before {
  content: "§ ";
}

p {
  text-align: justify;
  text-indent: 2em;
}

p#subtitle {
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  text-indent: 0;
}

footer p {
  font-size: .8em;
  text-align: center;
  text-indent: 0;
}

p, ul, ol {
  color: #6b5f3b;
  margin-bottom: 1em;
}

ul, ol {
  padding-inline-start: 1em;
}

ul {
  list-style-type: none;
}

img {
  border: thin solid black;
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

blockquote {
  background: #c8bc9a;
  border: thin solid black;
  font-style: italic;
  padding: 1rem;
}

blockquote p {
  margin: 0;
}

pre {
  border: thin solid black;
  overflow-x: auto;
  padding: 1rem;
}

code {
  border: thin solid black;
}

pre, code {
  background: #c8bc9a;
  color: #4d442a;
  font-family: "Fira Mono", monospace;
  font-size: .9em;
}

pre code {
  border: none;
}

table {
  width: 100%;
}

table, th, td {
  border: thin solid black;
  border-collapse: collapse;
  padding: .4rem;
}

th {
  background: #b7a87c;
  color: #4d442a;
}

td {
  background: #c8bc9a;
  color: #6b5f3b;
}

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

hr {
  border: 1px solid #6b5f3b;
}

a, a:visited {
  color: #a32211;
}

footer a, footer a:visited {
  color: #6b5f3b;
}

a:hover, footer a:hover {
  color: #4d442a;
}