/* this file was generated by using the following command:    hugo gen chromastyles --style=catppuccin-frappe > code-highlight.css    in order to customize the colors of the code highlighter.  */    /* Background */ .bg { color: #ef9f76; background-color: #222431; }  /* prewrapper */ .chroma { color: #ef9f76; background-color: #222431; }  /* other */ .chroma .x {  }  /* error */ .chroma .err { color: #e78284 }  /* 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: #ffffcc }  /* linenumberstable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #774f3b }  /* linenumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #774f3b }  /* line */ .chroma .line { display: flex; }  /* keyword */ .chroma .k { color: #ca9ee6 }  /* keywordconstant */ .chroma .kc { color: #ca9ee6; font-style: italic }  /* keyworddeclaration */ .chroma .kd { color: #ca9ee6 }  /* keywordnamespace */ .chroma .kn { color: #ca9ee6 }  /* keywordpseudo */ .chroma .kp { color: #ca9ee6; font-weight: bold }  /* keywordreserved */ .chroma .kr { color: #ca9ee6 }  /* keywordtype */ .chroma .kt { color: #e5c890 }  /* name */ .chroma .n { color: #babbf1 }  /* nameattribute */ .chroma .na { color: #e5c890 }  /* namebuiltin */ .chroma .nb { color: #c6d0f5; font-style: italic }  /* namebuiltinpseudo */ .chroma .bp { color: #babbf1 }  /* nameclass */ .chroma .nc { color: #e5c890 }  /* nameconstant */ .chroma .no { color: #e5c890 }  /* namedecorator */ .chroma .nd { color: #f4b8e4 }  /* nameentity */ .chroma .ni { color: #f4b8e4 }  /* nameexception */ .chroma .ne { color: #ea999c }  /* namefunction */ .chroma .nf { color: #99d1db }  /* namefunctionmagic */ .chroma .fm { color: #babbf1 }  /* namelabel */ .chroma .nl { color: #e5c890 }  /* namenamespace */ .chroma .nn { color: #e5c890 }  /* nameother */ .chroma .nx {  }  /* nameproperty */ .chroma .py { color: #babbf1 }  /* nametag */ .chroma .nt { color: #ca9ee6 }  /* namevariable */ .chroma .nv {  }  /* namevariableclass */ .chroma .vc { color: #babbf1 }  /* namevariableglobal */ .chroma .vg { color: #babbf1 }  /* namevariableinstance */ .chroma .vi { color: #babbf1 }  /* namevariablemagic */ .chroma .vm { color: #babbf1 }  /* literal */ .chroma .l {  }  /* literaldate */ .chroma .ld {  }  /* literalstring */ .chroma .s { color: #a6d189 }  /* literalstringaffix */ .chroma .sa { color: #a6d189 }  /* literalstringbacktick */ .chroma .sb { color: #a6d189 }  /* literalstringchar */ .chroma .sc { color: #a6d189 }  /* literalstringdelimiter */ .chroma .dl { color: #a6d189 }  /* literalstringdoc */ .chroma .sd { color: #a6d189 }  /* literalstringdouble */ .chroma .s2 { color: #a6d189 }  /* literalstringescape */ .chroma .se { color: #8caaee }  /* literalstringheredoc */ .chroma .sh { color: #a6d189 }  /* literalstringinterpol */ .chroma .si { color: #a6d189 }  /* literalstringother */ .chroma .sx { color: #a6d189 }  /* literalstringregex */ .chroma .sr { color: #8caaee }  /* literalstringsingle */ .chroma .s1 { color: #a6d189 }  /* literalstringsymbol */ .chroma .ss { color: #a6d189 }  /* literalnumber */ .chroma .m {  }  /* literalnumberbin */ .chroma .mb {  }  /* literalnumberfloat */ .chroma .mf {  }  /* literalnumberhex */ .chroma .mh {  }  /* literalnumberinteger */ .chroma .mi {  }  /* literalnumberintegerlong */ .chroma .il {  }  /* literalnumberoct */ .chroma .mo {  }  /* operator */ .chroma .o { color: #99d1db }  /* operatorword */ .chroma .ow { color: #99d1db; font-weight: bold }  /* punctuation */ .chroma .p { color: #c6d0f5 }  /* comment */ .chroma .c { color: #626880; font-style: italic }  /* commenthashbang */ .chroma .ch { color: #626880; font-style: italic }  /* commentmultiline */ .chroma .cm { color: #626880; font-style: italic }  /* commentsingle */ .chroma .c1 { color: #626880; font-style: italic }  /* commentspecial */ .chroma .cs { color: #626880; font-style: italic }  /* commentpreproc */ .chroma .cp { color: #8caaee; font-style: italic }  /* commentpreprocfile */ .chroma .cpf { color: #8caaee; font-style: italic }  /* generic */ .chroma .g {  }  /* genericdeleted */ .chroma .gd { color: #ea999c }  /* genericemph */ .chroma .ge { font-style: italic }  /* genericerror */ .chroma .gr { color: #ea999c }  /* genericheading */ .chroma .gh { color: #99d1db; font-weight: bold }  /* genericinserted */ .chroma .gi { color: #a6d189 }  /* genericoutput */ .chroma .go {  }  /* genericprompt */ .chroma .gp { color: #737994; font-weight: bold }  /* genericstrong */ .chroma .gs { font-weight: bold }  /* genericsubheading */ .chroma .gu { color: #99d1db; font-weight: bold }  /* generictraceback */ .chroma .gt { color: #ea999c }  /* genericunderline */ .chroma .gl {  }  /* textwhitespace */ .chroma .w { color: #414559 }        /* set up padding and margin of some main elements */  .main-wrapper {      margin-top: var(--len-5);      margin-bottom: var(--len-5);    }        .main-wrapper { display: flex; flex-wrap: wrap; }    .main-wrapper > * { height: fit-content; }        .main { padding: var(--len-4); }    .side { padding-left: var(--len-4); }    .main { flex: 0 0 72%; width: 72%; }    .side { flex: 0 0 28%; width: 28%; }        /* mobile layout: place side to bottom */    @media (max-width: 991px) {      .main { padding: var(--len-4); }      .side { padding-left: 0; padding-top: var(--len-4); }      .main { flex: 0 0 100%; width: 100%; }      .side { flex: 0 0 100%; width: 100%; }    }        /********** set up break point **********/      .main-wrapper, .header { max-width: 1140px; }    @media (max-width: 1199px) { .main-wrapper, .header { max-width: 960px; } }    @media (max-width: 991px)  { .main-wrapper, .header { max-width: 720px; } }    @media (max-width: 767px)  { .main-wrapper, .header { max-width: 540px; } }    @media (max-width: 575px)  { .main-wrapper, .header { max-width: none; } }        /* size the element who has breakpoint limitation */    /* .header, .main-wrapper, .main { width: 100vw; } */    /* .header-wrapper, .footer { width: 100vw; } */    .header-wrapper, .footer { width: 100vw;}    .main-wrapper { width: calc(100vw - 2 * var(--len-3));}          .sidebar {      order: 2;      flex: 1 0 30%; /* This will make the sidebar take up 30% of the width */      background-color: #f5f5f5; /* Change this to match your site's color scheme */
     padding: 1em; /* Add some padding around the sidebar content */      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); /* Optional: add a shadow for a 3D effect */      position: sticky; /* Make the sidebar sticky */      top: 0; /* Align the sidebar to the top of the viewport */    }        /* style the sidebar links */    .sidebar a {      color: #333; /* Change this to match your site's color scheme */
     text-decoration: none;      margin: 0.5em 0;    }        .sidebar h2 {      font-size: 1.25em;      margin-top: 0;      text-decoration: dashed;      text-align: center;    }        .sidebar ul {      list-style-type: none;      padding: 0;    }        .sidebar ul li {      margin-bottom: 0.5em;    }            /* style the sidebar links on hover */    .sidebar a:hover {      color: #007BFF; /* Change this to match your site's color scheme */
   }        /* make the sidebar stack below the main content on small screens */    @media (max-width: 768px) {      main, .sidebar {          flex: 1 0 100%;      }      .sidebar {          position: static; /* Disable sticky sidebar on small screens */      }    }