* {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--basic-bg);
  color: var(--basic-fg);
  font-family: "游ゴシック", sans-serif;
  margin: 0;
  overflow-wrap: break-word;
}

article,
figcaption,
figure,
form,
h1,
h2,
h3,
ol,
p,
pre,
table,
ul {
  margin-top: 1em;
}

table {
  border-collapse: collapse;
}

:where(th, td) {
  border: 1px solid var(--table-border-color);
  padding: 0.5rem 1rem;
}

th {
  background-color: var(--table-header-bg);
}

:where(ol, ul) {
  padding-inline-start: 40px;
}
  li > :where(ol, ul) {
    margin-top: calc(var(--clickable-height) - 1em);
  }

li + li {
  margin-top: calc(var(--clickable-height) - 1em);
}

blockquote {
  background-color: var(--box-bg);
  border-left: 0.3em solid #ddd;
  padding-left: 0.5em;
}

pre {
  background-color: #333;
  color: #fff;
  padding: 0.4em;
}
  pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
  }

:where(:link, :visited) {
  color: var(--link-fg);
}
  :where(:link, :visited):hover {
    color: var(--link-hover-fg);
  }

code {
  font-family: var(--code-font);
  background-color: var(--code-bg);
  border-radius: 0.2em;
  color: var(--code-fg);
  padding: 0 0.5em;
}
  :link:hover code {
    color: var(--link-hover-fg);
  }