@import "tailwindcss";

:root {
  --bg-color: #fcfcfc;
  --text-color: #5c6166;
  --link-color: #399ee6;
  --highlight-color: #fa8d3e;
  --frame-color: #787b8099;
  --info-color: #6cbf43;
}

[data-theme="dark"] {
  --bg-color: #242936;
  --text-color: #CCCAC2;
  --link-color: #73d0ff;
  --highlight-color: #ffad66;
  --frame-color: #b8cfe680;
  --info-color: #87d96c;
}

@theme inline {
  --color-link: var(--link-color);
  --color-highlight: var(--highlight-color);
  --color-frame: var(--frame-color);
  --color-info: var(--info-color)
}

body {
  background: var(--bg-color);
  color: var(--text-color);
}

h1, h2, h3, h4, h5, h6 {
  @apply my-0 leading-tight pb-2;
}
h1 {
  @apply text-3xl pt-6;
}
h2 {
  @apply text-2xl pt-6;
}
h3 {
  @apply text-xl pt-4;
}
h4, h5, h6 {
  @apply text-lg pt-2;
}

hr {
  @apply bg-frame;
  @apply h-px my-3 border-0;
  @apply w-1/5 mx-auto my-7;
}

blockquote {
  @apply border-l-4 border-frame;
  @apply my-4 px-2;
}
div.info {
  @apply border-2 border-info;
  @apply rounded-lg;
  @apply px-3 py-1 mt-3;
}

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

a:hover {
  color: var(--highlight-color);
}

.main ul {
  @apply list-disc ml-5;
}
.main ol {
  @apply list-decimal ml-5;
}
.main .toc ul {
  @apply ml-0 list-none!;
}
.main .toc ul ul > li {
  @apply ml-5;
}
.main p {
  @apply my-2;
}

/*** tables ***/
.markup table {
  @apply my-4 mx-auto;
}
.markup td {
  @apply p-2 border border-frame;
}
.markup th {
  @apply p-2 border border-frame;
}

.icon {
  @apply inline-flex h-[1.2em] w-[1.2em] pr-[0.2em] mt-[-0.2em] fill-current;
}
nav .icon {
  @apply w-6 h-6 pr-0 mb-0.5;
}


/*** math ***/
code.has-jax {
  -webkit-font-smoothing: antialiased;
  background: inherit !important;
  border: none !important;
  font-size: 100%;
}

/*** footnotes ***/
.footnote-backref {
  font-family: sans-serif;
  --webkit-font-feature-settings: "liga" 0;
  font-feature-settings: "liga" 0;
}

