/*@import url("variables-light-theme.css") (prefers-color-scheme: light);*/
/*@import url("variables-dark-theme.css") (prefers-color-scheme: dark);*/

@import url("/syntax-theme-dark.css");

:root {
  --fg-color: #e0e6f0;
  --bg-color: #323242;
  --fg-href: #e999ff;
  --fg-border: #969696;
  --bg-mark: #dfdfb0;
  --fg-mark: #100f10;
}

@media (prefers-color-scheme: light) {
  @import url("/syntax-theme-light.css");

  :root {
    --fg-color: #282828;
    --bg-color: #e8e8e8;
    --fg-href: #9d0505;
    /* deliberaty choose a color with a lesser contrast */
    /* APCA contrast value of 83.77 against bg-color */
    --fg-border: #505050;
    --bg-mark: #f9ff00;
    --fg-mark: #282828;
  }
}

@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Libre Baskerville'), local('LibreBaskerville-Regular'), url(/fonts/librebaskerville1.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Libre Baskerville'), local('LibreBaskerville-Regular'), url(/fonts/librebaskerville2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --sans-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --mono-font: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Inconsolata, monospace;

  /* @link https://utopia.fyi/type/calculator?c=320,14,1.125,1280,18,1.25,4,5,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */
  --step-s5: clamp(0.37rem, calc(0.52rem + -0.19vw), 0.49rem);
  --step-s4: clamp(0.46rem, calc(0.57rem + -0.14vw), 0.55rem);
  --step-s3: clamp(0.58rem, calc(0.63rem + -0.06vw), 0.61rem);
  --step-s2: clamp(0.69rem, calc(0.68rem + 0.05vw), 0.72rem);
  --step-s1: clamp(0.78rem, calc(0.74rem + 0.20vw), 0.90rem);
  --step-x0: clamp(0.88rem, calc(0.79rem + 0.42vw), 1.13rem);
  --step-x1: clamp(0.98rem, calc(0.84rem + 0.70vw), 1.41rem);
  --step-x2: clamp(1.11rem, calc(0.89rem + 1.08vw), 1.76rem);
  --step-x3: clamp(1.25rem, calc(0.93rem + 1.59vw), 2.20rem);
  --step-x4: clamp(1.40rem, calc(0.95rem + 2.24vw), 2.75rem);

  /* @link https://utopia.fyi/space/calculator?c=320,14,1.125,1280,18,1.25,4,5,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */
  --space-3xs: clamp(0.25rem, calc(0.23rem + 0.10vw), 0.31rem);
  --space-2xs: clamp(0.44rem, calc(0.40rem + 0.21vw), 0.56rem);
  --space-xs: clamp(0.69rem, calc(0.63rem + 0.31vw), 0.88rem);
  --space-s: clamp(0.88rem, calc(0.79rem + 0.42vw), 1.13rem);
  --space-m: clamp(1.31rem, calc(1.19rem + 0.63vw), 1.69rem);
  --space-l: clamp(1.75rem, calc(1.58rem + 0.83vw), 2.25rem);
  --space-xl: clamp(2.63rem, calc(2.38rem + 1.25vw), 3.38rem);
  --space-2xl: clamp(3.50rem, calc(3.17rem + 1.67vw), 4.50rem);
  --space-3xl: clamp(5.25rem, calc(4.75rem + 2.50vw), 6.75rem);

  --width: 70ch;
  --body-line-height: 1.5;
  --head-line-height: 1.3;
}

html {
  /* use the border-box box model instead of the browser default content-box */
  box-sizing: border-box;
  /* fallback for safari - remove if it starts supporting scrollbar-gutter */
  overflow-y: scroll;
}

/* if a web browser supports `scrollbar-gutter`, use that instead */
@supports (scrollbar-gutter: stable both-edges) {
  html {
    overflow-y: auto;
    scrollbar-gutter: stable both-edges;
  }
}

/* inherit the border-box model in all elements */
/* this allows elements to override the box-model if needed and make their
 * children inherit their custom box-model */
*,
*::before,
*::after {
  box-sizing: inherit;
}

/* remove all browser default margins and paddings */
* {
  margin: 0;
  padding: 0;
}

/* if any of the following elements don't exist, the rule still applies  */
:is(code, kbd, samp, pre) {
  font-family: var(--mono-font);
  overflow-x: auto;
}

/* reduce distraction from text by removing underlines from hyperlinks */
/* rely on color to distinguish hyperlinks */
/* the order of pseudo classes should follow the LVHA order */
/* :link, :visited, :hover, :active */
a {
  color: var(--fg-href);
  text-decoration: none;
}

