@import "https://fonts.googleapis.com/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400&family=Hepta+Slab:wght@300;600&family=Inter:wght@400;700&display=swap";@import "https://unpkg.com/prismjs@1.20.0/themes/prism-okaidia.css";

:root {
  --border-radius-eased: 2px;
  --border-radius-small: 0.5rem;
  --border-radius-medium: 1rem;
  --border-radius-large: 2rem;

  --border-thickness-thin: 1px;
  --border-thickness-medium: 2px;

  --color-accent: hsl(86, 64%, 65%);
  --color-background-native: white;
  --color-background-base: rgb(43, 11, 29);
  --color-background-accent: hsl(271.8, 27.4%, 24.3%);
  --color-text-base: rgb(240, 232, 232);
  --color-text-native: black;

  --font-display: "Hepta Slab", Georgia, serif;
  --font-code: "Anonymous Pro", Monaco, "Courier New", monospace;
  --font-body: Inter, Verdana, sans-serif;
  --font-native: serif;

  --font-size-small: 0.75rem;
  --font-size-medium: 1rem;
  --font-size-medium-large: 1.25rem;
  --font-size-large: 2em;

  --grid-width-margin: 2rem;
  --grid-width-main: 5fr;
  --grid-width-crossover: 2fr;
  --grid-width-aside: 3fr;

  --spacing-qsp: 0.25em;
  --spacing-small: 0.5rem;
  --spacing-medium: 1rem;
  --spacing-large: 2rem;
  --spacing-huge: 4rem;

  --page-background: var(--color-background-base);
  --page-text-color: var(--color-text-base);

  --box-shadow-dark: 0 2px black;

  --scene-background: var(--color-background-native);
  --scene-border-thickness: var(--border-thickness-medium);
  --scene-border-style: solid;
  --scene-border-color: var(--color-background-accent);
  --scene-border: var(--scene-border-thickness) var(--scene-border-style)
    var(--scene-border-color);
  --scene-border-radius: var(--border-radius-small);
  --scene-font: var(--font-native);
  --scene-padding-inline: var(--spacing-large);
  --scene-text-color: var(--color-text-native);
}
body {
  margin: 0;
}
kram-main {
  --page-grid-template: [header-start callout-start] var(--grid-width-aside)
    [main] var(--grid-width-crossover) [callout-end] var(--grid-width-main)
    [aside] var(--grid-width-aside) [aside-end header-end];

  display: grid;
  grid-template-columns:
    [start] var(--grid-width-margin) var(--page-grid-template)
    var(--grid-width-margin) [end];
  gap: 0 var(--spacing-medium);
  background: var(--page-background);
  color: var(--page-text-color);
  font-family: var(--font-body);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
}
kram-flow {
  display: grid;
  grid-column: start / end;
  grid-row-start: 2;
  grid-template-columns:
    [start] var(--grid-width-margin) var(--page-grid-template)
    var(--grid-width-margin) [end];
  /* grid-template-columns: subgrid; */
  column-gap: var(--spacing-medium);
  overflow-y: scroll;
  overflow-x: hidden;
}
kram-code {
  display: block;
  white-space: pre;
  font-family: var(--font-code);
}
kram-code code[class*="language-"],
kram-code pre[class*="language-"] {
  font-family: inherit; /* don't use prism theme's font */
}
kram-code > pre[class*="language-"] {
  border-bottom: var(--border-thickness-medium) solid var(--color-accent);
}
kram-code:not([slot]) > pre[class*="language-"] {
  background: var(--color-background-accent);
  margin-block: 0;
  border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
  box-shadow: var(--box-shadow-dark);
  padding: var(--spacing-medium);
}
kram-code[slot] > pre[class*="language-"] {
  background: none;
  padding: var(--spacing-medium) 0;
  margin-block: 0;
  border-radius: 0;
}
kram-scene > * {
  box-sizing: border-box;
  margin: 0;
}
kram-scene > :is(p, ul, ol, dl) {
  grid-column: main / span 2;
  line-height: 1.5;
}
kram-scene > :is(p, ul, ol, dl) + :is(p, blockquote) {
  margin-block-start: var(--spacing-medium);
}
kram-scene > :is(ul, ol, dl) {
  margin-inline-start: var(--spacing-large);
}
kram-scene > blockquote {
  grid-column: callout-start / callout-end;
}
kram-scene > blockquote + :is(p, ul, ol, kram-code) {
  grid-column-start: callout-end;
  margin-block-start: var(--spacing-medium);
}
kram-scene > aside {
  grid-column: aside / end;
}
kram-scene > kram-code + aside {
  grid-column: callout-start / main;
  align-self: end;
  margin-block-end: var(--spacing-medium);
}
kram-scene > :is(blockquote, aside) {
  font-family: var(--font-display);
  padding: var(--spacing-medium);
  color: inherit;
  border: var(--border-thickness-medium) solid var(--color-background-accent);
  border-radius: var(--border-radius-medium);
  box-shadow: var(--box-shadow-dark);
  text-align: center;
  height: fit-content;
}
kram-scene > kram-code:not([slot]) {
  grid-column: main / span 3;
  margin-block: var(--spacing-medium);
}
kram-scene > kram-code + kram-code:not([slot]),
kram-scene > kram-code + :is(aside, blockquote) + kram-code:not([slot]) {
  margin-block-start: 0;
}
kram-scene > :is(p, ul, ol, dl, blockquote, aside) :is(tt, code, kbd, samp) {
  font-family: var(--font-code);
  color: var(--color-accent);
  background-color: var(--color-background-accent);
  background: var(--color-background-accent);
  border-radius: var(--border-radius-eased);
}
kram-scene > :is(p, ul, ol, dl, blockquote, aside) a {
  color: var(--color-accent);
  background: var(--color-background-accent);
  border-radius: var(--border-radius-eased);
}
kram-toc {
  color: var(--color-accent);
  font-family: var(--font-display);
}
kram-toc > :not([slot]) {
  background: var(--color-background-accent);
  padding: var(--spacing-small);
  border: var(--border-thickness-thin) solid currentColor;
  border-radius: var(--border-radius-small);
}
kram-toc > :not([slot]) > li {
  margin-left: 3ch;
}