@import "https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css";
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

/* Font experiments */

/* source and source sans */
/* @import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap'); */

/* source sans 3 */
/* @import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap'); */

/* merriweather and merriweather sans */
/* @import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap'); */

/* merriweather only */
/* @import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap'); */

/* noto and noto sans */
/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap'); */

/* source sans 3 */
/* @import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap'); */

/* open sans */
/* @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap'); */


/* @import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap'); */

/* 
    Conclusion - sticking to system fonts
    There is a beauty in not using external fonts
*/

:root{
    --font-serif: serif;
    /* --font-sans-serif: "Arimo",-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; */
    --font-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI Variable","Segoe UI",system-ui,ui-sans-serif,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
    --font-mono: "JetBrains Mono", monospace;
    --font-body: var(--font-mono);
    --font-headings: var(--font-mono);
    --font-blockquotes: var(--font-mono);

    --font-size--body: 0.875rem;
    --font-size-small-screen: 0.875rem;

    --content-width: 80ch;

    
    /* COLORS */
    --color-green-bg :#DFF6DD;
    --color-green-text :#0b9629;

    --color-blue-bg :#d4e7ff;
    --color-blue-text :#225dff;
    --color-pink-bg :#EFD9FD;
    --color-pink-text :#bf59ff;
    --color-gray-bg: #eaeaeb;
    --color-gray-text: #8f8f8f;

    --color-gray-weak: #f9fafb;
    --color-gray-medium: #F2F2F2;
    --color-gray-intense: #e0e0e0;


    --color-text-weak: #919191;
    --color-text-medium: #1a1a1a;
    --color-text-intense: #000;
    
    
    --color-border-weak: #eee;
    --color-border-medium: #0002;
    --color-border-intense: #999;

    --color-brand-orange: #d23b19;


    /* ELEMENTS */

    --body-bg: #fff;
    /* --body-bg: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.75) 5vh, rgba(255,255,255,1) 15vh), linear-gradient(90deg, rgba(255,255,255,1) 20%, rgb(22,145,214) 60%, rgb(241, 213, 84) 100%); */

    --box-default-bg: var(--body-bg);
    --box-default-shadow: none;
    --box-default-border: 2px dotted var(--color-text-medium) !important;
    
    --box-blue-bg: var(--color-blue-bg);
    --box-blue-border: 1px solid var(--color-blue-text);
    
    --box-green-bg: var(--color-green-bg);
    --box-green-border: 1px solid var(--color-green-text);
    
    --box-gray-bg: var(--color-gray-intense);
    --box-gray-border: 1px solid var(--color-gray-text);
    
    --box-pink-bg: var(--color-pink-bg);
    --box-pink-border: 1px solid var(--color-pink-text);

    --code-text: var(--color-text-medium);
    --code-bg: var(--color-gray-medium);

    --footer-bg: transparent;
    --footer-text-color: var(--color-text-medium);
    --footer-link-color: var(--link-color);

    --heading-number-color: var(--color-text-medium);

    --hr-border-color: var(--color-text-medium);

    --link-color: var(--color-text-intense);

    
    --nav-bg: var(--color-brand-orange);
    --nav-link-color: #fff;
    --nav-border: none;

    --pre-bg: var(--color-gray-medium);
    --pre-border: var(--color-gray-intense);

    --table-bg: var(--color-gray-weak);
    
    --tag-bg: #eee;
    --tag-color: #000;
    --tag-box-border-color: var(--color-gray-intense);
    --tag-box-bg-color: var(--color-gray-intense);
    --tag-hover-bg: var(--link-color);
    --tag-hover-color: #fff;

    --color-toc-bg: none;
}
html {
    scroll-behavior: smooth;
    background: var(--body-bg);
}


body{
    font-family: var(--font-body);
    font-size: var(--font-size--body);
    line-height: 1.5;
    background: var(--body-bg);

    /* padding-top: 1em; */

}


/*
    ###############################
    TAGS ARE SORTED ALPHABETICALLY
    ###############################
 */


a{
    color: var(--link-color);
    text-decoration: underline;
}
a:hover{
    text-decoration: underline;
}