/* subdue the color of visited hyperlinks */
/*
a:visited {
  color: var(--fg-color);
}
*/

/* underline hyperlinks on hover and increase their underline offset */
a:hover {
  text-decoration: underline;
  text-underline-offset: var(--space-3xs);
}

/* if the role of a list is explicitly defined, it isn't being used as a list */
ul[role="list"] {
  padding: 0;
  list-style: none;
}

/* prevent overflow of possibly long lines */
:is(p, li, h1) {
  overflow-wrap: break-word;
}

:is(img, video) {
  /* never render images/videos wider than their containing element */
  max-inline-size: 100%;
  height: auto;
  /* preserve the aspect ratio of the image */
  block-size: auto;
  margin-inline: auto;
}

/* -------------------------------------------------------------------------- */

body {
  /* layout */
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  /* readability */
  margin: var(--space-m) auto;
  width: min(90%, var(--width));
  font-size: var(--step-x0);
  line-height: var(--body-line-height);
  /* aesthetics */
  font-family: var(--sans-font);
  color: var(--fg-color);
  background: var(--bg-color);
}

/* add margins on the left and right of the child elements of body */
/* body > * { */
/*   margin-inline: auto; */
/* } */

p + p {
    margin-top: var(--step-x1);
}

/* -------------------------------------------------------------------------- */

.primary-header {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: var(--space-xs);
}

:is(img, video) {
  /* make images/videos blocks rather than inline elements */
  display: block;
}

.avatar {
  border-radius: var(--step-x1);
}

h1 {
  font-size: var(--step-x3);
  line-height: var(--head-line-height);
}

h2 {
  font-size: var(--step-x2);
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Libre Baskerville", "Verdana", serif;
}

h1, h2, h3 {
  font-weight: 100;
}
h4, h5, h6 {
  font-weight: 200;
}

/* -------------------------------------------------------------------------- */

:is(.primary-nav, .primary-footer, .article-footer, .tag-list-nav, .footer-nav) > ul[role="list"] {
  display: flex;
  flex-flow: row wrap;
  /* prevent accidental incorrect clicks by increasing space between elements */
  justify-content: space-evenly;
  gap: var(--space-s);
}

.primary-footer {
  font-size: var(--step-s1);
  border-block-start: 0.1rem dotted var(--fg-border);
}

/* add a hash symbol before the taxonomy tag links */
.tag::before {
  content: "#";
}

.tag-sup {
  padding-inline: var(--space-3xs);
}

/* the stack layout for the child elements of article */
article > * + * {
  margin-top: var(--space-s);
}

/* the stack layout for the body and the main element */
:is(body, main) > * + * {
  margin-top: var(--space-l);
}

.article-header > ul[role="list"] {
  display: inline-flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  gap: var(--space-2xs);
}

.article-header {
  border-block-end: 0.1rem dotted var(--fg-border);
}

.article-header hr {
  border: 0;
  border-block-end: 0.1rem dotted var(--fg-border);
}

.article-header p, .article-header ol {
  margin-top: var(--space-s);
}

@media (max-width: 900px) {
    .article-header {
        display: block;
    }
}

.post-title {
  align-content: center;
}

.unknown-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-block: var(--space-xl);
}

/* code blocks inside pre should be a block otherwise it doesn't work well when
 * text overflows inside code */
pre > code {
  display: block;
  padding: 1em;
}

code[role="img"] {
  display: inline-block;
  vertical-align: middle;
}

.figquote {
  display: flex;
  flex-direction: column;
  place-items: center;
}

/* -------------------------------------------------------------------------- */

/* show the name of the programming language inside pre */
pre[data-lang]::before {
  display: block;
  content: attr(data-lang);
  text-decoration: underline var(--fg-border) solid;
  text-underline-offset: var(--space-3xs);
  text-decoration-thickness: 0.1rem;
  text-transform: uppercase;
  padding-block-end: var(--space-2xs);
}

/* add space after line numbers and don't select the line numbers for copying */
pre[data-linenos] table tbody tr td:first-child {
  padding-inline-end: var(--space-s);
  user-select: none;
}

pre[data-linenos] table {
  /* if we set table width to 100% and if text overflows, the space separation
   * between cells is removed */
  /* width: 100%; */
  border-collapse: collapse;
  border-spacing: 0;
  text-indent: 0;
}

.unknown-page-emoticon {
  font-size: var(--step-x3);
  padding: var(--space-2xs);
  border: 0;
  border-radius: 0;
}

