/* Markdown */
:root{
  --maincolor: #71bad4;
  --bordercl:black;
  --callouctcolor: #709fb0;
  --hovercolor: #71bad4;;
  --darkMaincolor: lightgreen;
  --textcolor:  #2C2C2E;
  }

/* For lorenz.js */
canvas {
  --stroke-color: gray;
  --dot-color: black;
}

html {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  /* font-family: 'Helvetica Neue', sans-serif; */
  font-size: 15px;
  line-height: 1.6em;
}
body{
  display: block;
  margin: 8px;
  color: var(--textcolor);
  background-color: #FEFEFD;
}

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

::selection {
  background: var(--maincolor);
  color: #fff;
}

/* Space between tags in Posts' section */
a.taglist+a.taglist {
  margin-left: 5px;
}

p {
  /* font-family: 'Fira Sans', sans-serif; */
  /* font-family: system-ui, sans-serif; */
  /* font-family: 'Helvetica Neue', sans-serif; */
  line-height: 1.5;
}

hr {
  border: 0;
  border-top: 3px solid var(--bordercl);
  margin: 1em 0;
}

blockquote {
  border-left: 3px solid var(--bordercl);
  color: #737373;
  margin: 0;
  padding-left: 1em;
}

a {
  color: inherit;
  border-bottom: 1px dashed var(--maincolor);
  text-decoration: none;
}
a:hover {
  border-bottom: 1px solid var(--maincolor);
  color: var(--maincolor);
}

a.bold-link{
  font-weight: bold;
  border-bottom: none;
}

.tldr{
  margin-bottom: 2em;
}

/* Header / nav links — keep them clean */
header a,
.site-description a {
  text-decoration: none !important;      /* no underline at all */
  border: 0;
  color: inherit;                        /* keep same color as text */
}
header a:hover,
.site-description a:hover {
  color: var(--maincolor);               /* accent tint on hover */
}



/* Add space between tag list */
li.post{
  margin:0 0 10px 0;
}


/* Images */
img {
  /* border: 3px solid #ececec; */
  max-width: 100%;
}

figure {
  box-sizing: border-box;
  display: inline-block;
  margin: 0;
  max-width: 100%;
}

figure img {
  max-height: 500px;
}

@media screen and (min-width: 600px) {
  figure {
    padding: 0 40px;
  }
}

figure h4 {
  font-size: 1rem;
  margin: 0;
  margin-bottom: 1em;
}
figure h4::before {
  content: '↳ ';
}

.highlight div,
.highlight pre {
  overflow-x: auto;
  -webkit-text-size-adjust: 100%;
  background-color: #FEFEFD !important;
}


/* Containers */
.content {
  margin-bottom: 4em;
  margin-left: auto;
  margin-right: auto;
  max-width: 800px;
  padding: 0 1ch;
  word-wrap: break-word; /* TODO: REMOVE??? */
}

/* Header */
header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 1em 0;
  line-height: 2.5em;
}

header .main {
  font-size: 1.5rem;
}

h1, h2, h3, h4, h5, h6 {
  /* font-family: 'Roboto Mono', monospace; */
  /* font-family: 'Inter', system-ui, sans-serif; */
  font-weight: 500;
  margin-top: 2em;
  margin-bottom: .6em;
  color: var(--textcolor);
}

/* H1: bolder, underline with accent */
h1 {
  font-size: 1.6rem;
  border-bottom: 2px solid var(--maincolor);
  padding-bottom: .3em;
}

/* H2: thinner underline */
h2 {
  font-size: 1.4rem;
  border-bottom: 1px solid var(--maincolor);
  padding-bottom: .2em;
}

/* H3: subtle gray underline */
h3 {
  font-size: 1.2rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: .2em;
}

/* H4–H6: muted, no underline */
h4, h5, h6 {
  font-size: 1rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}


.meta {
  color: #999;
  letter-spacing: -0.5px;
}

/* Footer */
footer {
  display: flex;
  align-items: center;
  border-top: 0.1rem dotted var(--bordercl);
  padding: 2rem 0rem;
  margin-top: 2rem;
}
.soc {
  display: flex;
  align-items: center;
  border-bottom: none;
}
.border {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  border: 1px solid;
}
.footer-info {
  padding: var(--footer-padding);
}

/* Common */
.title h1 {
  margin-bottom: 0;
}

time {
  color: grey;
}

/* Posts */
article .title {
  margin-bottom: 1em;
}


