.max-w-prose {
  max-width:240ch
}

.panzoom-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  cursor: zoom-out;
  overflow: hidden;
}

.panzoom-popup img {
  max-width: 100%;
  max-height: 100%;
  cursor: grab;
  vertical-align: middle;
  margin-left: auto;
  margin-right: auto;
}

.panzoom-popup .panzoom-overlay {
  position: relative;
  width: 100%;
  height: 100%;
}

.panzoom-container {
  cursor: zoom-in;
  display: inline-block; /* Shrink-wrap the content */
  max-width: fit-content; /* Ensure the container doesn't grow larger than its content */
  max-height: fit-content; /* Restrict height similarly */
  margin: 0 auto; /* Optional: Center the container if necessary */
  overflow: hidden; /* Ensure no content overflows */
}

.panzoom-container img {
  display: block;
  max-width: 100%;
  height: auto;
}

.gallery {
  width: auto; /* Allow it to size naturally */
  max-width: 100%; /* Prevent overflow */
  margin-bottom:8px;
}

.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color:var(--tw-prose-links);
  text-decoration:underline;
  font-weight:500;
  text-decoration-color:rgba(var(--color-secondary-700), 1);
  text-decoration-thickness:1px;
  text-decoration-style:wavy;
}

.prose nav a {
  color:var(--tw-prose-links);
  text-decoration:none;
  font-weight:500;
  text-decoration-color:rgba(var(--color-primary-300), 1);
}

.dark\:prose-invert:is(.dark *) :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  text-decoration-color:rgba(var(--color-secondary-700), 1);
}

.prose {
  --tw-prose-body:rgba(var(--color-neutral-700), 1);
  --tw-prose-headings:rgba(var(--color-neutral-800), 1);
  --tw-prose-lead:rgba(var(--color-neutral-500), 1);
  --tw-prose-links:rgba(var(--color-secondary-600), 1);
  --tw-prose-bold:rgba(var(--color-neutral-900), 1);
  --tw-prose-counters:rgba(var(--color-neutral-800), 1);
  --tw-prose-bullets:rgba(var(--color-neutral-500), 1);
  --tw-prose-hr:rgba(var(--color-neutral-200), 1);
  --tw-prose-quotes:rgba(var(--color-neutral-700), 1);
  --tw-prose-quote-borders:rgba(var(--color-primary-200), 1);
  --tw-prose-captions:rgba(var(--color-neutral-500), 1);
  --tw-prose-kbd:#111827;
  --tw-prose-kbd-shadows:17 24 39;
  --tw-prose-code:rgba(var(--color-secondary-700), 1);
  --tw-prose-pre-code:rgba(var(--color-neutral-700), 1);
  --tw-prose-pre-bg:rgba(var(--color-neutral-50), 1);
  --tw-prose-th-borders:rgba(var(--color-neutral-500), 1);
  --tw-prose-td-borders:rgba(var(--color-neutral-300), 1);
  --tw-prose-invert-body:rgba(var(--color-neutral-300), 1);
  --tw-prose-invert-headings:rgba(var(--color-secondary-600), 1);
  --tw-prose-invert-lead:rgba(var(--color-neutral-500), 1);
  --tw-prose-invert-links:rgba(var(--color-secondary-600), 1);
  --tw-prose-invert-bold:rgba(var(--color-neutral), 1);
  --tw-prose-invert-counters:rgba(var(--color-neutral-400), 1);
  --tw-prose-invert-bullets:rgba(var(--color-neutral-600), 1);
  --tw-prose-invert-hr:rgba(var(--color-neutral-500), 1);
  --tw-prose-invert-quotes:rgba(var(--color-neutral-200), 1);
  --tw-prose-invert-quote-borders:rgba(var(--color-primary-900), 1);
  --tw-prose-invert-captions:rgba(var(--color-neutral-400), 1);
  --tw-prose-invert-kbd:#fff;
  --tw-prose-invert-kbd-shadows:255 255 255;
  --tw-prose-invert-code:rgba(var(--color-secondary-400), 1);
  --tw-prose-invert-pre-code:rgba(var(--color-neutral-200), 1);
  --tw-prose-invert-pre-bg:rgba(var(--color-neutral-700), 1);
  --tw-prose-invert-th-borders:rgba(var(--color-neutral-500), 1);
  --tw-prose-invert-td-borders:rgba(var(--color-neutral-700), 1);
  font-size:1rem;
  line-height:1.75
}

