:root {
  --bg-main: #ffffff;
  --bg-dim: #f0f0f0;
  --fg-main: #000000;
  --fg-dim: #595959;
  --blue: #0031a9;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-main: #000000;
    --bg-dim: #1e1e1e;
    --fg-main: #ffffff;
    --fg-dim: #989898;
    --blue: #2fafff;
  }
}

body {
  font-family: 'Charter', 'Bitstream Charter', 'Sitka Text', 'Cambria', 'serif';
  color: var(--fg-main);
  background-color: var(--bg-main);
  padding: 10px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Optima', 'Candara', 'Noto Sans', 'source-sans-pro', 'sans-serif';
}

.title, .subtitle, h1, h2, h3, h4, h5 {
  text-align: center;
}

.articles h1, .articles h2, .articles h3 {
    text-align: left;
}

.title a {
  text-decoration: none;
  color: var(--fg-main);
}

.subtitle {
  font-style: italic;
}

img {
  max-width: 100%;
}

a {
  color: var(--blue);
  font-size: 18px;
}

p, li {
  font-size: 18px;
  line-height: 140%;
}

.title a {
  font-size: 40px;
}

code {
  font-size: 16px;
}

.highlight {
    padding: 10px 0;
    /* TODO */
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
}

@media (min-width: 1024px) {
  p, ul, ol, figure {
    width: 60ch;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
  }

  .title {
    width: 75ch;
    margin-left: auto;
    margin-right: auto;
      
  }

  .articles {
   width: 75ch;
    margin-left: auto;
    margin-right: auto;
      
  }

  hr {
      width: 75ch;
  }

  p, a, li {
    font-size: 20px;
    line-height: 140%;
  }

  .highlight {
      width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
}

.star {
  height:12px;
  display:inline-block;
  background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTYuMzA5IDkuMjIgMi40MDkgMTJsMS40NC00LjU2N0wwIDQuNTgzbDQuNzg4LS4wNDJMNi4zMDggMCA3LjgzIDQuNTRsNC43ODkuMDQ0LTMuODUgMi44NDlMMTAuMjA5IDEyeiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+)
}

.star,
.star-1 {
  width:13px
}
.star-2 {
  width:26px
}
.star-3 {
  width:39px
}
.star-4 {
  width:52px
}
.star-5 {
  width:65px
}

.book {
  margin-bottom: 5rem;
}

/* Generated using: hugo gen chromastyles --style modus-operandi */