b, strong{
    color: var(--color-text-intense);
    font-family: var(--font-headings);
}

blockquote{
    font-family: var(--font-blockquotes);
    font-style: italic;
    border: none !important;
    border-left: 2px solid var(--color-text-weak) !important;

    background: none !important;
}

.box{
    background: var(--box-default-bg);
    border-radius: 0.625em;
    box-shadow: var(--box-default-shadow);
    border-bottom: var(--box-default-border);
    border-radius: 0;
}
.box .tag{
    background: var(--tag-box-bg-color);
    border: 1px solid var(--tag-box-border-color);

}
.box--blue{
    background: var(--box-blue-bg);
    border: var(--box-blue-border) !important;
    box-shadow: none;
}
.box--green{
    background: var(--box-green-bg);
    border: var(--box-green-border) !important;
    box-shadow: none;
}
.box--pink{
    background: var(--box-pink-bg);
    border: var(--box-pink-border) !important;
    box-shadow: none;
}
.box--gray{
    background: var(--box-gray-bg);
    border: var(--box-gray-border) !important;
    box-shadow: none;
}

.button{
    color: #fff;
    background-color: var(--color-text-medium) !important;
    border: none;
}

/*
    My markdown body only uses h2 tags and below. No h1 tags.
    However, in case a h1 tag comes in, the counter has to behave correctly, and properly reset the h2 heading's counter
 */

 code{
    background: var(--code-bg);
    /* box-shadow: var(--color-border-medium) 0 0 0 1px; */
    color: var(--code-text);
    border-radius: 0;
 }

#content {
    max-width: var(--content-width);
    counter-reset: h1counter;
    counter-reset: h2counter;
    border: 1px solid var(--color-text-intense);
    padding: 1rem;
    box-shadow: 0.5em 0.5em var(--color-text-weak);
}

#content h1 {
    counter-increment: h1counter;
    counter-reset: h2counter;
}
/* 
#content h1:before {
    color: var(--heading-number-color);
    content: counter(h1counter) ". ";
} */

#content h2 {
    counter-increment: h2counter;
    counter-reset: h3counter;

}

#content h2:before {
    color: var(--heading-number-color);
    content: counter(h2counter) ". ";
}

#content h3 {
    counter-increment: h3counter;
}

#content h3:before {
    color: var(--heading-number-color);
    content: counter(h2counter) "." counter(h3counter) ". ";
}

#content h4 {
    counter-increment: h4counter;
}

#content h4:before {
    color: var(--heading-number-color);
    content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) ". ";
}


.font-sans-serif{
    font-family: var(--font-sans-serif);
}

.section--footer{
    /* max-width: 100%; */
    background-color: var(--footer-bg);
    color: var(--footer-text-color);
}
.section--footer a{
    color: var(--footer-link-color);
}
.footer{
    background-color: transparent;
    padding: 0;
    padding-bottom: 4rem;
    padding-top: 4rem;
}
.footer p{
    opacity: 0.5;
}

h1,h2,h3,h4,h5,h6{
    font-family: var(--font-headings);
    color: var(--color-text-intense) !important;
    /* font-weight: 700 !important; */
}
h2{
    border-bottom: 2px dotted var(--color-text-intense);
    padding-bottom: 0.25em;
}

hr{
    border: none !important;
    border-top: 2px dotted var(--hr-border-color) !important;
}

.img-noinvert{
    filter: invert(0) !important;
}

li{
    color: var(--color-text-medium);
}
li::marker {
    /* color: var(--color-text-intense); */
}

.logo-text{
    font-size: 1.5em;
}

p{
    color: var(--color-text-medium);
}
pre{
    margin-top: 1em;
    margin-bottom: 1em;
    background: var(--pre-bg);
    box-shadow: var(--pre-border) 0 0 0 1px;
    /* border-radius: 0.625em; */
    border-radius: 0;
}
pre code{
    box-shadow: none;
}
.noborder{
    border: none !important;
}

