@media (prefers-color-scheme: light) {
  :root {
    --selection: rgba(92, 54, 131, 0.7);
    --bg: #ffffff;
    --font-color: #18181b;
    --code-font-color: #333333;
    --code-bg-color: #eeeeee;
    --quote-border-color: #9852fa;
    --quote-bg-color: #d8d6d6;
    --link-hover-color: #fd62af;
    --separator-color: #cccccc;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --selection: rgba(124, 75, 173, 0.5);
    --bg: #171e26;
    --font-color: #bcbcc5;
    --code-font-color: #eeeeee;
    --code-bg-color: #333333;
    --quote-border-color: #bd93f9;
    --quote-bg-color: #273341;
    --link-hover-color: #ff80bf;
    --separator-color: #414558;
  }
}

:root {
  --font-size: 17px;
  --max-width: 750px;
}

html {
  font-family: "Segoe UI", Arial, sans-serif, "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-size: var(--font-size);
  scroll-behavior: smooth;
  background-color: var(--bg);
  line-height: 1.5em;
}

/* Scrollbar - Firefox */
* {
  scrollbar-color: var(--font-color) var(--bg);
}

/* Scrollbar - Chrome */
*::-webkit-scrollbar {
  width: 7px;
  height: 9px;
  background: var(--bg);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--font-color);
  border-radius: 10px;
}

/* Post's title */
header > h1 {
  font-size: 2.5rem;
}

/* Date's title */
header > p {
  font-style: italic;
}

::selection {
  color: rgb(255, 255, 255);
  background: var(--selection);
}

* {
  color: var(--font-color);
}

p {
  color: var(--font-color);
  font-size: var(--font-size);
}

/* Anchors */
h1:hover > a::before,
h2:hover > a::before,
h3:hover > a::before,
h4:hover > a::before,
h5:hover > a::before,
h6:hover > a::before {
  visibility: visible;
  color: var(--font-color);
}

h1 > a::before,
h2 > a::before,
h3 > a::before,
h4 > a::before,
h5 > a::before,
h6 > a::before {
  content: "#";
  visibility: hidden;
  padding-right: 0.1em;
}

h1 > a,
h2 > a,
h3 > a,
h4 > a,
h5 > a,
h6 > a {
  text-decoration: none;
}

body {
  margin: 0 auto;
  max-width: var(--max-width);
}

footer {
  text-align: center;
}

footer > * {
  text-transform: uppercase;
  font-size: calc(var(--font-size) / 1.2);
  letter-spacing: 0.15rem;
  opacity: 0.6;
  text-decoration: none;
  padding-bottom: 1em;
}

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

hr {
  border: 0;
  height: 1px;
  background: var(--separator-color);
}

/* Quotes */
blockquote {
  margin: 1em 0;
  padding: 0.1em 10px;
  border-left: 6px solid;
  border-color: var(--quote-border-color);
  background-color: var(--quote-bg-color);
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

/* Images */
img {
  display: block;
  margin: auto;
  max-width: var(--max-width);
}

/* Code */
kbd,
code {
  font-family: Consolas, monospace;
}

/* Little snippet of code (not blocks) */
kbd,
code:not(.hljs):not(:has(svg)) {
  background-color: var(--code-bg-color);
  border-radius: 3px;
  color: var(--code-font-color);
  box-shadow: 0 1px 1px black;
  font-size: calc(var(--font-size) / 1.2);
  padding: 2px 4px;
  vertical-align: 1.5px;
}

/* Code blocks */
.hljs {
  margin-inline: 0.4em; /* Marge for numbers */
  border-radius: 5px;
}

/* Numbers in codeblocks */
.hljs-ln-numbers {
  text-align: right;
}

/* Fix scroll in codeblocks with line numbering */
table.hljs-ln {
  overflow: hidden;
}

/* Background for copy code button */
.hljs-copy-button {
  background-color: var(--bg) !important;
}

/* Light theme for the copy code button */
@media (prefers-color-scheme: light) {
  .hljs-copy-button {
    background-color: var(--font-color) !important;
    filter: invert(100%);
  }
}

/* Hide last line in codeblocks if empty */
.hljs-ln
  > tbody
  > tr:last-child:has(td:last-child > span::-moz-only-whitespace) {
  visibility: collapse;
}

/* Temporary fix for layout.css.has-selector.enabled available only on
 * Firefox under certain circumstances */
.hljs-ln > tbody > tr:last-child {
  visibility: collapse;
}

/* Footnotes */
.footnotes a {
  font-family: "Segoe UI";
  text-decoration: underline dotted;
}

/* Reference to footnotes */
.footnote-ref > a {
  text-decoration: underline dotted;
}

/* Mermaid diagrams */
pre:has(code.language-mermaid) {
  text-align: center;
}

@media only screen and (max-width: 750px) {
  body {
    margin: 20px;
  }
}