@import "colors-dark.css" (prefers-color-scheme: dark);
@import "colors-light.css" (prefers-color-scheme: light);

h1,
h2,
h3,
h4,
h5 {
  color: var(--fg);
  font-family: "Verdana", sans-serif;
}

b,
strong {
  color: var(--fg);
}

a {
  color: var(--fg);
}

html {
  color: var(--fg);
  font-family: "Georgia", serif;
  font-size: 1.1em;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: var(--bg-contrast);
}

body {
  width: 800px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.site-title {
  font-size: 2.5em;
  margin-bottom: 10px;
  /* text-align: center; */
}

nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: left;
  font-size: 1.2em;
  margin-bottom: 20px;
}

.block {
  border: 2px dashed var(--fg);
  text-align: justify;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

.block h1 {
  font-size: 1em;
  font-weight: bold;
  margin: 0;
  padding: 5px;
}

.block p {
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 5px;
}

.block.warning {
  border: 2px dashed var(--light-yellow);
}

.block.warning h1 {
  color: var(--bg);
  background-color: var(--light-yellow);
  border-bottom: 2px dashed var(--light-yellow);
  text-transform: uppercase;
}

.block.info {
  border: 2px dashed var(--light-blue);
}

.block.info h1 {
  color: var(--bg);
  background-color: var(--dark-blue);
  border-bottom: 2px dashed var(--dark-blue);
}

.small {
  font-size: 0.8em;
}

.word-count {
  margin-bottom: 10px;
  color: var(--light-gray);
}

.wave {
  background: var(--bg);
  color: var(--fg);
  text-shadow:
    1px 1px 10px var(--fg),
    1px 1px 10px var(--bg);
}

footer {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

footer hr {
  width: 100%;
}

pre {
  background: var(--bg);
  overflow: auto;
  border-top: 1px solid var(--fg);
  border-bottom: 1px solid var(--fg);
  padding: 10px 5px;
}

/* Make lists closer to their top parent */
ul {
  margin-top: 0;
}

details > summary {
  list-style-type: "+";
  cursor: pointer;
}

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

details {
  padding: 0.5rem;
}

summary::marker {
  font-size: 1rem;
  text-transform: full-width;
}

code {
  background-color: var(--bg);
  tab-size: 4;
}

.select-all code {
  user-select: all;
}

/* ol { */
  /* list-style-type: cjk-ideographic; */
/* } */

ul li::marker {
  content: "一 ";
  font-weight: bold;
}

ul ul li::marker {
  content: "二 ";
}

ul ul ul li::marker {
  content: "三 ";
}