/* SIL OFL font by Nassim Gafarov https://github.com/zapolnoch https://github.com/zapolnoch/CousinsHug */
@font-face {
  font-display: swap;
  font-family: 'Cousins Hug Woff2';
  font-style: normal;
  src: url('../fonts/CousinsHug/Cousinshug-Regular-woff2.woff2') format('woff2');
}

/* SIL OFL font by Noponies (Dale Sattler) https://noponies.com/ https://www.fontspace.com/day-care-font-f28265 */
@font-face {
  font-family: "Day Care Mod";
  src: url('../fonts/DayCare/DayCareRegular-Mod.woff2') format('woff2');
  font-weight: normal;
}

/* SIL OFL font by Jacques Le Bailly, Sebastian Kosch. https://github.com/Fonthausen/CrimsonPro https://v-fonts.com/fonts/crimson-pro */
@font-face {
  font-family: "Crimson Pro VF";
  src: url('../fonts/CrimsonPro/CrimsonPro-Roman-VF.woff2') format('woff2 supports variations'),
    url('../fonts/CrimsonPro/CrimsonPro-Roman-VF.woff2') format('woff2-variations');
  font-style: normal;
}

strong,
b {
  font-weight: 700;
  text-shadow: 0px 0px 1px black;
}

/* disable chrome auto dark theme */
:root {
  color-scheme: only light;
  scrollbar-color: #919191 #32343b;
}

html {
  color: #E8E8E8;
  background-color: #32343b;

  font-family: "Crimson Pro VF";
  line-height: 1;
  font-weight: 400;
  scroll-behavior: smooth;
  scroll-padding-top: 2.5svh;
  -webkit-overflow-scrolling: touch;
}

body {
  margin: 0 auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  text-shadow: 1px 1px 1px #00000028;
  min-height: 100lvh;
  scroll-behavior: smooth;
  hyphens: auto;
  overflow-wrap: break-word;
  text-wrap: wrap;
  word-break: break-word;
  word-wrap: break-word;
}

ul:not(.footnotes ul),
li:not(.footnotes li):not(.footnotes ul li) {
  list-style: disc outside none;
}

li {
  list-style-type: none;
  line-height: 1.2;
}

ul>li:not(:last-child) {
  margin-bottom: 0.4rem;
}

ul>li>ul>li {
  line-height: 1.4;
  margin-bottom: 0 !important;
}

ol>li {
  list-style-type: decimal !important;
}

ol li {
  list-style-type: decimal !important;
  list-style-position: inside !important;
}

ol li::marker {
  font-weight: bold;
  font-size: 1.35rem;
  color: #bb7676;
}

li::marker {
  font-size: 0.86rem;
}

em::after {
  content: '\200A\200A';
}

h1>span {
  overflow: hidden;
  white-space: nowrap;
}

.gallery,
.gallery-m,
.gallery-s,
.gallery-xs,
.gallery-left,
.gallery-m-left,
.gallery-s-left,
.gallery-xs-left {
  display: flex;
  flex-wrap: nowrap;
  gap: 2rem;
  margin: 0.5rem 0 1rem 0;
  text-align: center;
  justify-content: center;
}

pandoc wraps img in p tag .gallery p,
.gallery-m p,
.gallery-s p,
.gallery-xs p,
.gallery-left p,
.gallery-m-left p,
.gallery-s-left p,
.gallery-xs-left p {
  display: contents;
}

.gallery figure,
.gallery-m figure,
.gallery-s figure,
.gallery-xs figure,
.gallery-left figure,
.gallery-m-left figure,
.gallery-s-left figure,
.gallery-xs-left figure {
  margin: 0;
}

.gallery img,
.gallery-m img,
.gallery-s img,
.gallery-xs img,
.gallery-left img,
.gallery-m-left img,
.gallery-s-left img,
.gallery-xs-left img {
  margin: 0;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 60svh;
  object-fit: scale-down;
}

.gallery img,
.gallery-left img {
  max-height: 45svh;
}

.gallery-m img,
.gallery-m-left img {
  max-height: 40svh;
}

.gallery-s img,
.gallery-s-left img {
  max-height: 30svh;
}

.gallery-xs img,
.gallery-xs-left img {
  max-height: 24svh;
}

.gallery-left,
.gallery-m-left,
.gallery-s-left,
.gallery-xs-left {
  margin: 1rem 0 1rem 0;
  text-align: left;
  justify-content: left;
}


