/* =========================
   Base styles & utilities
   ========================= */
body {
  font-family: "IBM Plex Mono", monospace;
}

p {
  text-align: justify;
}

.center-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.center-txt {
  text-align: center;
}

/* =========================
   Gallery (Material content)
   ========================= */
/* Grid container: 5 across at full width, centered, with a hard cap so cells
   never exceed ~200px (12px = gap). Falls back via media queries below. */
.md-typeset .gallery {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  justify-items: center;
  max-width: calc(5 * 200px + 4 * 12px);
  margin: 0 auto;
}

/* Flatten Markdown <p> wrappers so images/links are the grid items */
.md-typeset .gallery > p {
  display: contents;
  margin: 0;
  text-align: initial; /* override global justified <p> */
}

/* Item & caption styling */
.md-typeset .gallery figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}
.md-typeset .gallery figcaption {
  font-size: 0.85rem;
  margin-top: 4px;
  text-align: center;
  color: var(--md-default-fg-color--light);
}

/* Thumbnails: square, up to 200px, crop without distortion */
.md-typeset .gallery img {
  display: block;
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: 4px;
}

/* Responsive column count */
@media (max-width: 1100px) {
  .md-typeset .gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .md-typeset .gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 650px) {
  .md-typeset .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 420px) {
  .md-typeset .gallery {
    grid-template-columns: 1fr;
  }
}

/* =========================
   Standalone centered image
   ========================= */
.md-typeset img.center {
  display: block;
  margin: 1rem auto;

  width: auto !important;
  height: auto !important;

  max-width: min(100%, 500px) !important;
  max-height: 500px !important;

  object-fit: contain;
  border-radius: 4px;
}

.md-typeset figure.center {
  max-width: min(100%, 500px);
  margin: 1rem auto;
  text-align: center;
}
.md-typeset figure.center img {
  display: block;

  width: auto !important;
  height: auto !important;

  max-width: 100% !important;
  max-height: 500px !important;

  object-fit: contain;
}

/* Flatten Markdown wrapper inside .center */
.md-typeset .center > p {
  display: contents;
  margin: 0;
}

.md-typeset .center figure {
  max-width: min(100%, 500px);
  margin: 1rem auto;
  text-align: center;
}

.md-typeset .center img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: min(100%, 500px) !important;
  max-height: 500px !important;
  object-fit: contain;
  border-radius: 4px;
}

/* =========================
   Background tiling
   ========================= */
/* html, body {
  background-color: #0B0B0B; /* fallback to solid black if image is slow */
}

body {
  background-image: url("assets/images/misc/newsaint-background.webp"); /* path to your tile */
  background-repeat: repeat;
  background-attachment: fixed; /* steady texture on scroll */
  background-size: 512px 512px; /* adjust scale of tiling */
} */

/* =========================
   Transparent Material surfaces
   ========================= */
:root {
  --md-default-bg-color: #0B0B0B;
  --md-footer-bg-color: #0B0B0B;
  --md-header-bg-color: #0B0B0B;
}