/*
p {
  background-color:rgba(var(--color-primary-900), 0.5);
  border-radius:2px;
  padding-right:4px;
  padding-left:4px;
} */

.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color:var(--tw-prose-captions);
  font-size:0.875em;
  line-height:1.4285714;
  margin-top:0.8571429em
}

/* .grow :where(main){
  flex-grow:1;
  background-color:rgba(var(--color-primary-900), 0.5);
  border-width:2px;
  border-style:dashed;
  border-radius:2px;
  border-color:rgba(var(--color-secondary-600), 1);
  padding-right:8px;
  padding-left:8px;
  padding-top:8px;
} .*/

.article-content {
  background-color:rgba(var(--color-primary-900), 0.5);
  border-width:2px;
  border-style:dashed;
  border-radius:2px;
  border-color:rgba(var(--color-secondary-600), 1);
  padding-right:8px;
  padding-left:8px;
  padding-bottom:8px;
  border-top-color:transparent;
}

#single_header {
  flex-grow:1;
  background-color:rgba(var(--color-primary-900), 0.5);
  border-width:2px;
  border-style:dashed;
  border-radius:2px;
  border-color:rgba(var(--color-secondary-600), 1);
  padding-right:8px;
  padding-left:8px;
  padding-top:8px;
  border-bottom-color:transparent;
}

.prose .chroma:is(.dark *) {
  background-color:rgba(var(--color-primary-900), 0.8);
  --tw-text-opacity:1;
  color:rgba(var(--color-neutral-200), var(--tw-text-opacity))
}

.dark\:prose-invert:is(.dark *) :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  background-color:transparent;
}

.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color:var(--tw-prose-headings);
  font-weight:700;
  font-size:1.5em;
  margin-top:0.5em;
  margin-bottom:0.2em;
  line-height:1.3333333
}

.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color:var(--tw-prose-headings);
  font-weight:600;
  font-size:1.25em;
  margin-top:0.5em;
  margin-bottom:0.2em;
  line-height:1.6
}

.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color:var(--tw-prose-headings);
  font-weight:600;
  margin-top:0.5em;
  margin-bottom:0.2em;
  line-height:1.5
}

.cool-title {
  color:rgba(var(--color-primary-700), 1);
  background-color:rgba(var(--color-secondary-600), 1);
  padding:4px;
}

.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-color:var(--tw-prose-hr);
  border-top-width:1px;
  margin-top:0.5em;
  margin-bottom:0.5em
}

.min-w-content {
  min-width:fit-content;
}

.vari-flex {
  display:flex;
  flex-wrap:nowrap;
}

@media (max-width: 512px) {
  .vari-flex {
    flex-wrap:wrap;
  }
}

.card-styled {
  background-color:rgba(var(--color-primary-900), 0.5);
  border-width:2px;
  border-style:dashed;
  border-radius:2px;
  border-color:rgba(var(--color-secondary-600), 1);
  padding-top:8px;
  padding-right:8px;
  padding-left:8px;
}

.caption {
  background-color:rgba(var(--color-primary-900), 0.5);
  border-width:1px;
  border-style:hidden;
  border-radius:8px;
  border-color:rgba(var(--color-secondary-600), 1);
  padding:4px;
  padding-left:8px;
  padding-right:8px;
  max-width:fit-content;
  font-style:italic;
  margin:auto;
  text-align:center;
}