/* style every link except <a> tag used in pandoc fenced code blocks */
.toggle-button,
a:not(.sourceCode *):not(a.footnote-ref):not(.icon-link) {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.29rem;
  /* text-decoration-color: #e1ea00; */
  text-decoration-color: #b0b900;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.29rem;
  text-decoration-skip-ink: auto;
  line-height: 1.5;
  display: inline-block;
  text-wrap: wrap;
}

a:hover,
a.footnote-back:hover {
  text-decoration-color: #e1ea00 !important;
}

a.visited:visited {
  color: #cec8bd !important;
}

/* bare font-awesome SVG icons */
.icon {
  width: auto;
  height: 1.2rem;
  fill: #C8C3BC;
  transition: fill 0.3s ease;
}

.icon-link {
  color: inherit;
  text-decoration: none;
  line-height: 0;
  display: inline-block;
}

.icon-link:hover .icon {
  fill: #966B58;
}

/* Footnotes */
input {
  display: none;
}

input+label {
  cursor: pointer;
  color: #ffffffa3;
}

small {
  font-size: 0.9rem;
}

input+label+small {
  display: none;
  position: absolute;
  transform: translate(-1%, 0);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s 0.05s;
}

/* Desktop: hover only */
@media (hover: hover) and (pointer: fine) {
  input+label:hover {
    color: #dbd8d4;
  }

  input+label:hover+small {
    display: block;
    opacity: 1;
    visibility: visible;
    z-index: 1;
    margin-top: 0.25rem;
    padding: 0.8rem;
    border-radius: 8px;
    max-width: 56ch;
    pointer-events: none;
    background: linear-gradient(145deg, rgba(43, 44, 49, 1), rgba(58, 60, 66, 1));
    color: #f0f0f0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
}

/* Mobile: click to toggle */
@media (hover: none) or (pointer: coarse) {
  input:checked+label {
    color: #dbd8d4;
  }

  input:checked+label+small {
    display: block;
    opacity: 1;
    visibility: visible;
    z-index: 1;
    margin-top: 0.25rem;
    padding: 0.8rem;
    border-radius: 8px;
    max-width: 56ch;
    pointer-events: none;
    background: linear-gradient(145deg, rgba(43, 44, 49, 1), rgba(58, 60, 66, 1));
    color: #f0f0f0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
}

.page-title {
  margin: 1rem 0 0 0 !important;
  text-align: center;
}

.hero {
  color: #d4d9df;
  font-optical-sizing: auto;
  font-size: clamp(1rem, 6vh, 3.5rem) !important;
  /* font-weight: 600; */
  font-style: normal;
  text-shadow: 1px 1px 1px #00000040;
  text-align: center;
  white-space: nowrap;
  margin: 0.8rem 0 1.2rem 0;
  font-family: 'Day Care Mod';
}

.hero-penguins-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  transform: translateY(-0.7rem);
}

.hero-penguins-row>img {
  margin: 0;
  flex: 1 1 0;
  max-height: 20vh;
  min-width: 0;
  object-fit: contain;
  filter: drop-shadow(0 0px 2px rgba(0, 0, 0, 0.2));
}

.herobot {
  text-align: center;
  margin-top: 1.2rem;
}

.template-articles-list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: start;
  gap: 0.5rem;
}

.template-articles-list a {
  text-decoration-thickness: 1px !important;
  text-decoration-style: solid !important;
}

.template-article-date {
  font-size: 0.8em;
  margin-right: 0.5rem;
  color: #919191;
  list-style: none !important;
}

.template-article {
  font-size: 1.2rem;
  list-style: none !important;
}

.all-articles-tags {
  margin-bottom: 0.7rem;
}

.all-articles {
  margin-top: 0;
  margin-bottom: 0;
}

.header-section-number {
  font-size: 0.7em;
  color: #9f9f9f;
}

a>.toc-section-number {
  color: inherit;
}

h1>.header-section-number {
  display: none;
}

.toc-section-number {
  display: none;
}

/* h2 h3 bullets */
h2:not(.nomarker),
h3:not(.nomarker) {
  display: list-item;
  list-style-position: outside;
}

h2:not(.nomarker)::marker {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="10"><circle cx="10" cy="5" r="5" fill="%23966B58" /></svg>');
}

