:root {
    color-scheme: light dark;
    
    --site-bg: #fff;
    --menu-bg: var(--menu-bg)
    --text-color: #000;
    --link-color: var(--text-color);

    --logo-bg-color: #000;
    
    --article-bg: ##fcfcfc;
    --article-border-color: #f3f1f1;
    --highlight-bg: rgba(240, 240, 240, 0.42);

    --border-color: var(--text-color);
    
    --blockquote-border-color:  #d2d2d2;
    --blockquote-color: ##666666;
    
    --pre-bg: #f0f0f0;

    --font-size: 1.2em;
    --mobile-font-size: 1hem;
    --h1-size: 1.2em;
    --header-font-size: 0.9em;

    --site-font: monospace;
    --header-font: arial;
}

@media (prefers-color-scheme: dark) {
    :root  {
        --site-bg: #000;
        --text-color: #abb1b1;

        --logo-bg-color: : #abb1b1;

        --article-bg: #141818;

        --article-border-color: var(--article-bg);
        --highlight-bg: rgb(31 27 27);

        --border-color: var(--text-color);
	
        --pre-bg: #1b2121;
    }
}
/* ----------- Entire site */
body {
    font-family: var(--site-font);
    padding: 0;
    font-size: var(--font-size);
    background-color: var(--site-bg);
    color: var(--text-color);
    max-width: 800px;
    margin: auto;
}
@media only screen and (max-width: 600px) {
    body {
        font-size: var(--mobile-font-size);
    }
}

main, footer {
    width: 100%;
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
}
img {
    max-width: 99%;
    width: auto;
    height: auto;
}

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

/* ----------- Site header */
header {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: normal;
  align-items: normal;
  align-content: normal;
}

header > .logo {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
  width: 50px;
  height: 80px;
  background-color: var(--logo-bg-color);
}

header > .name {
  display: block;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
  align-self: auto;
  order: 0;
  text-align: left;
  position: relative;
}

header > .name > nav {
  position: absolute;
  bottom: 0px;
  padding: 10px;

} 

h1 {
  font-size: inherit;
  margin: 0;
} 

/* ---------- Main */
main {
    margin-top: 30px;
}

.list-item > a {
    text-decoration: none;
}
/* ----------- Taxmomy list */
.taxonomy a {
    text-decoration: none;
}
.list-item time {
    opacity: 0.5;
}
.list-item span {
    font-weight: bold;
}

/* ----------- Articles / Posts */
article {
    margin-bottom: 20px;
    padding: 5px;
    line-height: 1.32em;
}
article p {
    text-align: justify;
}
article a {
    text-decoration: underline;
}
h2, h3, h4, h5 {
    text-align: left;
    border: 0;
    border-bottom-width: 1px;
    border-style: solid;
    font-size: inherit;
    text-transform: uppercase;
}
blockquote {
    border: 0;
    border-left: 3px;
    border-style: solid;
    border-color: var(--blockquote-border-color);
    margin-left: 15px;
    padding-left: 15px;
    color: var(--blockquote-color);
}
pre {
    padding-bottom: 5px;
    white-space: pre-wrap;
    padding: 11px;
    background-color: var(--pre-bg);
    word-break: keep-all;
}
pre code {
    max-width: 100%;
    word-break: break-all;x
}

/* ----------- Articles images */
article figure {
    text-align: center;
    margin: 0;
    max-width: 100%;
    font-size: 0.8em;
}
img.float-right {
    float: right;
    display: inline;
    margin-left: 10px;
}
img.center {
    max-width: 100%;
    height: auto;
    border-style: solid;
    border-color: var(--border-color);
    border-width: 1px;
}
figure.graph {
    background-color: var(--highlight-bg);
    padding: 5px;
    padding-top: 20px;
}
figure.graph img {
    width: 95%;
}

/* ----------- Articles adjustement navigation */
.next-link {
    float: right;
}

/* ----------- Footer */
footer {
    text-align: center;
    padding: 10px 0 30px 0;
}

/* ---------- Footnotes */
a[href^="#fn:"], a[href^="#fnref:"] {
  text-decoration: none;
}
a[href^="#fn:"]:before{ content: '[' }
a[href^="#fn:"]:after{ content: ']' }
.footnotes p {
    margin: 3px;
}
.footnotes hr {
    display: none
}
.footnotes::before {
    content: "Footnotes";
    border: 0;
    border-bottom-width: 1px;
    border-style: solid;
    font-weight: bold;
    display: block;
    text-transform: uppercase;
}

/* ----------- Donations */
.donor {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: flex-start;
    gap: 50px;
}

/* --------- Code blocks */