blockquote {
  margin-inline-start: var(--space-l);
  padding: var(--space-2xs);
  border-inline-start: var(--step-s4) solid var(--fg-border);
}

figcaption {
  text-align: center;
}

:is(ul, ol) {
  padding-inline: var(--space-l);
}

mark {
  /* plays well with at least 1.5 line-height or more */
  padding-inline: var(--space-3xs);
  padding-block: 0.1rem;
  color: var(--fg-mark);
  background: var(--bg-mark);
  border-radius: var(--step-s5);
}

kbd {
  border-inline: 0.1rem solid var(--fg-border);
  border-block-start: 0.1rem solid var(--fg-border);
  border-block-end: 0.2rem solid var(--fg-border);
  border-radius: var(--step-s5);
  padding-inline: var(--space-3xs);
  padding-block: 0.1rem;
}

ul.navbar li {
    display: inline;
}

ul.navbar li + li::before {
    content: " | "
}

/* Index page */

article.post {
    margin-top: var(--step-x2);
}

article.post h2 {
    display: inline;
}

article.post .post__summary {
    margin-top: 0;
}

/* -------------------------------------------------------------------------- */

/**
 * Mastodon Comments
 * Courtesy of https://berglyd.net/blog/2023/03/mastodon-comments
 */

#article-comments {
  border-top: 1px solid var(--b-col-border-light);
  margin: var(--step-x2) 0;
  max-width: 100% !important;
}

#mastodon-comments-list button {
  background-color: var(--b-col-back-light);
  border: 1px solid var(--b-col-primary);
  border-radius: 5%;
  display: block;
  padding: 0.5rem 1rem;
  font-size: 1.08rem;
}

/* Wrapper */

#article-comments div.mastodon-wrapper {
  margin-top: var(--step-x0);
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}

#article-comments div.reply-original {
  display: none;
}

#article-comments div.reply-child {
  display: block;
  flex: 0 0 1.75rem;
  text-align: right;
}

.comment-level svg {
  width: 1.5rem;
  margin-top: 0.5rem;
  color: var(--b-col-text-dimmer);
}

/* Comment */

#article-comments div.mastodon-comment {
  background-color: var(--b-col-back-light);
  border: 1px solid var(--b-col-border-light);
  border-radius: 0.5rem;
  display: block;
  flex: 1 1 auto;
  font-size: 1rem;
  margin: 0 0 0.75rem 0;
  padding: 0;
}

#article-comments div.comment-meta {
  background-color: var(--b-col-back-semi-light);
  border-radius: 0.5rem 0.5rem 0 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 0.75rem;
  box-sizing: border-box;
  padding: 0.5rem 0.75rem;
  width: 100%;
}

#article-comments div.comment-avatar {
  display: block;
  flex: 0 0 4rem;
}

#article-comments div.comment-avatar img {
  width: 4rem;
  border-radius: 10%;
  margin-top: 0.15rem;
}

#article-comments div.comment-author {
  display: block;
  flex: 1 1 0;
  white-space: nowrap;
  overflow-x: hidden;
  width: 0;
}

#article-comments div.comment-author-name {
  font-weight: 700;
  margin: 0;
}

#article-comments div.comment-author-name a {
  color: var(--b-col-text);
  text-decoration: none;
}

#article-comments div.comment-author-reply,
#article-comments div.comment-date {
  font-size: 0.9rem;
  margin: 0;
}

#article-comments div.comment-author-reply a,
#article-comments div.comment-date a {
  color: var(--b-col-text-dim);
  text-decoration: none;
}

#article-comments div.comment-author-reply a:hover,
#article-comments div.comment-date a:hover {
  color: var(--b-col-text-dim);
  text-decoration: underline;
}

#article-comments div.comment-content {
  display: block;
  box-sizing: border-box;
  padding: 0.5rem 0.75rem 0.75rem 0.75rem;
  margin: 0;
}

#article-comments img.comment-emoji {
  display: inline;
  height: 1rem;
  vertical-align: text-top;
}

#article-comments div.comment-content p {
  margin: 0.7rem 0 0 0;
}

#article-comments div.comment-content p:first-of-type {
  margin: 0;
}

/* Put some margin next to the automatically inserted anchors */
a.zola-anchor {
    margin-right: 5px;
}

/* On hover, display a dotted square around the link, and keep the right margin around the same */
a.zola-anchor:hover {
    text-decoration: none;
    border: 1px dotted white;
    margin-right: 4px;
}