h3:not(.nomarker)::marker {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="10"><circle cx="10" cy="5" r="5" fill="%23919191" /></svg>');
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 2rem 0 0.2rem 0;
  color: #E1E1E1F0;
  font-family: 'Day Care Mod';
  font-optical-sizing: auto;
  font-style: normal;
  text-shadow: 1px 1px 1px #00000040;
}


h1 {
  font-size: 2rem;
  font-weight: 600;
  text-wrap: balance;
}

h2,
h3,
h4,
h5,
h6 {
  margin: 1rem 0 0rem 0;
  font-size: 1.4rem;
  font-weight: 500;
  text-wrap: balance;
}

h3,
h4,
h5,
h6 {
  margin: 0.5rem 0 0rem 0;
}

p {
  margin: 0 0 0.5rem 0;
  line-height: 1.4;
  text-align: left;
  hyphens: auto;
  text-wrap: wrap;
  text-rendering: optimizeLegibility;
  word-break: break-word;
}

a br {
  display: none;
}

/* Cooler nested lists */
ul>li:has(> ul)::first-line {
  text-decoration: underline !important;
  list-style-type: none !important;
  font-weight: bold;
  text-indent: -2em;
}

.left ul>li:has(> ul) {
  list-style-type: none !important;
}

.sources>p>a {
  font-size: 0.9rem;
  overflow: clip !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  width: 100%;
  padding-bottom: 0.2rem;
}

.sources>p>span {
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  width: 100%;
  padding-bottom: 0.1rem;
}

footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding-bottom: 1.4rem;
  padding-top: 1rem;
}

footer>.inner-col {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
}

footer>.inner-col>.inner-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 0.5rem;
}

footer>.inner-col>.inner-row>.socials {
  display: flex;
  flex-direction: row;
  gap: 0.2rem;
  line-height: 1 !important;
}

footer>.inner-col>.inner-row>.nav {
  display: flex;
  flex-direction: row;
  gap: 0.2rem;
  line-height: 1 !important;
}


footer hr {
  width: 65%;
  height: 1px;
  border: none;
  margin: 0;
}

footer>.inner-col>.inner-row {
  color: #9f9f9f;
}

ul {
  list-style-type: circle;
  display: block;
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0;
  line-height: 1.4;
}

ol {
  display: block;
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0;
  line-height: 1.5;
}

ol>li {
  line-height: 1.1;
}

ol>li:not(:last-child) {
  margin-bottom: 0.4rem;
}

p,
li,
summary {
  font-size: 1.15rem;
}

q {
  font-size: 1.333rem;
}

.bottom-header {
  margin-top: 8rem;
  justify-content: space-evenly;
  display: flex;
  padding: 10px;
}

.bottom-header-link {
  font-size: 1.25rem;
}