/*** Chroma ***/
pre.chroma code {
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", Menlo, Monaco, Consolas, monospace !important;
}
:not(.chroma) > code {
  @apply mx-1 px-1 border rounded border-frame;
}
.highlight {
  @apply border-l border-frame rounded-lg;
  @apply my-4 px-3;
  max-width: 100%;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.highlight pre {
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  max-width: 100%;
}
.highlight code {
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  max-width: 100%;
}

/* Background */ .bg { background-color:#fcfcfc; }
/* PreWrapper */ .chroma { background-color:#fcfcfc; }
/* Other */ .chroma .x {  }
/* Error */ .chroma .err {  }
/* CodeLine */ .chroma .cl {  }
/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
/* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
/* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }
/* LineHighlight */ .chroma .hl { background-color:#d8d8d8 }
/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
/* Line */ .chroma .line { 
  display: block !important;
  width: 100%;
  word-wrap: break-word;
  white-space: pre-wrap;
}
/* Keyword */ .chroma .k { color:#007020;font-weight:bold }
/* KeywordConstant */ .chroma .kc { color:#007020;font-weight:bold }
/* KeywordDeclaration */ .chroma .kd { color:#007020;font-weight:bold }
/* KeywordNamespace */ .chroma .kn { color:#007020;font-weight:bold }
/* KeywordPseudo */ .chroma .kp { color:#007020 }
/* KeywordReserved */ .chroma .kr { color:#007020;font-weight:bold }
/* KeywordType */ .chroma .kt { color:#902000 }
/* Name */ .chroma .n {  }
/* NameAttribute */ .chroma .na { color:#4070a0 }
/* NameBuiltin */ .chroma .nb { color:#007020 }
/* NameBuiltinPseudo */ .chroma .bp {  }
/* NameClass */ .chroma .nc { color:#0e84b5;font-weight:bold }
/* NameConstant */ .chroma .no { color:#60add5 }
/* NameDecorator */ .chroma .nd { color:#555;font-weight:bold }
/* NameEntity */ .chroma .ni { color:#d55537;font-weight:bold }
/* NameException */ .chroma .ne { color:#007020 }
/* NameFunction */ .chroma .nf { color:#06287e }
/* NameFunctionMagic */ .chroma .fm {  }
/* NameLabel */ .chroma .nl { color:#002070;font-weight:bold }
/* NameNamespace */ .chroma .nn { color:#0e84b5;font-weight:bold }
/* NameOther */ .chroma .nx {  }
/* NameProperty */ .chroma .py {  }
/* NameTag */ .chroma .nt { color:#062873;font-weight:bold }
/* NameVariable */ .chroma .nv { color:#bb60d5 }
/* NameVariableClass */ .chroma .vc {  }
/* NameVariableGlobal */ .chroma .vg {  }
/* NameVariableInstance */ .chroma .vi {  }
/* NameVariableMagic */ .chroma .vm {  }
/* Literal */ .chroma .l {  }
/* LiteralDate */ .chroma .ld {  }
/* LiteralString */ .chroma .s { color:#4070a0 }
/* LiteralStringAffix */ .chroma .sa { color:#4070a0 }
/* LiteralStringBacktick */ .chroma .sb { color:#4070a0 }
/* LiteralStringChar */ .chroma .sc { color:#4070a0 }
/* LiteralStringDelimiter */ .chroma .dl { color:#4070a0 }
/* LiteralStringDoc */ .chroma .sd { color:#4070a0;font-style:italic }
/* LiteralStringDouble */ .chroma .s2 { color:#4070a0 }
/* LiteralStringEscape */ .chroma .se { color:#4070a0;font-weight:bold }
/* LiteralStringHeredoc */ .chroma .sh { color:#4070a0 }
/* LiteralStringInterpol */ .chroma .si { color:#70a0d0 }
/* LiteralStringOther */ .chroma .sx { color:#c65d09 }
/* LiteralStringRegex */ .chroma .sr { color:#235388 }
/* LiteralStringSingle */ .chroma .s1 { color:#4070a0 }
/* LiteralStringSymbol */ .chroma .ss { color:#517918 }
/* LiteralNumber */ .chroma .m { color:#40a070 }
/* LiteralNumberBin */ .chroma .mb { color:#40a070 }
/* LiteralNumberFloat */ .chroma .mf { color:#40a070 }
/* LiteralNumberHex */ .chroma .mh { color:#40a070 }
/* LiteralNumberInteger */ .chroma .mi { color:#40a070 }
/* LiteralNumberIntegerLong */ .chroma .il { color:#40a070 }
/* LiteralNumberOct */ .chroma .mo { color:#40a070 }
/* Operator */ .chroma .o { color:#666 }
/* OperatorWord */ .chroma .ow { color:#007020;font-weight:bold }
/* Punctuation */ .chroma .p {  }
/* Comment */ .chroma .c { color:#60a0b0;font-style:italic }
/* CommentHashbang */ .chroma .ch { color:#60a0b0;font-style:italic }
/* CommentMultiline */ .chroma .cm { color:#60a0b0;font-style:italic }
/* CommentSingle */ .chroma .c1 { color:#60a0b0;font-style:italic }
/* CommentSpecial */ .chroma .cs { color:#60a0b0; }
/* CommentPreproc */ .chroma .cp { color:#007020 }
/* CommentPreprocFile */ .chroma .cpf { color:#007020 }
/* Generic */ .chroma .g {  }
/* GenericDeleted */ .chroma .gd { color:#a00000 }
/* GenericEmph */ .chroma .ge { font-style:italic }
/* GenericError */ .chroma .gr { color:#f00 }
/* GenericHeading */ .chroma .gh { color:#000080;font-weight:bold }
/* GenericInserted */ .chroma .gi { color:#00a000 }
/* GenericOutput */ .chroma .go { color:#888 }
/* GenericPrompt */ .chroma .gp { color:#c65d09;font-weight:bold }
/* GenericStrong */ .chroma .gs { font-weight:bold }
/* GenericSubheading */ .chroma .gu { color:#800080;font-weight:bold }
/* GenericTraceback */ .chroma .gt { color:#04d }
/* GenericUnderline */ .chroma .gl { text-decoration:underline }
/* TextWhitespace */ .chroma .w { color:#bbb }

/* Background */ .bg { color:#d8dee9;background-color:#242936; }
/* PreWrapper */ .dark .chroma { color:#d8dee9;background-color:#242936; }
/* Other */ .dark .chroma .x {  }
/* Error */ .dark .chroma .err { color:#bf616a }
/* CodeLine */ .dark .chroma .cl {  }
/* LineLink */ .dark .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
/* LineTableTD */ .dark .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
/* LineTable */ .dark .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }
/* LineHighlight */ .dark .chroma .hl { background-color:#242936 }
/* LineNumbersTable */ .dark .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6c6f74 }
/* LineNumbers */ .dark .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6c6f74 }
/* Line */ .dark .chroma .line { 
  display: block !important;
  width: 100%;
  word-wrap: break-word;
  white-space: pre-wrap;
}
/* Keyword */ .dark .chroma .k { color:#81a1c1;font-weight:bold }
/* KeywordConstant */ .dark .chroma .kc { color:#81a1c1;font-weight:bold }
/* KeywordDeclaration */ .dark .chroma .kd { color:#81a1c1;font-weight:bold }
/* KeywordNamespace */ .dark .chroma .kn { color:#81a1c1;font-weight:bold }
/* KeywordPseudo */ .dark .chroma .kp { color:#81a1c1 }
/* KeywordReserved */ .dark .chroma .kr { color:#81a1c1;font-weight:bold }
/* KeywordType */ .dark .chroma .kt { color:#81a1c1 }
/* Name */ .dark .chroma .n {  }
/* NameAttribute */ .dark .chroma .na { color:#8fbcbb }
/* NameBuiltin */ .dark .chroma .nb { color:#81a1c1 }
/* NameBuiltinPseudo */ .dark .chroma .bp {  }
/* NameClass */ .dark .chroma .nc { color:#8fbcbb }
/* NameConstant */ .dark .chroma .no { color:#8fbcbb }
/* NameDecorator */ .dark .chroma .nd { color:#d08770 }
/* NameEntity */ .dark .chroma .ni { color:#d08770 }
/* NameException */ .dark .chroma .ne { color:#bf616a }
/* NameFunction */ .dark .chroma .nf { color:#88c0d0 }
/* NameFunctionMagic */ .dark .chroma .fm {  }
/* NameLabel */ .dark .chroma .nl { color:#8fbcbb }
/* NameNamespace */ .dark .chroma .nn { color:#8fbcbb }
/* NameOther */ .dark .chroma .nx {  }
/* NameProperty */ .dark .chroma .py { color:#8fbcbb }
/* NameTag */ .dark .chroma .nt { color:#81a1c1 }
/* NameVariable */ .dark .chroma .nv {  }
/* NameVariableClass */ .dark .chroma .vc {  }
/* NameVariableGlobal */ .dark .chroma .vg {  }
/* NameVariableInstance */ .dark .chroma .vi {  }
/* NameVariableMagic */ .dark .chroma .vm {  }
/* Literal */ .dark .chroma .l {  }
/* LiteralDate */ .dark .chroma .ld {  }
/* LiteralString */ .dark .chroma .s { color:#a3be8c }
/* LiteralStringAffix */ .dark .chroma .sa { color:#a3be8c }
/* LiteralStringBacktick */ .dark .chroma .sb { color:#a3be8c }
/* LiteralStringChar */ .dark .chroma .sc { color:#a3be8c }
/* LiteralStringDelimiter */ .dark .chroma .dl { color:#a3be8c }
/* LiteralStringDoc */ .dark .chroma .sd { color:#616e87 }
/* LiteralStringDouble */ .dark .chroma .s2 { color:#a3be8c }
/* LiteralStringEscape */ .dark .chroma .se { color:#ebcb8b }
/* LiteralStringHeredoc */ .dark .chroma .sh { color:#a3be8c }
/* LiteralStringInterpol */ .dark .chroma .si { color:#a3be8c }
/* LiteralStringOther */ .dark .chroma .sx { color:#a3be8c }
/* LiteralStringRegex */ .dark .chroma .sr { color:#ebcb8b }
/* LiteralStringSingle */ .dark .chroma .s1 { color:#a3be8c }
/* LiteralStringSymbol */ .dark .chroma .ss { color:#a3be8c }
/* LiteralNumber */ .dark .chroma .m { color:#b48ead }
/* LiteralNumberBin */ .dark .chroma .mb { color:#b48ead }
/* LiteralNumberFloat */ .dark .chroma .mf { color:#b48ead }
/* LiteralNumberHex */ .dark .chroma .mh { color:#b48ead }
/* LiteralNumberInteger */ .dark .chroma .mi { color:#b48ead }
/* LiteralNumberIntegerLong */ .dark .chroma .il { color:#b48ead }
/* LiteralNumberOct */ .dark .chroma .mo { color:#b48ead }
/* Operator */ .dark .chroma .o { color:#81a1c1 }
/* OperatorWord */ .dark .chroma .ow { color:#81a1c1;font-weight:bold }
/* Punctuation */ .dark .chroma .p { color:#eceff4 }
/* Comment */ .dark .chroma .c { color:#616e87;font-style:italic }
/* CommentHashbang */ .dark .chroma .ch { color:#616e87;font-style:italic }
/* CommentMultiline */ .dark .chroma .cm { color:#616e87;font-style:italic }
/* CommentSingle */ .dark .chroma .c1 { color:#616e87;font-style:italic }
/* CommentSpecial */ .dark .chroma .cs { color:#616e87;font-style:italic }
/* CommentPreproc */ .dark .chroma .cp { color:#5e81ac;font-style:italic }
/* CommentPreprocFile */ .dark .chroma .cpf { color:#5e81ac;font-style:italic }
/* Generic */ .dark .chroma .g {  }
/* GenericDeleted */ .dark .chroma .gd { color:#bf616a }
/* GenericEmph */ .dark .chroma .ge { font-style:italic }
/* GenericError */ .dark .chroma .gr { color:#bf616a }
/* GenericHeading */ .dark .chroma .gh { color:#88c0d0;font-weight:bold }
/* GenericInserted */ .dark .chroma .gi { color:#a3be8c }
/* GenericOutput */ .dark .chroma .go {  }
/* GenericPrompt */ .dark .chroma .gp { color:#4c566a;font-weight:bold }
/* GenericStrong */ .dark .chroma .gs { font-weight:bold }
/* GenericSubheading */ .dark .chroma .gu { color:#88c0d0;font-weight:bold }
/* GenericTraceback */ .dark .chroma .gt { color:#bf616a }
/* GenericUnderline */ .dark .chroma .gl {  }
/* TextWhitespace */ .dark .chroma .w {  }
