/* theme-aware code highlighting for hugo chroma  * light theme (default) - github inspired  * dark theme - gruvbox inspired  */  /* ============================================    light theme (default)    ============================================ */  /* background */ .bg {     color: #24292e;     background-color: #f6f8fa; }  /* prewrapper */ .chroma {     color: #24292e;     background-color: #f6f8fa;     border: 1px solid #e1e4e8;     border-radius: 0.5rem;     position: relative; }  /* error */ .chroma .err {     color: #d73a49; }  /* 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: #fff8c5; }  /* linenumberstable */ .chroma .lnt {     white-space: pre;     user-select: none;     margin-right: 0.4em;     padding: 0 0.4em 0 0.4em;     color: #6a737d; }  /* linenumbers */ .chroma .ln {     white-space: pre;     user-select: none;     margin-right: 0.4em;     padding: 0 0.4em 0 0.4em;     color: #6a737d; }  /* line */ .chroma .line {     display: flex; }  /* keyword */ .chroma .k {     color: #d73a49; } .chroma .kc {     color: #005cc5; } .chroma .kd {     color: #d73a49; } .chroma .kn {     color: #d73a49; } .chroma .kp {     color: #d73a49; } .chroma .kr {     color: #d73a49; } .chroma .kt {     color: #d73a49; }  /* name */ .chroma .n {     color: #24292e; } .chroma .na {     color: #005cc5; } .chroma .nb {     color: #005cc5; } .chroma .bp {     color: #005cc5; } .chroma .nc {     color: #6f42c1; } .chroma .no {     color: #005cc5; } .chroma .nd {     color: #6f42c1; } .chroma .ni {     color: #005cc5; } .chroma .ne {     color: #d73a49; } .chroma .nf {     color: #6f42c1; } .chroma .fm {     color: #6f42c1; } .chroma .nl {     color: #005cc5; } .chroma .nn {     color: #6f42c1; } .chroma .nx {     color: #24292e; } .chroma .py {     color: #005cc5; } .chroma .nt {     color: #22863a; } .chroma .nv {     color: #e36209; } .chroma .vc {     color: #e36209; } .chroma .vg {     color: #e36209; } .chroma .vi {     color: #e36209; } .chroma .vm {     color: #e36209; }  /* literal */ .chroma .l {     color: #032f62; } .chroma .ld {     color: #032f62; }  /* literalstring */ .chroma .s {     color: #032f62; } .chroma .sa {     color: #032f62; } .chroma .sb {     color: #032f62; } .chroma .sc {     color: #032f62; } .chroma .dl {     color: #032f62; } .chroma .sd {     color: #032f62; } .chroma .s2 {     color: #032f62; } .chroma .se {     color: #e36209; } .chroma .sh {     color: #032f62; } .chroma .si {     color: #032f62; } .chroma .sx {     color: #032f62; } .chroma .sr {     color: #032f62; } .chroma .s1 {     color: #032f62; } .chroma .ss {     color: #005cc5; }  /* literalnumber */ .chroma .m {     color: #005cc5; } .chroma .mb {     color: #005cc5; } .chroma .mf {     color: #005cc5; } .chroma .mh {     color: #005cc5; } .chroma .mi {     color: #005cc5; } .chroma .il {     color: #005cc5; } .chroma .mo {     color: #005cc5; }  /* operator */ .chroma .o {     color: #d73a49; } .chroma .ow {     color: #d73a49;     font-weight: bold; }  /* punctuation */ .chroma .p {     color: #24292e; }  /* comment */ .chroma .c {     color: #6a737d;     font-style: italic; } .chroma .ch {     color: #6a737d;     font-style: italic; } .chroma .cm {     color: #6a737d;     font-style: italic; } .chroma .c1 {     color: #6a737d;     font-style: italic; } .chroma .cs {     color: #6a737d;     font-style: italic; } .chroma .cp {     color: #005cc5;     font-style: italic; } .chroma .cpf {     color: #005cc5;     font-style: italic; }  /* generic */ .chroma .g {     color: #24292e; } .chroma .gd {     color: #d73a49;     background-color: #ffeef0; } .chroma .ge {     font-style: italic; } .chroma .gr {     color: #d73a49; } .chroma .gh {     color: #005cc5;     font-weight: bold; } .chroma .gi {     color: #22863a;     background-color: #f0fff4; } .chroma .go {     color: #6a737d; } .chroma .gp {     color: #005cc5;     font-weight: bold; } .chroma .gs {     font-weight: bold; } .chroma .gu {     color: #005cc5;     font-weight: bold; } .chroma .gt {     color: #d73a49; } .chroma .gl {     text-decoration: underline; }  /* textwhitespace */ .chroma .w {     color: #24292e; }  /* ============================================    dark theme (system preference)    ============================================ */  @media (prefers-color-scheme: dark) {     html:not(.light) .bg {         color: #fbf1c7;         background-color: #1a1b21;     }      html:not(.light) .chroma {         color: #fbf1c7;         background-color: #1a1b21;         border: 1px solid #2d2d2d;     }      html:not(.light) .chroma .err {         color: #fb4934;     }     html:not(.light) .chroma .hl {         background-color: #3a3a3a;     }      html:not(.light) .chroma .lnt {         color: #928374;     }     html:not(.light) .chroma .ln {         color: #928374;     }      /* Keyword */     html:not(.light) .chroma .k {         color: #fb4934;     }     html:not(.light) .chroma .kc {         color: #d3869b;     }     html:not(.light) .chroma .kd {         color: #fe8019;     }     html:not(.light) .chroma .kn {         color: #fb4934;     }     html:not(.light) .chroma .kp {         color: #fb4934;     }     html:not(.light) .chroma .kr {         color: #fb4934;     }     html:not(.light) .chroma .kt {         color: #fabd2f;     }      /* Name */     html:not(.light) .chroma .n {         color: #fbf1c7;     }     html:not(.light) .chroma .na {         color: #b8bb26;     }     html:not(.light) .chroma .nb {         color: #fabd2f;     }     html:not(.light) .chroma .bp {         color: #fabd2f;     }     html:not(.light) .chroma .nc {         color: #8ec07c;     }     html:not(.light) .chroma .no {         color: #d3869b;     }     html:not(.light) .chroma .nd {         color: #fb4934;     }     html:not(.light) .chroma .ni {         color: #fabd2f;     }     html:not(.light) .chroma .ne {         color: #fb4934;     }     html:not(.light) .chroma .nf {         color: #8ec07c;     }     html:not(.light) .chroma .fm {         color: #8ec07c;     }     html:not(.light) .chroma .nl {         color: #fb4934;     }     html:not(.light) .chroma .nn {         color: #8ec07c;     }     html:not(.light) .chroma .nx {         color: #fbf1c7;     }     html:not(.light) .chroma .py {         color: #fbf1c7;     }     html:not(.light) .chroma .nt {         color: #fb4934;     }     html:not(.light) .chroma .nv {         color: #fbf1c7;     }     html:not(.light) .chroma .vc {         color: #fbf1c7;     }     html:not(.light) .chroma .vg {         color: #fbf1c7;     }     html:not(.light) .chroma .vi {         color: #fbf1c7;     }     html:not(.light) .chroma .vm {         color: #fbf1c7;     }      /* Literal */     html:not(.light) .chroma .l {         color: #b8bb26;     }     html:not(.light) .chroma .ld {         color: #b8bb26;     }      /* LiteralString */     html:not(.light) .chroma .s {         color: #b8bb26;     }     html:not(.light) .chroma .sa {         color: #b8bb26;     }     html:not(.light) .chroma .sb {         color: #b8bb26;     }     html:not(.light) .chroma .sc {         color: #b8bb26;     }     html:not(.light) .chroma .dl {         color: #b8bb26;     }     html:not(.light) .chroma .sd {         color: #b8bb26;     }     html:not(.light) .chroma .s2 {         color: #b8bb26;     }     html:not(.light) .chroma .se {         color: #fe8019;     }     html:not(.light) .chroma .sh {         color: #b8bb26;     }     html:not(.light) .chroma .si {         color: #b8bb26;     }     html:not(.light) .chroma .sx {         color: #b8bb26;     }     html:not(.light) .chroma .sr {         color: #b8bb26;     }     html:not(.light) .chroma .s1 {         color: #b8bb26;     }     html:not(.light) .chroma .ss {         color: #83a598;     }      /* LiteralNumber */     html:not(.light) .chroma .m {         color: #d3869b;     }     html:not(.light) .chroma .mb {         color: #d3869b;     }     html:not(.light) .chroma .mf {         color: #d3869b;     }     html:not(.light) .chroma .mh {         color: #d3869b;     }     html:not(.light) .chroma .mi {         color: #d3869b;     }     html:not(.light) .chroma .il {         color: #d3869b;     }     html:not(.light) .chroma .mo {         color: #d3869b;     }      /* Operator */     html:not(.light) .chroma .o {         color: #fbf1c7;     }     html:not(.light) .chroma .ow {         color: #fbf1c7;         font-weight: bold;     }      /* Punctuation */     html:not(.light) .chroma .p {         color: #fbf1c7;     }      /* Comment */     html:not(.light) .chroma .c {         color: #928374;         font-style: italic;     }     html:not(.light) .chroma .ch {         color: #928374;         font-style: italic;     }     html:not(.light) .chroma .cm {         color: #928374;         font-style: italic;     }     html:not(.light) .chroma .c1 {         color: #928374;         font-style: italic;     }     html:not(.light) .chroma .cs {         color: #928374;         font-style: italic;     }     html:not(.light) .chroma .cp {         color: #8ec07c;         font-style: italic;     }     html:not(.light) .chroma .cpf {         color: #8ec07c;         font-style: italic;     }      /* Generic */     html:not(.light) .chroma .g {         color: #fbf1c7;     }     html:not(.light) .chroma .gd {         color: #fb4934;         background-color: #282828;     }     html:not(.light) .chroma .ge {         font-style: italic;     }     html:not(.light) .chroma .gr {         color: #fb4934;     }     html:not(.light) .chroma .gh {         color: #b8bb26;         font-weight: bold;     }     html:not(.light) .chroma .gi {         color: #b8bb26;         background-color: #282828;     }     html:not(.light) .chroma .go {         color: #928374;     }     html:not(.light) .chroma .gp {         color: #fbf1c7;         font-weight: bold;     }     html:not(.light) .chroma .gs {         font-weight: bold;     }     html:not(.light) .chroma .gu {         color: #b8bb26;         font-weight: bold;     }     html:not(.light) .chroma .gt {         color: #fb4934;     }     html:not(.light) .chroma .gl {         text-decoration: underline;     }      /* TextWhitespace */     html:not(.light) .chroma .w {         color: #fbf1c7;     } }  /* ============================================    dark theme (manual toggle)    ============================================ */  html.dark .bg {     color: #fbf1c7;     background-color: #1a1b21; }  html.dark .chroma {     color: #fbf1c7;     background-color: #1a1b21;     border: 1px solid #2d2d2d; }  html.dark .chroma .err {     color: #fb4934; } html.dark .chroma .hl {     background-color: #3a3a3a; }  html.dark .chroma .lnt {     color: #928374; } html.dark .chroma .ln {     color: #928374; }  /* keyword */ html.dark .chroma .k {     color: #fb4934; } html.dark .chroma .kc {     color: #d3869b; } html.dark .chroma .kd {     color: #fe8019; } html.dark .chroma .kn {     color: #fb4934; } html.dark .chroma .kp {     color: #fb4934; } html.dark .chroma .kr {     color: #fb4934; } html.dark .chroma .kt {     color: #fabd2f; }  /* name */ html.dark .chroma .n {     color: #fbf1c7; } html.dark .chroma .na {     color: #b8bb26; } html.dark .chroma .nb {     color: #fabd2f; } html.dark .chroma .bp {     color: #fabd2f; } html.dark .chroma .nc {     color: #8ec07c; } html.dark .chroma .no {     color: #d3869b; } html.dark .chroma .nd {     color: #fb4934; } html.dark .chroma .ni {     color: #fabd2f; } html.dark .chroma .ne {     color: #fb4934; } html.dark .chroma .nf {     color: #8ec07c; } html.dark .chroma .fm {     color: #8ec07c; } html.dark .chroma .nl {     color: #fb4934; } html.dark .chroma .nn {     color: #8ec07c; } html.dark .chroma .nx {     color: #fbf1c7; } html.dark .chroma .py {     color: #fbf1c7; } html.dark .chroma .nt {     color: #fb4934; } html.dark .chroma .nv {     color: #fbf1c7; } html.dark .chroma .vc {     color: #fbf1c7; } html.dark .chroma .vg {     color: #fbf1c7; } html.dark .chroma .vi {     color: #fbf1c7; } html.dark .chroma .vm {     color: #fbf1c7; }  /* literal */ html.dark .chroma .l {     color: #b8bb26; } html.dark .chroma .ld {     color: #b8bb26; }  /* literalstring */ html.dark .chroma .s {     color: #b8bb26; } html.dark .chroma .sa {     color: #b8bb26; } html.dark .chroma .sb {     color: #b8bb26; } html.dark .chroma .sc {     color: #b8bb26; } html.dark .chroma .dl {     color: #b8bb26; } html.dark .chroma .sd {     color: #b8bb26; } html.dark .chroma .s2 {     color: #b8bb26; } html.dark .chroma .se {     color: #fe8019; } html.dark .chroma .sh {     color: #b8bb26; } html.dark .chroma .si {     color: #b8bb26; } html.dark .chroma .sx {     color: #b8bb26; } html.dark .chroma .sr {     color: #b8bb26; } html.dark .chroma .s1 {     color: #b8bb26; } html.dark .chroma .ss {     color: #83a598; }  /* literalnumber */ html.dark .chroma .m {     color: #d3869b; } html.dark .chroma .mb {     color: #d3869b; } html.dark .chroma .mf {     color: #d3869b; } html.dark .chroma .mh {     color: #d3869b; } html.dark .chroma .mi {     color: #d3869b; } html.dark .chroma .il {     color: #d3869b; } html.dark .chroma .mo {     color: #d3869b; }  /* operator */ html.dark .chroma .o {     color: #fbf1c7; } html.dark .chroma .ow {     color: #fbf1c7;     font-weight: bold; }  /* punctuation */ html.dark .chroma .p {     color: #fbf1c7; }  /* comment */ html.dark .chroma .c {     color: #928374;     font-style: italic; } html.dark .chroma .ch {     color: #928374;     font-style: italic; } html.dark .chroma .cm {     color: #928374;     font-style: italic; } html.dark .chroma .c1 {     color: #928374;     font-style: italic; } html.dark .chroma .cs {     color: #928374;     font-style: italic; } html.dark .chroma .cp {     color: #8ec07c;     font-style: italic; } html.dark .chroma .cpf {     color: #8ec07c;     font-style: italic; }  /* generic */ html.dark .chroma .g {     color: #fbf1c7; } html.dark .chroma .gd {     color: #fb4934;     background-color: #282828; } html.dark .chroma .ge {     font-style: italic; } html.dark .chroma .gr {     color: #fb4934; } html.dark .chroma .gh {     color: #b8bb26;     font-weight: bold; } html.dark .chroma .gi {     color: #b8bb26;     background-color: #282828; } html.dark .chroma .go {     color: #928374; } html.dark .chroma .gp {     color: #fbf1c7;     font-weight: bold; } html.dark .chroma .gs {     font-weight: bold; } html.dark .chroma .gu {     color: #b8bb26;     font-weight: bold; } html.dark .chroma .gt {     color: #fb4934; } html.dark .chroma .gl {     text-decoration: underline; }  /* textwhitespace */ html.dark .chroma .w {     color: #fbf1c7; }