/* Callout */
.callout {
  background-color: var(--callouctcolor);
  color: #fff;
  padding: 1em;
}

.callout p {
  margin: 0;
}

.callout a {
  border-bottom: 3px solid #fff;
}

.callout a:hover {
  background-color: #fff;
  color: var(--callouctcolor);
}

.callout-alert {
  color: var(--textcolor);
  background-color: transparent;
  border-width: 3px;
  border-style: solid;
  border-color: #ff6347;
}

.callout-custom {
  color: var(--textcolor);
}

.callout-tip {
  color: var(--textcolor);
  background-color: transparent;
  border-width: 3px;
  border-style: solid;
  border-color: dodgerblue;
}

.callout-warning {

  color: var(--textcolor);
  background-color: transparent;
  border-width: 3px;
  border-style: solid;
  border-color: #ffd700;
}

.site-description {
display: flex;
justify-content: space-between;
}
.tags li::before{
  content: "🏷 ";
}
.tags a{
  border-bottom: 3px solid var(--maincolor);
}
.tags a:hover{
  color:white;
  background-color: var(--hovercolor);
}
svg{
  max-height: 15px;
}
.soc:hover{
  color: white;
}
.draft-label{
  color: var(--textcolor);
  text-decoration: none;
  padding: 2px 4px;
  border-radius: 4px;
  margin-left: 6px;
  background-color: transparent;
  border: 1px solid var(--maincolor);
}
.highlight {
  position: relative;
  -webkit-overflow-scrolling: touch;
}
.highlight pre code[class*="language-"] {
  -webkit-overflow-scrolling: touch;
}


/* Lines between code */
.highlight pre code[class*="language-"] {
  display: block; /* Ensure block display for proper spacing */
  border-bottom: 1px solid #2C2C2E; /* Black horizontal line */
  border-top: 1px solid #2C2C2E; /* Line at the top */
}


.center {
  display: block;
  margin: auto;
  text-align: center;
}


/* table */
table {
  display: block;
  overflow-x: auto; /* Enable horizontal scrolling */
  white-space: nowrap; /* Prevent table rows from wrapping */
  border-spacing: 0;
  border-collapse: collapse;
  max-width: 100%; /* Ensures the table fits within the viewport */
}

table th{
  padding: 6px 13px;
  border: 1px solid #dfe2e5;
  font-size: large;
}

table td{
  padding: 6px 13px;
  border: 1px solid #dfe2e5;
}

code {
  background-color: #f0f0f0; /* Light gray background */
  padding: 2px 5px;
  border-radius: 3px;
}

pre > code {
  background-color: transparent; /* No background color within <pre> */
  padding: 0; /* Remove padding */
  border-radius: 0; /* remove border radius */
}

.paper-entry {
  margin-bottom: 45px; /* Adjust the value to your preference */
}

.paper-button {
  display: inline-block;
  margin-top: 10px;
  margin-right: 10px; /* Space between the buttons */
}

.btn {
  display: inline-block;
  padding: 2px 5px;
  font-size: 0.9em;
  text-decoration: none;
  color: var(--maincolor);
  border: 2px solid var(--maincolor); /* Always have an outline */
  border-radius: 5px;
  background: transparent;
}

/* Buttons and tag list links — no underline */
a.taglist {
  text-decoration: none !important;
  border: 0;
}

a.taglist a:hover {
  text-decoration: none !important;
}




/* Code style */
/* LineTableTD --- make 100% width */ tr > td.lntd:nth-child(2) { width: 100%;}

