.header-subtitle {
  font-size: 1rem;

  /* eslint-disable-next-line css/no-invalid-properties */
  padding-left: calc(var(--PADDING_MAIN) /2);
}
.box-main {
  /* eslint-disable-next-line css/no-invalid-properties */
  background-color: var(--BACKGROUND_COLOR_SECONDARY);

  /* eslint-disable-next-line css/no-invalid-properties */
  padding: var(--PADDING_MAIN);

  /* eslint-disable-next-line css/no-invalid-properties */
  box-shadow: var(--SHADOW);

  /* eslint-disable-next-line css/no-invalid-properties */
  margin-bottom: var(--MARGIN_MAIN);
}

.box-main.box-wrap {
  max-width: max-content;
}

.box-main:has(>h1:first-child):has(>hr:nth-child(2)),
.box-main:has(>h2:first-child):has(>hr:nth-child(2)),
.box-main:has(>h3:first-child):has(>hr:nth-child(2)),
.box-main:has(>h4:first-child):has(>hr:nth-child(2)),
.box-main:has(>h5:first-child):has(>hr:nth-child(2)),
.box-main:has(>h6:first-child):has(>hr:nth-child(2)) {
  /* selector for the box-main when the first element is a h* (followed by an hr) */
  padding-top: 0;
}


.box-main:has(>hr:last-child):has(>h1:nth-last-child(2)),
.box-main:has(>hr:last-child):has(>h2:nth-last-child(2)),
.box-main:has(>hr:last-child):has(>h3:nth-last-child(2)),
.box-main:has(>hr:last-child):has(>h4:nth-last-child(2)),
.box-main:has(>hr:last-child):has(>h5:nth-last-child(2)),
.box-main:has(>hr:last-child):has(>h6:nth-last-child(2)) {
  /* selector for the box-main when the last element is a h* (followed by an hr) */
  padding-bottom: 0;
}

/* MARGIN_MAINS */

.box-main>p,
.box-main>blockquote,
.box-main>ul,
.box-main>ol,
.box-main>dl,
.box-main>table,
.box-main>details,
.box-main>pre,
.box-main>h1,
.box-main>h2,
.box-main>h3,
.box-main>h4,
.box-main>h5,
.box-main>h6,
.box-main>hr {
  margin-top: 0;

  /* eslint-disable-next-line css/no-invalid-properties */
  margin-bottom: var(--MARGIN_MAIN);
}

.box-main>*:last-child {
  /* selector for the last child regardless of type inside of a div */
  margin-bottom: 0;
}

.box-main>h1:has(+hr):nth-last-child(2),
.box-main>h2:has(+hr):nth-last-child(2),
.box-main>h3:has(+hr):nth-last-child(2),
.box-main>h4:has(+hr):nth-last-child(2),
.box-main>h5:has(+hr):nth-last-child(2),
.box-main>h6:has(+hr):nth-last-child(2) {
  /* selector for the last h* (followed by an hr) inside of a div */
  margin-bottom: 0;
}

.box-main>h1:has(+hr),
.box-main>h2:has(+hr),
.box-main>h3:has(+hr),
.box-main>h4:has(+hr),
.box-main>h5:has(+hr),
.box-main>h6:has(+hr) {
  /* Selector for all h# elements followed by hr */

  /* This is deliberately the padding */
  /* eslint-disable-next-line css/no-invalid-properties */
  margin-left: calc(-1 * var(--PADDING_MAIN));

  /* This is deliberately the padding */
  /* eslint-disable-next-line css/no-invalid-properties */
  margin-right: calc(-1 * var(--PADDING_MAIN));
}

.box-main blockquote:has(+blockquote) {
  /* selector for blockquote followed by a blockquote */
  margin-bottom: 0;

  /* eslint-disable-next-line css/no-invalid-properties */
  padding-bottom: var(--PADDING_MAIN);
}
.icon-lucide-inline {
  vertical-align: text-bottom;
  position: relative;

  overflow: hidden;
}