blockquote {
  margin: 0 0 1rem 0;
  padding: 1rem 1.2rem 0.1rem 1.2rem;
  max-width: fit-content;
  border-left: none;
  border-radius: 16px;

  background: linear-gradient(145deg, #424242, #585e68);
  color: #f0f0f0;

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  filter: drop-shadow(0 0px 4px rgba(0, 0, 0, 0.4));
}

blockquote a,
blockquote a:visited,
blockquote a:hover {
  color: #fffcf0;
  text-decoration: underline;
}

img {
  display: block;
  object-fit: contain;
  max-inline-size: 100%;
  filter: drop-shadow(0 0px 10px rgba(0, 0, 0, 0.3));
  border-radius: 8px;
  margin: 0.5rem 0 1rem 0rem;
}

/* sometimes pandoc puts imgs in p tags...*/
p:has(img) {
  margin: 0;
}

figure>img {
  margin: 0rem 0 0rem 0rem;
}

figure {
  margin: 1rem 0 1rem 0;
}

figure+p {
  margin: -0.5rem 0 0.5rem 0;
}

/* figcaption bottom, topcaption top */
figcaption,
.topcaption {
  margin: 0.6rem 0 0 0;
  color: #919191;
  font-weight: bold;
  text-align: center;
  font-size: 1rem;
  line-height: 1;
}

.topcaption {
  margin: 0 auto 0.5rem auto;
}

.topcaption>p {
  font-size: 1rem;
  margin: 0.5rem 0 0.1rem 0;
  line-height: 1;
  text-align: center;
}

svg {
  height: auto;
  max-width: 100%;
  vertical-align: text-bottom;
}

summary {
  cursor: pointer;
}

ol {
  margin: 0 0 0.5rem 0rem;
}

ul {
  margin: 0 0 0.5rem 2rem;
}

ul.template-articles-list {
  margin-left: 0;
}

li>ol,
li>ul {
  margin-top: 0;
}

code {
  /* set this in src/pandoc/pandoc.theme instead... */
  font-family: "Crimson Pro VF";
  font-size: 1rem;
  margin: 0;
  border-radius: 6px;
  background-color: #2B2C31;
  padding: 0.2em 0.3em 0.35em 0.3em;
  filter: none;
}

pre {
  font-family: 'Cousins Hug Woff2';
  margin: 0 0 1rem 0;
  overflow: auto;
  text-decoration: none;
}

pre code {
  font-family: 'Cousins Hug Woff2';
  font-size: 0.8rem;
  padding: 0;
  overflow: visible;
  overflow-wrap: normal;
}

div.sourceCode {
  /* set this in src/pandoc/pandoc.theme instead... */
  border-radius: 10px;
  padding: 0 1rem 0 1rem;
  width: fit-content;
  /* max-width adjusted for right padding */
  max-width: calc(100% - 1rem);
  max-height: 70svh;
  margin: 0 auto 1rem auto;
  filter: drop-shadow(0 0px 4px rgba(0, 0, 0, 0.35));
}

.sourceCode {
  background-color: transparent;
}

pre.sourceCode {
  padding: 0.8rem 0 0.8rem 0;
  overflow: auto;
}

/* pandoc fenced code blocks */
/* remove border, add left margin */
pre.numberSource {
  overflow: visible;
  border-left: 0px;
  margin-left: 2rem;
}

/* set lineNumber color, remove underlines */
pre.numberSource code>span>a:first-child::before {
  /* line color set in pandoc.theme */
  /* color: #41465696; */
  text-decoration: none;
  padding: 0;
}

/* make lineNumber unclickable */
pre.numberSource code>span>a {
  pointer-events: none;
}

/*set selection colors*/
::selection {
  background-color: #9595953b;
}

blockquote ::selection {
  color: #100f0f;
}

.footnotes hr {
  background-color: #91919191;
  border: none;
  height: 1px;
  margin: 1rem 0;
  width: 40%;
}

hr {
  background-color: #91919191;
  border: none;
  height: 1px;
  margin: 1rem 0;
}

/* Tables */
table {
  display: inline-block;
  max-height: 40svh;
  max-width: 100%;
  overflow: auto !important;
  border-collapse: separate;
  border-spacing: 0;
  color: #DBD6CE;
  scrollbar-width: auto;
  table-layout: fixed;
  overflow-x: auto;
  margin: 0.5rem auto 1rem auto;
  filter: drop-shadow(0 0px 1px rgba(0, 0, 0, 0.35));
  border-radius: 8px;
}

/* pandoc */
.colheader table tbody tr td:first-child {
  background: #202B2F;
  border-right: 2px solid #283337;
  text-align: center;
  color: #c1c1c1;
  font-weight: 700;
  font-size: 0.98rem;
}

th,
td {
  padding: 0.6rem;
  min-width: 6rem;
  text-align: left;
  font-size: 0.98rem;
  white-space: nowrap;
}

thead th {
  position: sticky;
  top: 0;
  background: #202B2F;
  color: #c1c1c1;
  font-weight: 700;
  font-size: 0.98rem;
  z-index: 10;
  border-bottom: 2px solid #283337;
}

tbody td {
  background: #1C262A;
}

tbody tr:nth-child(even) td {
  background: #202B2F;
}

tbody tr:hover td {
  background: #283337 !important;
}

header {
  display: flex;
  justify-content: center;
  align-items: left;
  flex-direction: column;
  gap: 0.2rem;
}

header#title-block-header-col {
  display: flex;
  flex-direction: column;
  margin: 1.5rem 0 1rem 0;
  /* margin: 1.5rem 0 1rem 0; */
  gap: 0.8rem;
  /* align-items: stretch; */
  /* min-height: 14svh; */
}

.title-block-header-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 0.8rem;
  align-items: stretch;
  min-height: 14svh;
}

.flex-img {
  display: flex;
  contain: size;
  flex-grow: 1;
  flex-shrink: 0;
  min-width: 20%;
}