/* Background */ .bg { color:#000;background-color:#fff; }
/* PreWrapper */ .chroma { color:#000;background-color:#fff;-webkit-text-size-adjust:none; }
/* 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:#e5e5e5 }
/* 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:flex; }
/* Keyword */ .chroma .k { color:#5317ac }
/* KeywordConstant */ .chroma .kc { color:#0000c0 }
/* KeywordDeclaration */ .chroma .kd { color:#5317ac }
/* KeywordNamespace */ .chroma .kn { color:#5317ac }
/* KeywordPseudo */ .chroma .kp { color:#5317ac }
/* KeywordReserved */ .chroma .kr { color:#5317ac }
/* KeywordType */ .chroma .kt { color:#005a5f }
/* NameBuiltin */ .chroma .nb { color:#8f0075 }
/* NameBuiltinPseudo */ .chroma .bp { color:#8f0075 }
/* NameVariable */ .chroma .nv { color:#00538b }
/* NameVariableClass */ .chroma .vc { color:#00538b }
/* NameVariableGlobal */ .chroma .vg { color:#00538b }
/* NameVariableInstance */ .chroma .vi { color:#00538b }
/* NameVariableMagic */ .chroma .vm { color:#00538b }
/* NameFunction */ .chroma .nf { color:#721045 }
/* NameFunctionMagic */ .chroma .fm { color:#721045 }
/* Literal */ .chroma .l { color:#0000c0 }
/* LiteralDate */ .chroma .ld { color:#0000c0 }
/* LiteralString */ .chroma .s { color:#2544bb }
/* LiteralStringAffix */ .chroma .sa { color:#2544bb }
/* LiteralStringBacktick */ .chroma .sb { color:#2544bb }
/* LiteralStringChar */ .chroma .sc { color:#2544bb }
/* LiteralStringDelimiter */ .chroma .dl { color:#2544bb }
/* LiteralStringDoc */ .chroma .sd { color:#2544bb }
/* LiteralStringDouble */ .chroma .s2 { color:#2544bb }
/* LiteralStringEscape */ .chroma .se { color:#2544bb }
/* LiteralStringHeredoc */ .chroma .sh { color:#2544bb }
/* LiteralStringInterpol */ .chroma .si { color:#2544bb }
/* LiteralStringOther */ .chroma .sx { color:#2544bb }
/* LiteralStringRegex */ .chroma .sr { color:#2544bb }
/* LiteralStringSingle */ .chroma .s1 { color:#2544bb }
/* LiteralStringSymbol */ .chroma .ss { color:#2544bb }
/* LiteralNumber */ .chroma .m { color:#0000c0 }
/* LiteralNumberBin */ .chroma .mb { color:#0000c0 }
/* LiteralNumberFloat */ .chroma .mf { color:#0000c0 }
/* LiteralNumberHex */ .chroma .mh { color:#0000c0 }
/* LiteralNumberInteger */ .chroma .mi { color:#0000c0 }
/* LiteralNumberIntegerLong */ .chroma .il { color:#0000c0 }
/* LiteralNumberOct */ .chroma .mo { color:#0000c0 }
/* Operator */ .chroma .o { color:#00538b }
/* OperatorWord */ .chroma .ow { color:#00538b }
/* OperatorReserved */ .chroma .or { color:#00538b }
/* Comment */ .chroma .c { color:#505050 }
/* CommentHashbang */ .chroma .ch { color:#505050 }
/* CommentMultiline */ .chroma .cm { color:#505050 }
/* CommentSingle */ .chroma .c1 { color:#505050 }
/* CommentSpecial */ .chroma .cs { color:#505050 }
/* CommentPreproc */ .chroma .cp { color:#505050 }
/* CommentPreprocFile */ .chroma .cpf { color:#505050 }


@media (prefers-color-scheme: dark) {
/* Generated using: hugo gen chromastyles --style modus-operandi --mode dark */

/* Background */ .bg { color:#fff;background-color:#000; }
/* PreWrapper */ .chroma { color:#fff;background-color:#000;-webkit-text-size-adjust:none; }
/* 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:#191919 }
/* 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:flex; }
/* Keyword */ .chroma .k { color:#b6a0ff }
/* KeywordConstant */ .chroma .kc { color:#00bcff }
/* KeywordDeclaration */ .chroma .kd { color:#b6a0ff }
/* KeywordNamespace */ .chroma .kn { color:#b6a0ff }
/* KeywordPseudo */ .chroma .kp { color:#b6a0ff }
/* KeywordReserved */ .chroma .kr { color:#b6a0ff }
/* KeywordType */ .chroma .kt { color:#6ae4b9 }
/* NameBuiltin */ .chroma .nb { color:#f78fe7 }
/* NameBuiltinPseudo */ .chroma .bp { color:#f78fe7 }
/* NameVariable */ .chroma .nv { color:#00d3d0 }
/* NameVariableClass */ .chroma .vc { color:#00d3d0 }
/* NameVariableGlobal */ .chroma .vg { color:#00d3d0 }
/* NameVariableInstance */ .chroma .vi { color:#00d3d0 }
/* NameVariableMagic */ .chroma .vm { color:#00d3d0 }
/* NameFunction */ .chroma .nf { color:#feacd0 }
/* NameFunctionMagic */ .chroma .fm { color:#feacd0 }
/* Literal */ .chroma .l { color:#00bcff }
/* LiteralDate */ .chroma .ld { color:#00bcff }
/* LiteralString */ .chroma .s { color:#79a8ff }
/* LiteralStringAffix */ .chroma .sa { color:#79a8ff }
/* LiteralStringBacktick */ .chroma .sb { color:#79a8ff }
/* LiteralStringChar */ .chroma .sc { color:#79a8ff }
/* LiteralStringDelimiter */ .chroma .dl { color:#79a8ff }
/* LiteralStringDoc */ .chroma .sd { color:#79a8ff }
/* LiteralStringDouble */ .chroma .s2 { color:#79a8ff }
/* LiteralStringEscape */ .chroma .se { color:#79a8ff }
/* LiteralStringHeredoc */ .chroma .sh { color:#79a8ff }
/* LiteralStringInterpol */ .chroma .si { color:#79a8ff }
/* LiteralStringOther */ .chroma .sx { color:#79a8ff }
/* LiteralStringRegex */ .chroma .sr { color:#79a8ff }
/* LiteralStringSingle */ .chroma .s1 { color:#79a8ff }
/* LiteralStringSymbol */ .chroma .ss { color:#79a8ff }
/* LiteralNumber */ .chroma .m { color:#00bcff }
/* LiteralNumberBin */ .chroma .mb { color:#00bcff }
/* LiteralNumberFloat */ .chroma .mf { color:#00bcff }
/* LiteralNumberHex */ .chroma .mh { color:#00bcff }
/* LiteralNumberInteger */ .chroma .mi { color:#00bcff }
/* LiteralNumberIntegerLong */ .chroma .il { color:#00bcff }
/* LiteralNumberOct */ .chroma .mo { color:#00bcff }
/* Operator */ .chroma .o { color:#00d3d0 }
/* OperatorWord */ .chroma .ow { color:#00d3d0 }
/* OperatorReserved */ .chroma .or { color:#00d3d0 }
/* Comment */ .chroma .c { color:#a8a8a8 }
/* CommentHashbang */ .chroma .ch { color:#a8a8a8 }
/* CommentMultiline */ .chroma .cm { color:#a8a8a8 }
/* CommentSingle */ .chroma .c1 { color:#a8a8a8 }
/* CommentSpecial */ .chroma .cs { color:#a8a8a8 }
/* CommentPreproc */ .chroma .cp { color:#a8a8a8 }
/* CommentPreprocFile */ .chroma .cpf { color:#a8a8a8 }

}