:root,
:root[data-force-color-mode="light"] {
  --main-bg-color: white;
  --main-text-color: black;
  --knowledge-link-text-color: rgb(41, 91, 110);
  --knowledge-content-text-color: black;
  --knowledge-content-background-color: rgb(222, 222, 222);
  --knowledge-content-border-color: black;
  --knowledge-content-shadow-color: #888888;
  --image-invert-amount: 0.13;
}

@media (prefers-color-scheme: dark) {
  :root {
    --main-bg-color: rgb(30, 30, 30);
    --main-text-color: rgb(220, 220, 220);
    --knowledge-link-text-color: rgb(200, 91, 110);
    --knowledge-content-text-color: rgb(220, 220, 220);
    --knowledge-content-background-color: rgb(80, 80, 80);
    --knowledge-content-border-color: white;
    --knowledge-content-shadow-color: rgb(20, 20, 20);
    --image-invert-amount: 0.68;
  }
}

:root[data-force-color-mode="dark"] {
  --main-bg-color: rgb(30, 30, 30);
  --main-text-color: rgb(220, 220, 220);
  --knowledge-link-text-color: rgb(200, 91, 110);
  --knowledge-content-text-color: rgb(220, 220, 220);
  --knowledge-content-background-color: rgb(80, 80, 80);
  --knowledge-content-border-color: white;
  --knowledge-content-shadow-color: rgb(20, 20, 20);
  --image-invert-amount: 0.68;
}

@font-face {
  font-family: "Latin Modern Roman";
  src: url("/static/fonts/LMRoman10-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
}

body {
  color: var(--main-text-color);
  background-color: var(--main-bg-color);
  font-family: "Latin Modern Roman", serif;
  font-size: 150%;
  line-height: 1.45;
}

math[display="block"] {
  box-sizing: border-box;
  display: block;
  margin: 1em 0;
  padding: 1em;
  text-align: center;
}

img {
  filter: invert(var(--image-invert-amount));
}

a {
  color: green;
  text-decoration: none;
}

pre {
  box-sizing: border-box;
  overflow-x: auto;
  color: var(--knowledge-content-text-color);
  background-color: color-mix(in srgb, var(--knowledge-content-background-color) 72%, var(--main-bg-color));
  border: 1px solid color-mix(in srgb, var(--main-text-color) 38%, transparent);
  border-radius: 6px;
  margin: 1.25em 0;
  padding: 0.85em 1em;
}

code {
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  font-size: 0.78em;
}

p code,
li code {
  color: var(--knowledge-content-text-color);
  background-color: color-mix(in srgb, var(--knowledge-content-background-color) 68%, transparent);
  border-radius: 4px;
  padding: 0.08em 0.24em;
}

pre code {
  display: block;
  font-size: 0.82em;
  line-height: 1.45;
  white-space: pre;
}

.quality-list {
  padding-left: 1.25em;
}

.quality-list li {
  margin: 0.45em 0;
}

.coverage-map-area {
  border-top: 1px solid color-mix(in srgb, var(--main-text-color) 35%, transparent);
  margin-top: 2.2em;
  padding-top: 1.2em;
}

.coverage-map-area h2 {
  margin-bottom: 0.2em;
}

.coverage-map-covered {
  list-style-type: "✓ ";
}

.coverage-map-open {
  list-style-type: "○ ";
}

.proof-coverage-list {
  margin: 1em 0;
}

.proof-coverage-detail {
  margin: 0.45em 0;
}

.proof-coverage-detail summary {
  cursor: pointer;
  display: block;
}

.proof-coverage-detail summary::marker {
  content: "";
}

.proof-coverage-detail summary::-webkit-details-marker {
  display: none;
}

.proof-coverage-title {
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.proof-coverage-detail ul {
  margin-top: 0.45em;
}

.quality-coverage {
  display: inline-block;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 0.72em;
  line-height: 1.1;
  margin-left: 0.55em;
  padding: 0.16em 0.38em 0.2em;
}

.quality-low {
  color: rgb(214, 68, 68);
}

.quality-medium {
  color: rgb(214, 153, 68);
}

.quality-high {
  color: rgb(72, 150, 90);
}

.contribution-callout {
  border: 2px solid var(--main-text-color);
  border-radius: 8px;
  font-size: 1.18em;
  margin: 2em 0;
  padding: 0.9em 1em;
  text-align: center;
}

.contribution-callout a {
  font-weight: bold;
}

.knowledge-link,
.rlink {
  color: var(--knowledge-link-text-color);
  cursor: pointer;
}

.expanded-knowledge {
  margin: 1.5em 0;
}

.boxed {
  border: 1px solid var(--main-text-color);
}

.thin-wrapper {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 2rem;
}

#topbar {
  margin: 1.5em 0 2em;
  text-align: center;
}

#topbar h1 {
  font-size: 1.5em;
  font-weight: normal;
  margin: 0;
}

