@import url("./block-manip.css");

:root {
  --normal-font-weight: 400;
  --code-font-weight: 500;
  --bold-font-weight: 600;
  --header-font-weight: 700;
}

@font-face {
  font-family: "Recursive";
  src: url("../fonts/Recursive.woff2") format("woff2-variations");
  font-weight: 300 1000;
  text-rendering: optimizeLegibility;
  font-style: normal;
}

body.deck {
  font-size: 40px;
  color: var(--foreground-color);
  font-family: "Recursive", sans-serif;
  font-variation-settings:
    "MONO" 0,
    "CASL" var(--casl);
  font-weight: var(--normal-font-weight);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

body.handout,
body.page,
body.index {
  font-size: 16px;
  color: var(--foreground-color);
  font-family: "Recursive", sans-serif;
  font-variation-settings:
    "MONO" 0,
    "CASL" var(--casl);
  font-weight: var(--normal-font-weight);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Inline code */
code {
  font-size: 100%;
  color: var(--foreground-color);
  font-family: "Recursive", monospace;
  font-variation-settings:
    "MONO" 1,
    "CASL" var(--casl);
  font-weight: var(--code-font-weight);
  caret-color: var(--shade7);
  padding: 0.2em;
}

/* Bold Sstuff*/
strong {
  font-weight: var(--bold-font-weight);
}

summary {
  font-weight: var(--bold-font-weight);
}

th {
  font-weight: var(--bold-font-weight);
}

/* Code blocks. */
:is(span.pre, pre)>code {
  display: block;
  font-size: 100%;
  line-height: 1.3;
  padding: 0.5em;
}

:is(span.pre, pre)>code[contenteditable]:focus {
  outline: solid 10px var(--accent7);
}

div.media {
  margin: var(--vertical-margin) 0;
}

/* Headers */
h1,
h1.title {
  font-size: 130%;
  font-weight: var(--header-font-weight);
}

body.deck h1 {
  font-size: 150%;
  font-weight: var(--header-font-weight);
}

h2 {
  font-size: 120%;
  font-weight: var(--header-font-weight);
}

h3 {
  font-size: 110%;
  font-weight: var(--header-font-weight);
}

section.inverse :is(h1, h2) {
  color: var(--shade1);
}

/* Links */
a,
a:visited,
a:active {
  color: var(--accent5);
}

a:hover {
  background-color: var(--accent5-bbg);
}

/* Spans */
a:hover,
span:is(.accent0,
  .accent1,
  .accent2,
  .accent3,
  .accent4,
  .accent5,
  .accent6,
  .accent7) {
  border-radius: calc(var(--block-border-radius) / 1);
  padding-left: 0.2em;
  padding-right: 0.2em;
  margin-left: -0.2em;
  margin-right: -0.2em;
}

/* Highlight colors and borders. We need three colors for each highlight state:
text, background and border. */
div.block.accent0 {
  background-color: var(--accent0-bbg);
  border: var(--block-border-width) solid var(--accent0);
}

div.block.accent0 h2 {
  color: var(--shade1);
  background-color: var(--accent0);
}

span.accent0 {
  background-color: var(--accent0);
  color: var(--shade0);
}

span.accent0.fg {
  background-color: var(--shade0);
  color: var(--accent0);
}

div.block.accent1 {
  background-color: var(--accent1-bbg);
  border: var(--block-border-width) solid var(--accent1);
}

div.block.accent1 h2 {
  color: var(--shad01);
  background-color: var(--accent1);
}

span.accent1 {
  background-color: var(--accent1);
  color: var(--shade0);
}

span.accent1.fg {
  background-color: var(--shade0);
  color: var(--accent1);
}

div.block.accent2 {
  background-color: var(--accent2-bbg);
  border: var(--block-border-width) solid var(--accent2);
}

div.block.accent2 h2 {
  color: var(--shad01);
  background-color: var(--accent2);
}

span.accent2 {
  background-color: var(--accent2);
  color: var(--shade0);
}

span.accent2.fg {
  background-color: var(--shade0);
  color: var(--accent2);
}

div.block.accent3 {
  background-color: var(--accent3-bbg);
  border: var(--block-border-width) solid var(--accent3);
}

div.block.accent3 h2 {
  color: var(--shad01);
  background-color: var(--accent3);
}

span.accent3 {
  background-color: var(--accent3);
  color: var(--shade0);
}

span.accent3.fg {
  background-color: var(--shade0);
  color: var(--accent3);
}

div.block.accent4 {
  background-color: var(--accent4-bbg);
  border: var(--block-border-width) solid var(--accent4);
}

div.block.accent4 h2 {
  color: var(--shad01);
  background-color: var(--accent4);
}

span.accent4 {
  background-color: var(--accent4);
  color: var(--shade0);
}

span.accent4.fg {
  background-color: var(--shade0);
  color: var(--accent4);
}

div.block.accent5 {
  background-color: var(--accent5-bbg);
  border: var(--block-border-width) solid var(--accent5);
}

div.block.accent5 h2 {
  color: var(--shad01);
  background-color: var(--accent5);
}

span.accent5 {
  background-color: var(--accent5);
  color: var(--shade0);
}

span.accent5.fg {
  background-color: var(--shade0);
  color: var(--accent5);
}

div.block.accent6 {
  background-color: var(--accent6-bbg);
  border: var(--block-border-width) solid var(--accent6);
}

div.block.accent6 h2 {
  color: var(--shad01);
  background-color: var(--accent6);
}

span.accent6 {
  background-color: var(--accent6);
  color: var(--shade0);
}

span.accent6.fg {
  background-color: var(--shade0);
  color: var(--accent6);
}

div.block.accent7 {
  background-color: var(--accent7-bbg);
  border: var(--block-border-width) solid var(--accent7);
}

div.block.accent7 h2 {
  color: var(--shade1);
  background-color: var(--accent7);
}

span.accent7 {
  background-color: var(--accent7);
  color: var(--shade0);
}

span.accent7.fg {
  background-color: var(--shade0);
  color: var(--accent7);
}

/* More styling */

section .figure :is(img, svg, pre, span.pre, video, iframe, object) {
  border-radius: var(--block-border-radius);
  border: solid var(--shade2) 0.01em;
}

section.inverse .figure :is(img, svg, pre, span.pre, video, iframe, object) {
  border: solid var(--shade5) 0.01em;
}

/* Overwrite Pandoc's syntax highlighting CSS with palette colors */
pre>code.sourceCode {
  white-space: pre;
}

pre>code.sourceCode>span {
  display: inline-block;
  line-height: 1.25;
}

pre>code.sourceCode>span:empty {
  height: 1.2em;
}

.sourceCode {
  overflow: visible;
}

code.sourceCode>span {
  color: inherit;
  text-decoration: inherit;
}

div.sourceCode {
  margin: 1em 0;
}

pre.sourceCode {
  margin: 0;
}

@media screen {
  div.sourceCode {
    overflow: auto;
  }
}

@media print {
  pre>code.sourceCode {
    white-space: pre-wrap;
  }

  pre>code.sourceCode>span {
    text-indent: -5em;
    padding-left: 5em;
  }
}

pre.numberSource code {
  counter-reset: source-line 0;
}

pre.numberSource code>span {
  position: relative;
  left: -4em;
  counter-increment: source-line;
}

pre.numberSource code>span>a:first-child::before {
  content: counter(source-line);
  position: relative;
  left: -1em;
  text-align: right;
  vertical-align: baseline;
  border: none;
  display: inline-block;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 0 4px;
  width: 4em;
}

pre.numberSource {
  margin-left: 3em;
  padding-left: 4px;
}

div.sourceCode {
  color: var(--shade7);
  background-color: var(--code-background-color);
}

@media screen {
  pre>code.sourceCode>span>a:first-child::before {
    text-decoration: underline;
  }
}

code span.al {
  color: var(--accent0);
}

/* Alert */
code span.an {
  color: var(--accent4);
  font-weight: var(--bold-font-weight);
}

/* Annotation */
code span.at {}

/* Attribute */
code span.bn {
  color: var(--accent2);
}

/* BaseN */
code span.bu {}

/* BuiltIn */
code span.cf {
  color: var(--accent5);
}

/* ControlFlow */
code span.ch {
  color: var(--accent3);
}

/* Char */
code span.cn {
  color: var(--accent1);
  font-weight: var(--bold-font-weight);
}

/* Constant */
code span.co {
  color: var(--shade5);
}

/* Comment */
code span.cv {
  color: var(--shade5);
  font-weight: var(--bold-font-weight);
}

/* CommentVar */
code span.do {
  color: var(--shade5);
}

/* Documentation */
code span.dt {
  color: var(--accent2);
}

/* DataType */
code span.dv {
  color: var(--accent2);
}

/* DecVal */
code span.er {
  color: var(--accent7);
}

/* Error */
code span.ex {}

/* Extension */
code span.fl {
  color: var(--accent1);
}

/* Float */
code span.fu {
  color: var(--accent2);
}

/* Function */
code span.im {}

/* Import */
code span.in {
  color: var(--accent3);
  font-weight: var(--bold-font-weight);
}

/* Information */
code span.kw {
  color: var(--accent5);
  font-weight: var(--bold-font-weight);
}

/* Keyword */
code span.op {
  color: var(--accent5);
}

/* Operator */
code span.ot {}

/* Other */
code span.pp {
  color: var(--accent1);
  font-weight: var(--bold-font-weight);
}

/* Preprocessor */
code span.sc {
  color: var(--accent0);
}

/* SpecialChar */
code span.ss {
  color: var(--accent0);
}

/* SpecialString */
code span.st {
  color: var(--accent3);
}

/* String */
code span.va {}

/* Variable */
code span.vs {
  color: var(--accent2);
}

/* VerbatimString */
code span.wa {
  color: var(--accent1);
  font-weight: var(--bold-font-weight);
}

/* Warning */
input {
  accent-color: var(--accent3);
}

/* Task list entries */
li.task-yes input[type="checkbox"],
li.task-no input[type="checkbox"] {
  font-size: 100%;
  height: 0.8em;
  width: 0.8em;
  vertical-align: baseline;
  padding: 0;
  margin-bottom: 0;
}

/* Some additional colors */
:root {
  /* primary colors */
  --red: #ff0000;
  --green: #00ff00;
  --blue: #0000ff;
  --black: #000000;
  --block-outset: 1rem;
}

/* Colors for the grid templates */
@media (prefers-color-scheme: light) {
  :root {
    --canvas: color(from var(--light-shade0) srgb calc(r * 1.05) calc(g * 1.05) calc(b * 1.05));
    --grid: var(--light-shade2);
  }

  :root.dark {
    --canvas: color(from var(--dark-shade0) srgb calc(r * 0.8) calc(g * 0.8) calc(b * 0.8));
    --grid: var(--dark-shade2);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: color(from var(--dark-shade0) srgb calc(r * 0.8) calc(g * 0.8) calc(b * 0.8));
    --grid: var(--dark-shade2);
  }

  :root.light {
    --canvas: color(from var(--light-shade0) srgb calc(r * 1.05) calc(g * 1.05) calc(b * 1.05));
    --grid: var(--light-shade2);
  }
}

/* Override some of Pandoc's defaults. */
code span.dt {
  text-decoration: none;
}

/* Promary RGB color stuff*/
span.red.bg {
  color: var(--shade0);
  background-color: var(--red);
}

span.green.bg {
  color: var(--shade7);
  background-color: var(--green);
}

span.blue.bg {
  color: var(--shade1);
  background-color: var(--blue);
}

span.black.bg {
  color: var(--shade1);
  background-color: var(--black);
}

span.red {
  color: var(--red);
}

span.green {
  color: var(--green);
}

span.blue {
  color: var(--blue);
}

span:is(.red, .green, .blue, .black) {
  border-radius: calc(var(--block-border-radius) / 1);
  padding-left: 0.2em;
  padding-right: 0.2em;
  margin-left: -0.2em;
  margin-right: -0.2em;
}

span.document-path {
  display: block;
  position: fixed;
  left: 0;
  bottom: 0;
  font-weight: 200;
  font-size: 50%;
  color: var(--shade2);
}
