.post-entry {
  --char:'~';
  padding: 40px 20px 30px 20px;
}
.post-entry > h2 {
  margin: 0px;
  width: max-content;
  min-width: 0;
}

.post-entry > h2:before {
  content: var(--char);
  margin-right: 0.3em;
  font-family: 'Mattone', sans-serif;
}

.caption {
  text-align: unset;
}

.footnotes:before {
  content: "Footnotes 🦶";
  border-bottom: 3px dotted var(--gray);
  width: 100%;
  display: block;
  margin: 10px 0;
  padding-bottom: 10px;
  font-size: x-large;
  color: var(--action);
  font-family: BarlowBold;
}

/* Fixes codeblocks not wrapping text, found on some stack overflow*/
.giallo span {
  white-space: normal;
}

.post > header > h2 {
  font-family: 'Mattone', Sans-serif;
  font-size: xx-large;
  text-align: left;
  margin: 0;
  border-bottom: 2px dashed var(--action);
  line-height: 1.5;
  margin-bottom: 10px;
  width: fit-content;
}

.post > nav > a {
    display: block;
  }

.post > article {
  line-height: 1.5;
}

.post > article > h2 > a {
  color: var(--action);
  font-family: 'BarlowBold'
}

.post > article > h3 > a {
  color: var(--action);
  font-family: 'BarlowBold'
}

.post > article > h4 > a {
  color: var(--text);
  font-family: 'BarlowBold'
}

/* I want to use .post > article > :is(h2, h3, h4) > a:is(:hover, :focus) */
/* If only that wasn't 2021+ :']*/
.post > article h2 > a:hover,
.post > article h3 > a:hover,
.post > article h4 > a:hover,
.post > article h2 > a:focus,
.post > article h3 > a:focus,
.post > article h4 > a:focus {
  background: unset;
}
.post > article h2::before,
.post > article h3::before,
.post > article h4::before {
  content: "#";
  margin-right: 4px;
  color: var(--gray);
  font-family: 'Barlow';
  margin-left: -0.2em;
}

.post > article h2:hover::before,
.post > article h3:hover::before,
.post > article h4:hover::before,
.post > article h2:has(a:focus)::before,
.post > article h3:has(a:focus)::before,
.post > article h4:has(a:focus)::before {
  font-family: 'BarlowBold';
  color: var(--text);
}

.nav-h1 > li::marker {
  content: "# ";
}
.nav-h1 > li > a {
  font-family: 'BarlowBold';
  font-size: large;
}

.nav-h2, .nav-h3 {
  padding-left: 10px;
}

.nav-h2 > li::marker {
  content: "~ ";
  color: var(--gray);
}

.nav-h2 > li > a {
  font-family: 'BarlowBold';
}
.nav-h3 > li::marker {
  content: "* ";
  color: var(--gray);
  font-size: small;
}