section{
    /* max-width: 1024px; */
    margin: auto;
}
.section--nav{
    border-top: 1px solid var(--color-border-medium);

    background: var(--nav-bg) !important;
    z-index: 10;
    position: sticky;
    /* position: fixed; */
    max-width: 100%;
    width: 100%;
    top: 0;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    /* padding-top: 0.75em; */
}
.section--nav a{
    color: var(--nav-link-color);
}
.section--nav > .container{

    /* max-width: 1024px !important; */
    margin: auto;
    padding: 0;

    /* border to fix box sizing issues */
    border: 1px solid var(--nav-bg);
}


table{
    background: var(--table-bg) !important;
}
table, tr{
}
table th{
    font-family: var(--font-headings);
}

.tag{
    /* font-family: var(--font-sans-serif); */
    color: var(--tag-color);
    background-color: var(--tag-bg);
    margin-bottom: 3px;
}
.tag:hover{
    /* font-family: var(--font-sans-serif); */
    color: var(--tag-hover-color);
    background-color: var(--tag-hover-bg);
}
.text--light{
    color: var(--color-text-weak);
}
.text--tiny{
    font-size: 0.85em;
}


.toc {
    border: none;
    background-color: var(--color-toc-bg);
    border-radius: 0;
    padding-right: 1rem;

    position: sticky;
    top: 2rem;
    margin: 0;
    max-height: 100vh;
    overflow: auto;

    font-size: 0.85em;
    padding-top: 1em;
}

.toc ul{
    list-style-type:decimal;
}
.toc a{
    font-family: var(--font-sans-serif);
}