.flex-img img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0px 2px rgba(0, 0, 0, 0.2));
  margin: 0;
  transform: translateY(0.6rem);
}

.flex-title {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex-grow: 1;
  flex-shrink: 1;
  justify-content: end;
  padding: 1rem 0rem 0rem 0rem;
}

.flex-title>h1 {
  margin: 0;
  text-wrap: balance;
  line-height: 1.3;
  font-size: 2rem;
}

.flex-meta {
  color: #C8C3BC;
  display: flex;
  gap: 0.5rem;
  line-height: 1 !important;
}

.flex-meta-small {
  display: none;
  justify-content: left;
  /* margin-top: 0.4rem; */
}

.flex-meta a {
  line-height: 1 !important;
}

.flex-meta>.author-nstuff {
  display: flex;
  flex-direction: row;
  gap: 0.3rem;
  line-height: 1 !important;
}

.flex-meta>.author-nstuff>.socials {
  display: flex;
  flex-direction: row;
  gap: 0.1rem;
  line-height: 1 !important;
}

.flex-meta>.date {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  line-height: 1 !important;
}

.flex-meta>.tags {
  display: flex;
  flex-direction: row;
  gap: 0;
  line-height: 1 !important;
}

.flex-meta>.tags span:nth-child(2) {
  margin-left: 0.5rem;
}

.flex-meta>.tags span:nth-child(3) {
  margin-left: 0.4rem;
}

header#title-block-header>.flex-meta>span {
  font-size: 1.13rem;
}

.tags>a:not(:first-child) {
  margin-left: 8px;
}

/* Main layout container */
.main-layout {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 0;
  padding: 0;
}

/* CONTENT */
/* margins on left/right(TOC)/bottom for content */
.content {
  display: flex;
  flex-direction: column;
  width: fit-content;
  /* target ~70chars per line, depends on font */
  max-width: 58ch;
  padding: 0;
  /* overflow-x should be hidden */
  overflow-x: hidden;
  overflow-y: auto;
  /* don't cut shadows */
  /* this messes layout responsivity*/
  /* overflow: visible; */
  /* use dvh for mobile here */
  /* use padding for shadows/bullet points */
  padding: 0 1.6rem 0 1.6rem;
  min-height: 100lvh;
  gap: 0.5rem;
}

/* SIDEBAR */
.sidebar {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-left: 3rem;
  justify-content: center;
}

.sidebar nav.navbar {
  margin-top: 10px;
  margin-left: 3px;
}

nav.navbar>.inner {
  display: flex;
  align-items: start;
  justify-content: left;
  flex-direction: row;
  gap: 1rem;
}

nav.navbar-mobile {
  display: none;
}

nav.navbar-mobile-inline {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-top: 0.5rem;
  margin-bottom: 6rem;
}

nav.navbar-mobile-inline>.inner {
  display: flex;
  align-items: start;
  justify-content: center;
  justify-items: center;
  flex-direction: row;
  gap: 1rem;
  background-color: #2b2c31;
  padding: 0.6rem 0.5rem;
  border-radius: 18px;
  box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.2);
}

nav.navbar-mobile-inline>.inner>.icon-link {
  background: #343a42;
  padding: 0.5rem 0.5rem;
  border-radius: 18px;
}

.toc {
  margin-top: auto;
  margin-left: 0;
  padding-right: 0;
  overflow-y: auto;
  position: sticky;
  left: 0;
  flex-shrink: 0;
  max-height: 60svh;
  /* hide sidebar scrollbar */
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
  /* border-left: 0.4rem solid #2b2c31; */
}

.toc * {
  font-size: 0.9rem;
  white-space: nowrap;
  color: #ffffffa3;
  box-shadow: none;
  text-shadow: none;
  font-family: "Crimson Pro VF";
  font-weight: 400;
  line-height: 1.4 !important;
}

/* hide sidebar scrollbar */
.toc::-webkit-scrollbar {
  display: none;
}

.toc a {
  text-decoration: none !important;
  box-shadow: none !important;
}

.toc a:hover {
  text-decoration: none !important;
  /* color: #DBD6CE !important; */
  color: #dbd8d4 !important;
}

/* if nested, it goes like ul > li > ul > li ... */
.toc ul {
  padding-left: 0;
  margin: 0 0 0 0;
}