.icon-lucide-container-red {
  /* eslint-disable-next-line css/no-invalid-properties */
  background: rgb(from var(--BACKGROUND_COLOR_SECONDARY) r g b / 0.75);

  /* eslint-disable-next-line css/no-invalid-properties */
  color: var(--ACCENT_SECONDARY);

  /* eslint-disable-next-line css/no-invalid-properties */
  border-radius: var(--BORDER_RADIUS);
}

.icon-lucide-container-big.icon-lucide-container-red {
  /* eslint-disable-next-line css/no-invalid-properties */
  background: var(--BACKGROUND_COLOR_SECONDARY);
}

.icon-lucide-container-big {
  display: block;

  /* eslint-disable-next-line css/no-invalid-properties */
  padding: var(--PADDING_MAIN);

  /* eslint-disable-next-line css/no-invalid-properties */
  margin: var(--MARGIN_MAIN);
}

.icon-lucide-container-little {
  display: block;

  /* eslint-disable-next-line css/no-invalid-properties */
  padding: calc(var(--PADDING_MAIN) / 2);

  /* eslint-disable-next-line css/no-invalid-properties */
  margin: calc(var(--MARGIN_MAIN) / 2);
}

.icon-lucide-container-rainbow {
  /* Rainbows are always important. */
  animation: rainbow 30s infinite !important;
}

@keyframes rainbow {

  100%,
  0% {
    color: rgba(255, 0, 0, 1);
  }

  10% {
    color: rgba(255, 154, 0, 1);
  }

  20% {
    color: rgba(208, 222, 33, 1);
  }

  30% {
    color: rgba(79, 220, 74, 1);
  }

  40% {
    color: rgba(63, 218, 216, 1);
  }

  50% {
    color: rgba(47, 201, 226, 1);
  }

  60% {
    color: rgba(28, 127, 238, 1);
  }

  70% {
    color: rgba(95, 21, 242, 1);
  }

  80% {
    color: rgba(186, 12, 248, 1);
  }

  90% {
    color: rgba(251, 7, 217, 1);
  }
}
.ref-flex {
  display: flex;
  flex-direction: row;

  /* eslint-disable-next-line css/no-invalid-properties */
  gap: var(--MARGIN_MAIN);

  /* eslint-disable-next-line css/no-invalid-properties */
  margin-bottom: var(--MARGIN_MAIN);

  justify-content: space-between;
  flex-wrap: wrap;
}

.ref-flex>div {
  min-width: fit-content;
}
.monospace {
  /* eslint-disable-next-line css/no-invalid-properties */
  font-family: var(--MONOSPACE);
}
.color-bar {
  height: 1em;
  width: 3em;
}
html,
body {
  font-size: 1rem;

  /* eslint-disable-next-line css/no-invalid-properties */
  font-family: var(--HUMANIST);

  /* eslint-disable-next-line css/no-invalid-properties */
  color: var(--COLOR_MAIN);
  line-height: 1.5;

  /* eslint-disable-next-line css/no-invalid-properties */
  background-color: var(--BACKGROUND_COLOR_MAIN);
}

body {
  height: 100%;

  display: flex;
  flex-direction: column;
}

.index-main {
  flex: 1;
}
nav {
  /* eslint-disable-next-line css/no-invalid-properties */
  box-shadow: var(--SHADOW);

  /* eslint-disable-next-line css/no-invalid-properties */
  background-color: var(--BACKGROUND_COLOR_SECONDARY);

  /* eslint-disable-next-line css/no-invalid-properties */
  margin-bottom: var(--MARGIN_MAIN);
}

.nav-container {
  /* eslint-disable-next-line css/no-invalid-properties */
  max-width: var(--WIDTH);
  margin: 0 auto;

  display: flex;
  flex-wrap: nowrap;

  align-items: baseline;
}

a.nav-link {
  text-decoration: none;
}