.codehilite .hll { background-color: #ffffcc }
.codehilite  { background: transparent; }
.codehilite .c { color: #008000 } /* Comment */
.codehilite .err { border: 1px solid #FF0000 } /* Error */
.codehilite .k { color: #0000ff } /* Keyword */
.codehilite .ch { color: #008000 } /* Comment.Hashbang */
.codehilite .cm { color: #008000 } /* Comment.Multiline */
.codehilite .cp { color: #0000ff } /* Comment.Preproc */
.codehilite .cpf { color: #008000 } /* Comment.PreprocFile */
.codehilite .c1 { color: #008000 } /* Comment.Single */
.codehilite .cs { color: #008000 } /* Comment.Special */
.codehilite .ge { font-style: italic } /* Generic.Emph */
.codehilite .gh { font-weight: bold } /* Generic.Heading */
.codehilite .gp { font-weight: bold } /* Generic.Prompt */
.codehilite .gs { font-weight: bold } /* Generic.Strong */
.codehilite .gu { font-weight: bold } /* Generic.Subheading */
.codehilite .kc { color: #0000ff } /* Keyword.Constant */
.codehilite .kd { color: #0000ff } /* Keyword.Declaration */
.codehilite .kn { color: #0000ff } /* Keyword.Namespace */
.codehilite .kp { color: #0000ff } /* Keyword.Pseudo */
.codehilite .kr { color: #0000ff } /* Keyword.Reserved */
.codehilite .kt { color: #2b91af } /* Keyword.Type */
.codehilite .s { color: #a31515 } /* Literal.String */
.codehilite .nc { color: #2b91af } /* Name.Class */
.codehilite .ow { color: #0000ff } /* Operator.Word */
.codehilite .sa { color: #a31515 } /* Literal.String.Affix */
.codehilite .sb { color: #a31515 } /* Literal.String.Backtick */
.codehilite .sc { color: #a31515 } /* Literal.String.Char */
.codehilite .dl { color: #a31515 } /* Literal.String.Delimiter */
.codehilite .sd { color: #a31515 } /* Literal.String.Doc */
.codehilite .s2 { color: #a31515 } /* Literal.String.Double */
.codehilite .se { color: #a31515 } /* Literal.String.Escape */
.codehilite .sh { color: #a31515 } /* Literal.String.Heredoc */
.codehilite .si { color: #a31515 } /* Literal.String.Interpol */
.codehilite .sx { color: #a31515 } /* Literal.String.Other */
.codehilite .sr { color: #a31515 } /* Literal.String.Regex */
.codehilite .s1 { color: #a31515 } /* Literal.String.Single */
.codehilite .ss { color: #a31515 } /* Literal.String.Symbol */







@media (prefers-color-scheme: dark) {
    :root{

    /* COLORS */

    --color-blue-bg :#004173;
    --color-green-bg :#054b14;
    --color-green-text :#DFF6DD;
    --color-pink-bg :#3B2E58;
    
    --color-gray-weak: #222222;
    --color-gray-medium: #333333;
    --color-gray-intense: #444444;

    --color-text-weak:  #9e9e9e;
    --color-text-medium: #bdc1c6;
    --color-text-intense: #e9e9e9;
    

    --color-border-weak: #222222;
    --color-border-medium: #333333;
    --color-border-intense: #444444;

    /* ELEMENTS */
    --body-bg: #171717;
    /* --body-bg: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.75) 5vh, rgba(0,0,0,1) 15vh), linear-gradient(90deg, rgba(0,0,0,1) 20%, rgb(22,145,214) 60%, rgb(121, 105, 33, 0.2) 100%); */
    
    
    --box-default-bg: var(--body-bg);
    --box-default-shadow: none;
    --box-default-border: 1px dotted var(--color-text-medium) !important;
    --box-blue-bg: var(--color-blue-bg);
    --box-green-bg: var(--color-green-bg);

    --code-text: var(--color-text-medium);
    --code-bg: #272A35;

    --heading-number-color: var(--color-text-medium);

    --hr-border-color: var(--color-border-medium);

    --link-color: var(--color-text-intense);
    --primary-dark: #0161B5;

    --nav-bg: #913420;
    --nav-border: none;
    --nav-link-color: #fff;
    /* colorful */
    /* --nav-bg:linear-gradient(135deg, rgba(136,117,60,1) 0%, rgba(134,85,80,1) 9%, rgba(115,58,112,1) 29%, rgba(82,44,133,1) 52%, rgba(55,48,121,1) 100%);; */


    --pre-bg: var(--color-gray-medium);
    --pre-border: var(--color-gray-intense);

    --table-bg: var(--color-gray-weak);

    --tag-bg: var(--color-gray-medium);
    --tag-color: var(--color-text-intense);
    --tag-box-border-color: var(--color-gray-intense);
    --tag-box-bg-color: var(--color-gray-intense);
    --tag-hover-bg: var(--primary-dark);
    --tag-hover-color: #fff;

    }
    /* b{
        color: #fff;
    } */

    .button{
        color: #000;
    }

    img{
        filter: invert(1);
    }
    li{
        /* color: #ABB1BF; */
    }
    li::marker {
        /* color: #fff; */
    }
    p{
        /* color: #ABB1BF; */
    }


.codehilite .hll { background-color: #49483e }
.codehilite  { background: #272822; color: #f8f8f2 }
.codehilite .c { color: #aca68b } /* Comment */
.codehilite .err { color: #960050; background-color: #1e0010 } /* Error */
.codehilite .k { color: #66d9ef } /* Keyword */
.codehilite .l { color: #ae81ff } /* Literal */
.codehilite .n { color: #f8f8f2 } /* Name */
.codehilite .o { color: #f92672 } /* Operator */
.codehilite .p { color: #f8f8f2 } /* Punctuation */
.codehilite .ch { color: #aca68b } /* Comment.Hashbang */
.codehilite .cm { color: #aca68b } /* Comment.Multiline */
.codehilite .cp { color: #aca68b } /* Comment.Preproc */
.codehilite .cpf { color: #aca68b } /* Comment.PreprocFile */
.codehilite .c1 { color: #aca68b } /* Comment.Single */
.codehilite .cs { color: #aca68b } /* Comment.Special */
.codehilite .gd { color: #f92672 } /* Generic.Deleted */
.codehilite .ge { font-style: italic } /* Generic.Emph */
.codehilite .gi { color: #a6e22e } /* Generic.Inserted */
.codehilite .gs { font-weight: bold } /* Generic.Strong */
.codehilite .gu { color: #aca68b } /* Generic.Subheading */
.codehilite .kc { color: #66d9ef } /* Keyword.Constant */
.codehilite .kd { color: #66d9ef } /* Keyword.Declaration */
.codehilite .kn { color: #f92672 } /* Keyword.Namespace */
.codehilite .kp { color: #66d9ef } /* Keyword.Pseudo */
.codehilite .kr { color: #66d9ef } /* Keyword.Reserved */
.codehilite .kt { color: #66d9ef } /* Keyword.Type */
.codehilite .ld { color: #e6db74 } /* Literal.Date */
.codehilite .m { color: #ae81ff } /* Literal.Number */
.codehilite .s { color: #e6db74 } /* Literal.String */
.codehilite .na { color: #a6e22e } /* Name.Attribute */
.codehilite .nb { color: #f8f8f2 } /* Name.Builtin */
.codehilite .nc { color: #a6e22e } /* Name.Class */
.codehilite .no { color: #66d9ef } /* Name.Constant */
.codehilite .nd { color: #a6e22e } /* Name.Decorator */
.codehilite .ni { color: #f8f8f2 } /* Name.Entity */
.codehilite .ne { color: #a6e22e } /* Name.Exception */
.codehilite .nf { color: #a6e22e } /* Name.Function */
.codehilite .nl { color: #f8f8f2 } /* Name.Label */
.codehilite .nn { color: #f8f8f2 } /* Name.Namespace */
.codehilite .nx { color: #a6e22e } /* Name.Other */
.codehilite .py { color: #f8f8f2 } /* Name.Property */
.codehilite .nt { color: #f92672 } /* Name.Tag */
.codehilite .nv { color: #f8f8f2 } /* Name.Variable */
.codehilite .ow { color: #f92672 } /* Operator.Word */
.codehilite .w { color: #f8f8f2 } /* Text.Whitespace */
.codehilite .mb { color: #ae81ff } /* Literal.Number.Bin */
.codehilite .mf { color: #ae81ff } /* Literal.Number.Float */
.codehilite .mh { color: #ae81ff } /* Literal.Number.Hex */
.codehilite .mi { color: #ae81ff } /* Literal.Number.Integer */
.codehilite .mo { color: #ae81ff } /* Literal.Number.Oct */
.codehilite .sa { color: #e6db74 } /* Literal.String.Affix */
.codehilite .sb { color: #e6db74 } /* Literal.String.Backtick */
.codehilite .sc { color: #e6db74 } /* Literal.String.Char */
.codehilite .dl { color: #e6db74 } /* Literal.String.Delimiter */
.codehilite .sd { color: #e6db74 } /* Literal.String.Doc */
.codehilite .s2 { color: #e6db74 } /* Literal.String.Double */
.codehilite .se { color: #ae81ff } /* Literal.String.Escape */
.codehilite .sh { color: #e6db74 } /* Literal.String.Heredoc */
.codehilite .si { color: #e6db74 } /* Literal.String.Interpol */
.codehilite .sx { color: #e6db74 } /* Literal.String.Other */
.codehilite .sr { color: #e6db74 } /* Literal.String.Regex */
.codehilite .s1 { color: #e6db74 } /* Literal.String.Single */
.codehilite .ss { color: #e6db74 } /* Literal.String.Symbol */
.codehilite .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
.codehilite .fm { color: #a6e22e } /* Name.Function.Magic */
.codehilite .vc { color: #f8f8f2 } /* Name.Variable.Class */
.codehilite .vg { color: #f8f8f2 } /* Name.Variable.Global */
.codehilite .vi { color: #f8f8f2 } /* Name.Variable.Instance */
.codehilite .vm { color: #f8f8f2 } /* Name.Variable.Magic */
.codehilite .il { color: #ae81ff } /* Literal.Number.Integer.Long */

    

    
}


/*  #########################################
    RESPONSIVE LAYOUT AND WIDTH MODIFICATIONS
    #########################################
*/

@media screen and (max-width:1024px) {
    .reverse-columns-tablet{
        flex-direction: column-reverse;
        display: flex;
    }
    :root{
        --font-size--body: var(--font-size-small-screen);
    }
    .toc{
        font-size: 1em;
    }
}



/* 
.navbar{
    position: sticky;
    top: 1rem;
    border: 1px solid red;
    padding-top: 1rem;
}

.nav{
    position: sticky;
    bottom: 0;
    z-index: 999;
    border-top: 1px solid var(--color-border-medium);

    background: var(--nav-bg) !important;
    margin: auto;

    position: fixed;
    width: 100%;
    bottom: 0;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    
} */