.toc>ul {
  margin-left: 0.4em;
}

.toc>ul>li {
  list-style: none !important;
  margin-bottom: 0;
}

/* level 2 */
.toc>ul>li>ul {
  margin: 0 0 0 2em;
}

.toc>ul>li>ul>li::marker {
  color: #966B58;
}

/* level 3 */
.toc>ul>li>ul>li>ul {
  margin: 0 0 0 1.1em;
}

.toc>ul>li>ul>li>ul>li::marker {
  color: #919191;
}

/* CODE */
code {
  white-space: pre-wrap;
}

span.smallcaps {
  font-variant: small-caps;
}

div.columns {
  display: flex;
  gap: min(4vw, 1.5rem);
}

div.column {
  flex: auto;
  overflow-x: auto;
}

div.hanging-indent {
  margin-left: 1.5rem;
  text-indent: -1.5rem;
}

/* articles.html */
.container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
}

.tabs {
  display: flex;
  gap: 1rem;
  text-transform: capitalize;
}

/* Hide checkboxes but keep them accessible */
.tab-checkbox {
  position: absolute;
  opacity: 0;
}

.button,
.tab-button,
.icon-link,
.icon,
.no-select {
  user-select: none;
}

.tab-button {
  padding: 0.4rem 0.8rem;
  background-color: #C8C3BC;
  border-radius: 9px;
  color: #333;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  display: inline-block;
  font-family: 'Day Care Mod';
  font-size: 1.1rem;
}

.tab-button:hover {
  background-color: #ff9292;
}

.tab-content-container {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  max-width: fit-content;
}

.tab-content {
  display: none;
  padding: 1.2rem 2rem 1.2rem 2rem;
  background-color: #2B2C31;
  border-radius: 18px;
  animation: fadeIn 0.5s ease;
}

.tab-content>h3 {
  margin: 0;
  text-transform: capitalize;
}

/* pandoc fenced divs styles */
.left>* {
  margin-left: 0em;
}

.spaced *:not(:last-child) {
  margin-bottom: 0.6rem;
  line-height: 1.5;
}

