@import "monaspace.css";
@import "roboto.css";
@import "theme-gitea-light.css" (prefers-color-scheme: light);
@import "theme-gitea-dark.css" (prefers-color-scheme: dark);

:root {
  --fonts-monospace: 'Monaspace Krypton';
  --fonts-proportional: 'Roboto';
  --color-markup-code-block: none;
  --color-input-background: #aaa2;
  --color-button: #dde;
  --color-hover: #d3d3e4;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-button: #146;
    --color-hover: #154A6E;
  }
}
.lines-code.active, .lines-code .active {
  background: #aaa4 !important;
}
.markdown {
	columns: 500px 2;
	column-gap: 1em;
	column-rule: 1px dashed var(--color-secondary);
}
.markdown h1 + p {
	column-span: all;
}
.markup ul,
.markup ol {
	padding-left: 1em;
	break-inside: avoid;
}
.markup ul:has(ul, ol),
.markup ol:has(ul, ol) {
	break-inside: auto;
}
p, li {
  break-inside: avoid;
  word-wrap: break-word;
  hyphens: auto;
  text-align: justify;
}
code, .code-inner {
  hyphens: none;
  text-align: left;
  font-size: inherit !important;
  font-feature-settings: 'calt', 'liga', 'dlig', 'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'ss08';
  font-variation-settings: 'wght' 600, "wdth" 100, "slnt" 0;
  padding: 0 !important;
}
pre {
  break-before: avoid;
  scrollbar-width: none;
}
.markup table { column-span: all; }
.markup table th,
.markup table td {
	border: 0 !important;
}
.markup table tr:nth-child(n) {
	background-color: transparent;
	border: 0;
}
.markup table tbody tr:first-child {
	border-top: 1px dotted var(--color-secondary);
	
}
.markup table tbody tr:last-child {
	border-bottom: 1px dotted var(--color-secondary);
	
}
h3:has(+ table) {
	column-span: all;
}
h1, h2 { column-span: all; break-before: always; }
h1, h3 { color: #000; }
h2 { color: #f80; }
h4, h5, h6 { color: #888; }
@media (prefers-color-scheme: dark) {
	h1, h3 { color: #fff; }
}

h1, h2, h3, h4, h5, h6 {
  --fonts-override: "Monaspace Krypton";
  break-after: avoid;
}
h1 {
  font-variation-settings: 'wght' 800, "wdth" 125, "slnt" 0;
  text-align: center;
}

pre code, .code-inner {
  font-family: "Monaspace Krypton" !important;
}
span.c1 {
  font-family: "Monaspace Krypton" !important;
}
pre.code-block {
  background-color: #aaa2 !important;
  border-radius: 0.4em !important;
  margin: -0.2em -0.2em calc(-0.2em + 16px) -0.2em !important;
  padding: 0.2em 0.2em;
}
code:not(.code-inner) {
  background: transparent;	
}
.markup pre.code-block + button {
	top: -0.5em;
	right: -0.5em;
}