:root, :host {
  --bg:       #303030;
  --bg-topnav: #282828;
  --bg-light: #808080;
  --cyan:   #56b6c2;
  --blue:   #61aeee;
  --violet:   #c678dd;
  --green:   #98c379;
  --light-red:   #e06c75;
  --dark-red: #be5046;
  --dark-yellow:   #d19a66;
  --yellow: #e6c07b;

  --code-bg:  #151515;
  --code-fg:  #abb2bf;
  --code-fg-comment:  #5c6370;
}

@font-face {
    font-family: Nunito;
    src: url(/static/Nunito.ttf);
}

@font-face {
    font-family: "Source Code Pro";
    src: url(/static/SourceCodePro.ttf);
}

html {
	background: var(--bg);
    color: #ffffff;
    font-family: "Nunito", sans-serif;
    font-size: 13pt;
    text-align: justify;
}

body {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    max-width: 60em;
    padding-left: 2em;
    padding-right: 2em;
}

h1 {
	text-align: center;
	text-decoration: underline var(--green) 3px;
	text-underline-offset: 3px;
	text-decoration-style: dotted;
}

h2 {
	text-decoration: underline var(--green) 1px;
	text-underline-offset: 3px;
	text-decoration-style: solid;
}

pre {
    background: var(--code-bg);
	margin-bottom: 20px;
	padding: 6px;
	line-height: 1.3em;
	border: 1px solid var(--bg-light);
    border-radius: 4px;
    overflow: scroll;
    font-family: "Source Code Pro";
    text-align: left;
}

pre::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    background: transparent;
}

code {
    background: var(--code-bg);
	border: 1px solid var(--bg-light);
    padding: 0 0.15em;
    border-radius: 4px;
    font-family: "Source Code Pro";
}

pre > code {
    background: none;
	border: none;
    padding: 0;
}

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.typst-rendered > svg {
	filter: invert(100%);
	margin: auto;
	height: 400%;
	width: auto;
    margin-left: auto;
    margin-right: auto;
}

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

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

ul {
  list-style: none;
}

ul li::before {
  content: "❦ ";
}

math > mrow > mo {
    margin-left: -4px;
}

math > mrow > mo[stretchy="false"] {
    margin-left: 0px;
}

.topnav {
  overflow: hidden;
  background-color: var(--bg-topnav);
  padding-left: 1em;
  padding-right: 1em;
  margin-left: -2em;
  margin-right: -2em;
  font-size: 24px;
}

.topnav-left {
  float: left;
}

.topnav-right {
  float: right;
}

.topnav a {
  float: left;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.topnav a:hover {
  background-color: var(--green);
  color: var(--bg);
}

/* syntax highlighting */
.hljs {
  color: var(--code-fg);
}

.hljs-comment,
.hljs-quote {
  color: var(--code-fg-comment);
  font-style: italic;
}

.hljs-doctag,
.hljs-keyword,
.hljs-formula {
  color: var(--violet);
}

.hljs-section,
.hljs-name,
.hljs-selector-tag,
.hljs-deletion,
.hljs-subst {
  color: var(--light-red);
}

.hljs-literal {
  color: var(--cyan);
}

.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta .hljs-string {
  color: var(--green);
}

.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-type,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-number {
  color: var(--dark-yellow);
}

.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-title {
  color: var(--blue);
}

.hljs-built_in,
.hljs-title.class_,
.hljs-class .hljs-title {
  color: var(--yellow);
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

.hljs-link {
  text-decoration: underline;
}