/* gallery zoom pandoc filter */
.zoom-item {
  position: fixed;
  inset: 0;
  z-index: -1;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.zoom-trigger {
  display: none !important;
}

.zoom-trigger:checked~.zoom-item {
  z-index: 10000;
  visibility: visible !important;
  opacity: 1;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  isolation: isolate;

  touch-action: pinch-zoom;
  overscroll-behavior: contain;
}

.zoom-trigger:checked~.zoom-item::before {
  content: "";
  position: absolute;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -1;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

.zoom-trigger:checked~.zoom-item img {
  max-width: 90svw !important;
  max-height: 90svh !important;
  width: auto;
  height: auto;
  filter: drop-shadow(0 25px 30px rgba(0, 0, 0, 0.5));
  animation: zoomIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;

  touch-action: pinch-zoom;

  pointer-events: auto;

  user-select: none;
  -webkit-user-select: none;
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

html:has(.zoom-trigger:checked),
body:has(.zoom-trigger:checked) {
  overflow: hidden !important;
  height: auto;
  min-height: 100%;
}

html {
  scrollbar-gutter: stable;
}

.gallery-wrapper .zoom-item:not(.zoom-trigger:checked ~ .zoom-item) {
  position: static;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* more inline css is in pandoc template */

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* text wave */
.wave-text span {
  display: inline-block;
  animation: wave 3s ease-in-out infinite;
}

.wave-text span:nth-child(1) {
  animation-delay: 0s;
}

.wave-text span:nth-child(2) {
  animation-delay: 0.2s;
}

.wave-text span:nth-child(3) {
  animation-delay: 0.4s;
}

.wave-text span:nth-child(4) {
  animation-delay: 0.6s;
}

.wave-text span:nth-child(5) {
  animation-delay: 0.8s;
}

.wave-text span:nth-child(6) {
  animation-delay: 1s;
}

.wave-text span:nth-child(7) {
  animation-delay: 1.2s;
}

.wave-text span:nth-child(8) {
  animation-delay: 1.4s;
}

.wave-text span:nth-child(9) {
  animation-delay: 1.6s;
}

.wave-text span:nth-child(10) {
  animation-delay: 1.8s;
}

.wave-text span:nth-child(11) {
  animation-delay: 2s;
}

.wave-text span:nth-child(12) {
  animation-delay: 2.2s;
}

.wave-text span:nth-child(13) {
  animation-delay: 2.4s;
}

@keyframes wave {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(1.2vh);
  }
}

/* desktop */
@media (max-width: 77rem) {

  .main-layout>.sidebar {
    display: none;
  }

  nav.navbar-mobile {
    display: flex;
    position: fixed;
    bottom: 2.5rem;
    right: 0;
    justify-content: flex-end;
    align-items: center;
    margin-right: 2rem;
  }

  nav.navbar-mobile>.inner {
    display: flex;
    align-items: start;
    justify-content: center;
    justify-items: center;
    flex-direction: row;
    gap: 1rem;
    background-color: #2b2c31;
    padding: 0.6rem 0.5rem;
    border-radius: 18px;
    box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.2);
  }

  nav.navbar-mobile>.inner>.icon-link {
    background: #343a42;
    padding: 0.5rem 0.5rem;
    border-radius: 18px;
  }

  footer>.inner-col>.inner-row>:nth-child(6) {
    display: none;
  }

  footer>.inner-col>.inner-row>:nth-child(7) {
    display: none;
  }
}

/* tiny phones */
@media (width < 25rem) {

  .flex-title>h1 {
    font-size: 1.6rem;
  }

  li::marker {
    font-size: 1.2rem;
  }

  header#title-block-header-col {
    gap: 0.6rem;
  }

  header {
    gap: 0.4rem;
  }

  .flex-img img {
    transform: translateY(0.8rem);
  }

  .title-block-header-row {
    margin-bottom: 0;
  }

  .flex-meta-small {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .flex-meta.flex-meta-small>.tags {
    display: none;
  }

  .flex-meta-large {
    display: none;
  }

  nav.navbar-mobile {
    margin-right: 1rem !important;
  }

  q {
    font-size: 1rem;
  }

  blockquote {
    padding: 1rem 1.2rem 0.1rem 1.2rem;
  }

  .bottom-header {
    margin-top: 5rem;
  }

  .bottom-header-link {
    font-size: 1rem;
  }

  .article-hero {
    padding-bottom: 0rem !important;
  }

  .template-articles-list:not(.index) {
    margin-top: 0px;
  }

  .template-article-meta {
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: flex-start;
    text-align: left;
    gap: 0.2rem;
    padding-bottom: 0.8rem;
  }

  .template-article-date {
    font-size: 0.9rem !important;
  }

  .tab-content-container {
    justify-content: center;
    align-items: center;
    max-width: initial;
    margin-top: 0rem;
  }

}

/* phones */
@media (25rem <=width < 32rem) {

  .flex-title>h1 {
    font-size: 1.6rem;
  }

  li::marker {
    font-size: 1.2rem;
  }

  header#title-block-header-col {
    gap: clamp(0.6rem, -3.004rem + 14.414vw, 1.6rem);
  }

  header {
    gap: 0.8rem;
  }

  .title-block-header-row {
    margin-bottom: 0;
  }

  .flex-meta-small {
    display: flex;
  }

  .flex-meta-large {
    display: none;
  }

  nav.navbar-mobile {
    margin-right: 1rem !important;
  }

  q {
    font-size: 1rem;
  }

  blockquote {
    padding: 1rem 1.2rem 0.1rem 1.2rem;
  }

  .bottom-header {
    margin-top: 5rem;
  }

  .bottom-header-link {
    font-size: 1rem;
  }

  .article-hero {
    padding-bottom: 0rem !important;
  }

  .template-articles-list:not(.index) {
    margin-top: 0px;
  }

  .template-article-meta {
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: flex-start;
    text-align: left;
    gap: 0.2rem;
    padding-bottom: 0.8rem;
  }

  .template-article-date {
    font-size: 0.9rem !important;
  }

  .tab-content-container {
    justify-content: center;
    align-items: center;
    max-width: initial;
    margin-top: 0rem;
  }

}

@media print {
  html {
    background-color: white;
  }

  body {
    background-color: transparent;
    color: black;
    font-size: 1rem;
  }

  h2,
  h3,
  h4 {
    page-break-after: avoid;
  }
}

@media (pointer: coarse) {

  .tab-button:hover {
    background-color: #C8C3BC;
  }

  .icon-link:hover {
    fill: #C8C3BC;
  }

}