.align {
  margin: 2em auto;
}

.centered-content {
  display: block;
  text-align: center;
  margin: 2em;
}

.centered-content > div {
  margin: 1em;
}

.line-with-centered-text {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 0.5em 0;
}

.line-with-centered-text::before,
.line-with-centered-text::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--main-text-color);
}

.line-with-centered-text:not(:empty)::before {
  margin-right: 0.25em;
}

.line-with-centered-text:not(:empty)::after {
  margin-left: 0.25em;
}

.line-with-centered-text button {
  color: var(--main-text-color);
  background-color: transparent;
  border: 1px solid var(--main-text-color);
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
  line-height: 1.1;
  padding: 0.25em 0.6em 0.3em;
}

.line-with-centered-text button:hover {
  background-color: color-mix(in srgb, var(--main-text-color) 12%, transparent);
}

.definition,
.lemma,
.theorem,
.corollary,
.proposition,
.exercise,
.proof {
  display: block;
  color: var(--knowledge-content-text-color);
  border-radius: 10px;
  background-color: var(--knowledge-content-background-color);
  box-shadow: 5px 10px 8px var(--knowledge-content-shadow-color);
  margin-top: 4em;
  margin-bottom: 4em;
  border: 2px solid var(--knowledge-content-border-color);
}

.definition > .title,
.lemma > .title,
.theorem > .title,
.corollary > .title,
.proposition > .title,
.exercise > .title,
.proof > .title {
  display: block;
  color: white;
  border-radius: 8px 8px 0 0;
  padding: 8px 15px;
  font-style: normal;
}

.definition > .content,
.lemma > .content,
.theorem > .content,
.corollary > .content,
.proposition > .content,
.exercise > .content,
.proof > .content {
  padding: 15px;
}

.new-proof > .content {
  padding: 15px;
}

.definition > .title::before {
  content: "Definition: ";
}

.definition > .title {
  background-color: rgb(38, 38, 134);
}

.theorem > .title::before {
  content: "Theorem: ";
}

.theorem > .title {
  background-color: rgb(38, 134, 38);
}

.proposition > .title::before {
  content: "Proposition: ";
}

.proposition > .title {
  background-color: rgb(38, 134, 134);
}

.lemma > .title::before {
  content: "Lemma: ";
}

.lemma > .title {
  background-color: rgb(134, 38, 38);
}

.corollary > .title::before {
  content: "Corollary: ";
}

.corollary > .title {
  background-color: rgb(134, 34, 134);
}

.proof > .title::before {
  content: "Proof";
}

.proof > .title {
  background-color: black;
}

.exercise > .title::before {
  content: "Exercise: ";
}

.exercise > .title {
  background-color: grey;
}

@keyframes scale-in {
  from {
    transform: scale(0);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.opened-knowledge {
  animation: scale-in 0.2s linear;
  transform-origin: 0 50%;
}

#topbar a {
  color: inherit;
}

#topbar math {
  font-size: 1.3em;
}
.knowledge-copy-link {
  float: right;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
  font-size: 0.75em;
  line-height: 1;
  margin-left: 0.75em;
  opacity: 0.72;
  padding: 0.18em 0.42em 0.22em;
}

.knowledge-copy-link:hover,
.knowledge-copy-link:focus-visible,
.knowledge-copy-link[data-copied="true"] {
  opacity: 1;
  background-color: color-mix(in srgb, currentColor 18%, transparent);
}