/* Background */ .bg { background-color: #f8f8f8; }
/* PreWrapper */ .chroma { background-color: #f8f8f8; }
/* 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: #ffffcc }
/* 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: #aa22ff; font-weight: bold }
/* KeywordConstant */ .chroma .kc { color: #aa22ff; font-weight: bold }
/* KeywordDeclaration */ .chroma .kd { color: #aa22ff; font-weight: bold }
/* KeywordNamespace */ .chroma .kn { color: #aa22ff; font-weight: bold }
/* KeywordPseudo */ .chroma .kp { color: #aa22ff }
/* KeywordReserved */ .chroma .kr { color: #aa22ff; font-weight: bold }
/* KeywordType */ .chroma .kt { color: #00bb00; font-weight: bold }
/* Name */ .chroma .n {  }
/* NameAttribute */ .chroma .na { color: #bb4444 }
/* NameBuiltin */ .chroma .nb { color: #aa22ff }
/* NameBuiltinPseudo */ .chroma .bp {  }
/* NameClass */ .chroma .nc { color: #0000ff }
/* NameConstant */ .chroma .no { color: #880000 }
/* NameDecorator */ .chroma .nd { color: #aa22ff }
/* NameEntity */ .chroma .ni { color: #999999; font-weight: bold }
/* NameException */ .chroma .ne { color: #d2413a; font-weight: bold }
/* NameFunction */ .chroma .nf { color: #00a000 }
/* NameFunctionMagic */ .chroma .fm {  }
/* NameLabel */ .chroma .nl { color: #a0a000 }
/* NameNamespace */ .chroma .nn { color: #0000ff; font-weight: bold }
/* NameOther */ .chroma .nx {  }
/* NameProperty */ .chroma .py {  }
/* NameTag */ .chroma .nt { color: #008000; font-weight: bold }
/* NameVariable */ .chroma .nv { color: #b8860b }
/* NameVariableClass */ .chroma .vc {  }
/* NameVariableGlobal */ .chroma .vg {  }
/* NameVariableInstance */ .chroma .vi {  }
/* NameVariableMagic */ .chroma .vm {  }
/* Literal */ .chroma .l {  }
/* LiteralDate */ .chroma .ld {  }
/* LiteralString */ .chroma .s { color: #bb4444 }
/* LiteralStringAffix */ .chroma .sa { color: #bb4444 }
/* LiteralStringBacktick */ .chroma .sb { color: #bb4444 }
/* LiteralStringChar */ .chroma .sc { color: #bb4444 }
/* LiteralStringDelimiter */ .chroma .dl { color: #bb4444 }
/* LiteralStringDoc */ .chroma .sd { color: #bb4444; font-style: italic }
/* LiteralStringDouble */ .chroma .s2 { color: #bb4444 }
/* LiteralStringEscape */ .chroma .se { color: #bb6622; font-weight: bold }
/* LiteralStringHeredoc */ .chroma .sh { color: #bb4444 }
/* LiteralStringInterpol */ .chroma .si { color: #bb6688; font-weight: bold }
/* LiteralStringOther */ .chroma .sx { color: #008000 }
/* LiteralStringRegex */ .chroma .sr { color: #bb6688 }
/* LiteralStringSingle */ .chroma .s1 { color: #bb4444 }
/* LiteralStringSymbol */ .chroma .ss { color: #b8860b }
/* LiteralNumber */ .chroma .m { color: #666666 }
/* LiteralNumberBin */ .chroma .mb { color: #666666 }
/* LiteralNumberFloat */ .chroma .mf { color: #666666 }
/* LiteralNumberHex */ .chroma .mh { color: #666666 }
/* LiteralNumberInteger */ .chroma .mi { color: #666666 }
/* LiteralNumberIntegerLong */ .chroma .il { color: #666666 }
/* LiteralNumberOct */ .chroma .mo { color: #666666 }
/* Operator */ .chroma .o { color: #666666 }
/* OperatorWord */ .chroma .ow { color: #aa22ff; font-weight: bold }
/* Punctuation */ .chroma .p {  }
/* Comment */ .chroma .c { color: #008800; font-style: italic }
/* CommentHashbang */ .chroma .ch { color: #008800; font-style: italic }
/* CommentMultiline */ .chroma .cm { color: #008800; font-style: italic }
/* CommentSingle */ .chroma .c1 { color: #008800; font-style: italic }
/* CommentSpecial */ .chroma .cs { color: #008800; font-weight: bold }
/* CommentPreproc */ .chroma .cp { color: #008800 }
/* CommentPreprocFile */ .chroma .cpf { color: #008800 }
/* Generic */ .chroma .g {  }
/* GenericDeleted */ .chroma .gd { color: #a00000 }
/* GenericEmph */ .chroma .ge { font-style: italic }
/* GenericError */ .chroma .gr { color: #ff0000 }
/* GenericHeading */ .chroma .gh { color: #000080; font-weight: bold }
/* GenericInserted */ .chroma .gi { color: #00a000 }
/* GenericOutput */ .chroma .go { color: #888888 }
/* GenericPrompt */ .chroma .gp { color: #000080; font-weight: bold }
/* GenericStrong */ .chroma .gs { font-weight: bold }
/* GenericSubheading */ .chroma .gu { color: #800080; font-weight: bold }
/* GenericTraceback */ .chroma .gt { color: #0044dd }
/* GenericUnderline */ .chroma .gl { text-decoration: underline }
/* TextWhitespace */ .chroma .w { color: #bbbbbb }