/* Background */ .bg { background-color:#fff; }
/* PreWrapper */ .chroma { background-color:#fff; }
/* Other */ .chroma .x {  }
/* Error */ .chroma .err { color:#a61717;background-color:#e3d2d2 }
/* 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:#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 { font-weight:bold }
/* KeywordConstant */ .chroma .kc { font-weight:bold }
/* KeywordDeclaration */ .chroma .kd { font-weight:bold }
/* KeywordNamespace */ .chroma .kn { font-weight:bold }
/* KeywordPseudo */ .chroma .kp { font-weight:bold }
/* KeywordReserved */ .chroma .kr { font-weight:bold }
/* KeywordType */ .chroma .kt { color:#458;font-weight:bold }
/* Name */ .chroma .n {  }
/* NameAttribute */ .chroma .na { color:#008080 }
/* NameBuiltin */ .chroma .nb { color:rgb(148, 40, 40)}
/* NameBuiltinPseudo */ .chroma .bp {  }
/* NameClass */ .chroma .nc { color:#458;font-weight:bold }
/* NameConstant */ .chroma .no { color:#008080 }
/* NameDecorator */ .chroma .nd {  }
/* NameEntity */ .chroma .ni { color:#800080 }
/* NameException */ .chroma .ne { color:#900;font-weight:bold }
/* NameFunction */ .chroma .nf { color:#900;font-weight:bold }
/* NameFunctionMagic */ .chroma .fm {  }
/* NameLabel */ .chroma .nl {  }
/* NameNamespace */ .chroma .nn { color:#555 }
/* NameOther */ .chroma .nx {  }
/* NameProperty */ .chroma .py {  }
/* NameTag */ .chroma .nt { color:#000080 }
/* NameVariable */ .chroma .nv { color:#008080 }
/* NameVariableClass */ .chroma .vc {  }
/* NameVariableGlobal */ .chroma .vg {  }
/* NameVariableInstance */ .chroma .vi {  }
/* NameVariableMagic */ .chroma .vm {  }
/* Literal */ .chroma .l {  }
/* LiteralDate */ .chroma .ld {  }
/* LiteralString */ .chroma .s { color:#b84 }
/* LiteralStringAffix */ .chroma .sa { color:#b84 }
/* LiteralStringBacktick */ .chroma .sb { color:#b84 }
/* LiteralStringChar */ .chroma .sc { color:#b84 }
/* LiteralStringDelimiter */ .chroma .dl { color:#b84 }
/* LiteralStringDoc */ .chroma .sd { color:#b84 }
/* LiteralStringDouble */ .chroma .s2 { color:#b84 }
/* LiteralStringEscape */ .chroma .se { color:#b84 }
/* LiteralStringHeredoc */ .chroma .sh { color:#b84 }
/* LiteralStringInterpol */ .chroma .si { color:#b84 }
/* LiteralStringOther */ .chroma .sx { color:#b84 }
/* LiteralStringRegex */ .chroma .sr { color:#808000 }
/* LiteralStringSingle */ .chroma .s1 { color:#b84 }
/* LiteralStringSymbol */ .chroma .ss { color:#b84 }
/* LiteralNumber */ .chroma .m { color:#099 }
/* LiteralNumberBin */ .chroma .mb { color:#099 }
/* LiteralNumberFloat */ .chroma .mf { color:#099 }
/* LiteralNumberHex */ .chroma .mh { color:#099 }
/* LiteralNumberInteger */ .chroma .mi { color:#099 }
/* LiteralNumberIntegerLong */ .chroma .il { color:#099 }
/* LiteralNumberOct */ .chroma .mo { color:#099 }
/* Operator */ .chroma .o { font-weight:bold }
/* OperatorWord */ .chroma .ow { font-weight:bold }
/* Punctuation */ .chroma .p {  }
/* Comment */ .chroma .c { color:rgb(137, 137, 120);font-style:italic }
/* CommentHashbang */ .chroma .ch { color:#998;font-style:italic }
/* CommentMultiline */ .chroma .cm { color:#998;font-style:italic }
/* CommentSingle */ .chroma .c1 { color:rgb(129, 129, 114);font-style:italic }
/* CommentSpecial */ .chroma .cs { color:#999;font-weight:bold;font-style:italic }
/* CommentPreproc */ .chroma .cp { color:#999;font-weight:bold }
/* CommentPreprocFile */ .chroma .cpf { color:#999;font-weight:bold }
/* Generic */ .chroma .g {  }
/* GenericDeleted */ .chroma .gd { color:#000;background-color:#fdd }
/* GenericEmph */ .chroma .ge { font-style:italic }
/* GenericError */ .chroma .gr { color:#a00 }
/* GenericHeading */ .chroma .gh { color:#999 }
/* GenericInserted */ .chroma .gi { color:#000;background-color:#dfd }
/* GenericOutput */ .chroma .go { color:#888 }
/* GenericPrompt */ .chroma .gp { color:#555 }
/* GenericStrong */ .chroma .gs { font-weight:bold }
/* GenericSubheading */ .chroma .gu { color:#aaa }
/* GenericTraceback */ .chroma .gt { color:#a00 }
/* GenericUnderline */ .chroma .gl { text-decoration:underline }
/* TextWhitespace */ .chroma .w { color:#bbb }