body {
  margin: 0;
  padding: var(--padding);
}

main {
  display: block;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
  margin: 0;
}

a {
  background-color: transparent;
}

b, strong {
  font-weight: bolder;
}

code, kbd, samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

img {
  border-style: none;
}

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 90%;
  margin: 0;
}

textarea {
  overflow: auto;
}

[type="checkbox"], [type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

[hidden] {
  display: none;
}

:root {
  --padding: 12px;
  --padding-small: 6px;
  --menu-padding: 8px;
  --text-height: 24px;
  --nav-height: 48px;
  --menu-width: 256px;
}

.only-light { display: inline-block; }
.only-dark { display: none; }
.mode-light { --border: 1px solid #dddddd; --link-text-decoration: none; --color-foreground: #000000; --color-foreground-muted: #777777; --color-background: #ffffff; --color-background-muted: #e1ede4; --color-link-foreground: #416049; --color-link-visited-foreground: #2d4032; --color-nav-foreground: #000000; --color-nav-background: #6ca67c; --color-menu-foreground: #000000; --color-menu-selected-foreground: #000000; --color-menu-background: #a6c9af; --color-menu-selected-background: #6ca67c; --color-modal-backdrop: rgba(77, 77, 77, .7); --color-success: #008000; --color-error: #ff0000;}
.mode-light .only-light { display: inline-block; }
.mode-light .only-dark { display: none; }
@media (prefers-color-scheme: light) {
  :root { --border: 1px solid #dddddd; --link-text-decoration: none; --color-foreground: #000000; --color-foreground-muted: #777777; --color-background: #ffffff; --color-background-muted: #e1ede4; --color-link-foreground: #416049; --color-link-visited-foreground: #2d4032; --color-nav-foreground: #000000; --color-nav-background: #6ca67c; --color-menu-foreground: #000000; --color-menu-selected-foreground: #000000; --color-menu-background: #a6c9af; --color-menu-selected-background: #6ca67c; --color-modal-backdrop: rgba(77, 77, 77, .7); --color-success: #008000; --color-error: #ff0000;}
}

.mode-dark { --border: 1px solid #666666; --link-text-decoration: none; --color-foreground: #ffffff; --color-foreground-muted: #777777; --color-background: #121212; --color-background-muted: #0e2c18; --color-link-foreground: #6b8c73; --color-link-visited-foreground: #9bb1a0; --color-nav-foreground: #ffffff; --color-nav-background: #074623; --color-menu-foreground: #eeeeee; --color-menu-selected-foreground: #ffffff; --color-menu-background: #0e2c18; --color-menu-selected-background: #074623; --color-modal-backdrop: rgba(33, 33, 33, .7); --color-success: #008000; --color-error: #ff0000;}
.mode-dark .only-light { display: none; }
.mode-dark .only-dark { display: inline-block; }
@media (prefers-color-scheme: dark) {
  :root { --border: 1px solid #666666; --link-text-decoration: none; --color-foreground: #ffffff; --color-foreground-muted: #777777; --color-background: #121212; --color-background-muted: #0e2c18; --color-link-foreground: #6b8c73; --color-link-visited-foreground: #9bb1a0; --color-nav-foreground: #ffffff; --color-nav-background: #074623; --color-menu-foreground: #eeeeee; --color-menu-selected-foreground: #ffffff; --color-menu-background: #0e2c18; --color-menu-selected-background: #074623; --color-modal-backdrop: rgba(33, 33, 33, .7); --color-success: #008000; --color-error: #ff0000;}
}

@media (prefers-color-scheme: dark) {
  .only-light { display: none; }
  .only-dark { display: inline-block; }
  .mode-light .only-light { display: none; }
  .mode-light .only-dark { display: inline-block; }
  .mode-dark .only-light { display: inline-block; }
  .mode-dark .only-dark { display: none; }
}

/* light chroma */
.chroma { --chroma-fg: #272822; --chroma-bg: #fafafa; --chroma-highlight-bg: #e1e1e1; --chroma-keyword: #00a8c8; --chroma-namespace: #f92672; --chroma-line-numbers: #7f7f7f; --chroma-comment: #75715e; --chroma-literal: #ae81ff; --chroma-literal-string: #d88200; --chroma-literal-escape: #8045ff; --chroma-name: #111111; --chroma-attribute: #75af00; --chroma-class: #75af00; --chroma-decorator: #75af00; --chroma-exception: #75af00; --chroma-function: #75af00; --chroma-other: #75af00; --chroma-punctuation: #111111; }
.mode-light .chroma { --chroma-fg: #272822; --chroma-bg: #fafafa; --chroma-highlight-bg: #e1e1e1; --chroma-keyword: #00a8c8; --chroma-namespace: #f92672; --chroma-line-numbers: #7f7f7f; --chroma-comment: #75715e; --chroma-literal: #ae81ff; --chroma-literal-string: #d88200; --chroma-literal-escape: #8045ff; --chroma-name: #111111; --chroma-attribute: #75af00; --chroma-class: #75af00; --chroma-decorator: #75af00; --chroma-exception: #75af00; --chroma-function: #75af00; --chroma-other: #75af00; --chroma-punctuation: #111111; }
.mode-dark .chroma { --chroma-fg: #f8f8f2; --chroma-bg: #282a36; --chroma-highlight-bg: #282a36; --chroma-keyword: #ff79c6; --chroma-namespace: #ff79c6; --chroma-line-numbers: #cdcdcd; --chroma-comment: #6272a4; --chroma-literal: #f1fa8c; --chroma-literal-string: #f1fa8c; --chroma-literal-escape: #f1fa8c; --chroma-name: #f8f8f2; --chroma-attribute: #50fa7b; --chroma-class: #50fa7b; --chroma-decorator: #f8f8f2; --chroma-exception: #f8f8f2; --chroma-function: #50fa7b; --chroma-other: #f8f8f2; --chroma-punctuation: #f8f8f2; }


/* dark chroma */
@media (prefers-color-scheme: dark) {
  .chroma { --chroma-fg: #f8f8f2; --chroma-bg: #282a36; --chroma-highlight-bg: #282a36; --chroma-keyword: #ff79c6; --chroma-namespace: #ff79c6; --chroma-line-numbers: #cdcdcd; --chroma-comment: #6272a4; --chroma-literal: #f1fa8c; --chroma-literal-string: #f1fa8c; --chroma-literal-escape: #f1fa8c; --chroma-name: #f8f8f2; --chroma-attribute: #50fa7b; --chroma-class: #50fa7b; --chroma-decorator: #f8f8f2; --chroma-exception: #f8f8f2; --chroma-function: #50fa7b; --chroma-other: #f8f8f2; --chroma-punctuation: #f8f8f2; }
  .mode-light .chroma { --chroma-fg: #272822; --chroma-bg: #fafafa; --chroma-highlight-bg: #e1e1e1; --chroma-keyword: #00a8c8; --chroma-namespace: #f92672; --chroma-line-numbers: #7f7f7f; --chroma-comment: #75715e; --chroma-literal: #ae81ff; --chroma-literal-string: #d88200; --chroma-literal-escape: #8045ff; --chroma-name: #111111; --chroma-attribute: #75af00; --chroma-class: #75af00; --chroma-decorator: #75af00; --chroma-exception: #75af00; --chroma-function: #75af00; --chroma-other: #75af00; --chroma-punctuation: #111111; }
  .mode-dark .chroma { --chroma-fg: #f8f8f2; --chroma-bg: #282a36; --chroma-highlight-bg: #282a36; --chroma-keyword: #ff79c6; --chroma-namespace: #ff79c6; --chroma-line-numbers: #cdcdcd; --chroma-comment: #6272a4; --chroma-literal: #f1fa8c; --chroma-literal-string: #f1fa8c; --chroma-literal-escape: #f1fa8c; --chroma-name: #f8f8f2; --chroma-attribute: #50fa7b; --chroma-class: #50fa7b; --chroma-decorator: #f8f8f2; --chroma-exception: #f8f8f2; --chroma-function: #50fa7b; --chroma-other: #f8f8f2; --chroma-punctuation: #f8f8f2; }
}

html {
  height: 100%;
}

body {
  font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  font-size: 1em;
  margin: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: var(--color-background);
  color: var(--color-foreground);
  height: 100vh;
}

a {
  color: var(--color-link-foreground);
  text-decoration: var(--link-text-decoration);
  text-decoration-skip-ink: all;
}

a:hover {
  text-decoration: underline;
}

a:visited {
  color: var(--color-link-visited-foreground);
}

em {
  color: var(--color-foreground-muted);
}

h1 {
  margin: 0;
}

h2, h3, h4 {
  margin: 0;
}

ul, menu {
  margin: 0;
  padding-left: calc(var(--padding)*2);
}

hr {
  border: none;
  border-top: var(--border);
}

figure {
  margin: 0;
}

input, button, textarea, select {
  border: var(--border);
  color: var(--color-foreground);
  background-color: var(--color-background);
}

button {
  padding: 3px var(--padding-small);
  border-color: var(--color-menu-background);
  cursor: pointer;
}

button:hover {
  border-color: #888888;
}

button:disabled, button[disabled]{
  border-color: #888888;
  background-color: #888888;
  cursor: default;
}

.button-link {
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
  color: var(--color-link-foreground);
  text-decoration: var(--link-text-decoration);
  padding: 0;
  font-family: inherit;
  font-size: inherit;
}

#content {
  margin-top: var(--nav-height);
  margin-left: var(--menu-width);
  transition: margin-left 250ms ease-in-out;
  min-height: calc(100% - var(--nav-height));
}

@media (prefers-reduced-motion) {
  #content {
    transition: none;
  }
}

#content.nomenu {
  margin-left: 0;
}

@media (max-width: 800px) {
  #content {
    margin-left: 0;
  }
}