.nav-container h1,
.nav-container h2,
.nav-container h3,
.nav-container h4,
.nav-container h5,
.nav-container h6 {
  /* eslint-disable-next-line css/no-invalid-properties */
  padding: var(--PADDING_MAIN);

  /* eslint-disable-next-line css/no-invalid-properties */
  padding-bottom: calc(var(--PADDING_MAIN) / 2)
}

.nav-link h1,
.nav-link h2,
.nav-link h3,
.nav-link h4,
.nav-link h5,
.nav-link h6 {

  /* eslint-disable-next-line css/no-invalid-properties */
  color: var(--COLOR_MAIN);
}

.nav-header h1,
.nav-header h2,
.nav-header h3,
.nav-header h4,
.nav-header h5,
.nav-header h6 {

  /* eslint-disable-next-line css/no-invalid-properties */
  color: var(--COLOR_CODE);
}

.nav-spacer {
  flex: 1;
}

.nav-link:hover {
  /* eslint-disable-next-line css/no-invalid-properties */
  background-color: color-mix(in srgb, var(--BACKGROUND_COLOR_SECONDARY), white 25%);
}

.nav-highlight {
  width: 50%;
  height: 1px;
  display: block;
  margin: 0 auto;

  /* eslint-disable-next-line css/no-invalid-properties */
  margin-bottom: calc(var(--PADDING_MAIN) / 2)
}

.nav-active {

  /* eslint-disable-next-line css/no-invalid-properties */
  background-color: var(--COLOR_CODE);
}

.nav-marker h1,
.nav-marker h2,
.nav-marker h3,
.nav-marker h4,
.nav-marker h5,
.nav-marker h6 {

  /* eslint-disable-next-line css/no-invalid-properties */
  color: var(--ACCENT_SECONDARY);
}
.article-main {
  /* eslint-disable-next-line css/no-invalid-properties */
  max-width: var(--WIDTH);
  margin-right: auto;
  margin-left: auto;
}
#toast {
  --TOAST_POSITION: 50px;

  visibility: hidden;
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  max-width: 400px;

  z-index: 99;
  bottom: var(--TOAST_POSITION);
}

#toast.toast-show {
  visibility: visible;

  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }

  to {
    bottom: var(--TOAST_POSITION);
    opacity: 1;
  }
}

@keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }

  to {
    bottom: var(--TOAST_POSITION);
    opacity: 1;
  }
}

@-webkit-keyframes fadeout {
  from {
    bottom: var(--TOAST_POSITION);
    opacity: 1;
  }

  to {
    bottom: 0;
    opacity: 0;
  }
}

@keyframes fadeout {
  from {
    bottom: var(--TOAST_POSITION);
    opacity: 1;
  }

  to {
    bottom: 0;
    opacity: 0;
  }
}
.footer-main {
  /* eslint-disable-next-line css/no-invalid-properties */
  background-color: var(--BACKGROUND_COLOR_SECONDARY);
  width: 100%;
  /* eslint-disable-next-line css/no-invalid-properties */
  padding: var(--PADDING_MAIN);
  text-align: center;
}
.url-inline-with-icon img {
  display: inline;
  position: relative;
  vertical-align: text-bottom;
  width: 1em;
  height: 1em;
  overflow: hidden;
  margin-right: 5px;
}
.tag-link {
  text-decoration: none;

  /* eslint-disable-next-line css/no-invalid-properties */
  color: var(--COLOR_MAIN);
}

.tag-item {
  padding: .2em .4em;
  font-size: 85%;

  /* eslint-disable-next-line css/no-invalid-properties */
  border-radius: var(--BORDER_RADIUS);

  /* eslint-disable-next-line css/no-invalid-properties */
  background-color: var(--ACCENT_TERTIARY);
  white-space: nowrap;
}

.tag-item:hover {
  /* eslint-disable-next-line css/no-invalid-properties */
  background-color: color-mix(in srgb, var(--ACCENT_TERTIARY), white 25%);
}

.tag-count {
  margin-left: 5px;
  filter: brightness(75%);
}