h1, h2, h3, h4, h5, h6, p, li, br {
  font-weight: normal;
  margin: 0;
  /* text-shadow: 1px 1px 0 var(--color-text-shadow); */
  line-height: 1.5rem;
}

h1, h2, h3, h4, h5, h6 {
  margin-block: 1.5rem;
  padding-inline: 1ch;
  font-size: 1rem;
  background-color: var(--color-text);
  color: var(--color-bg);
}

h3, h4, h5, h6 {
  margin-block: 0;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  display: block;
  margin-inline: -1ch;
  padding-inline: 1ch;
  background-color: var(--color-accent);
  color: var(--color-bg);
}

a.noblock {
  display: inline;
  margin-inline: 0;
  padding-block: 0.25rem;
}

p {
  margin-inline: 2ch;
  margin-block: 1.5rem;
}

p.nomargin {
  margin-block: unset;
}

ul {
  margin: 0;
  padding-inline-start: 4ch;
  list-style-type: "- ";
}

ul li {
  margin-block: 1.5rem;
}

details > summary {
  list-style-type: '► ';
}

details[open] > summary {
  list-style-type: '▼ ';
}

summary > h1, summary > h2, summary > h3, summary > h4, summary > h5, summary > h6 {
  display: inline-block;
}

section {
  margin-block: 1.5em;
  margin-inline-start: 2ch;
}

img {
  vertical-align: middle;
  background-color: #fff8;
}

a {
  color: var(--color-accent);
  text-decoration: underline solid currentColor 1px;
}

code {
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  font: inherit;
  background-color: var(--color-code);
  padding-inline: 1ch;
  color: var(--color-code-text);
  user-select: all;
  word-break: break-word;
  overflow: auto;
  vertical-align: top;
}

button, input, textarea, select {
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 0;
  line-height: 1.5rem;
  resize: none;
}

select {
  height: 1.5rem;
}

:focus {
  outline: 1ch solid var(--color-text);
}

input[type=text], input[type=url], textarea, select {
  padding-inline: 1ch;
  border-inline: 1ch solid var(--color-accent);
  background-color: var(--color-bg-scrim);
}

button, input[type=submit] {
  padding-inline: 1ch;
  background-color: var(--color-accent);
  color: var(--color-bg);
  cursor: pointer;
}

button:active, input[type=submit]:active {
  background-color: transparent;
  color: var(--color-accent);
}

marquee {
  vertical-align: top;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

progress {
  border: none;
  border-radius: 0;
  border-inline: 1ch solid var(--color-text);
  background-color: var(--color-bg-scrim);
  height: 1.5rem;
  vertical-align: top;
}
progress::-webkit-progress-bar {
  border: none;
  border-radius: 0;
  border-inline: 1ch solid var(--color-text);
  background-color: var(--color-bg-scrim);
}
progress::-webkit-progress-value {
  background-color: var(--color-accent);
}
progress::-moz-progress-bar {
  background-color: var(--color-accent);
}