:root {
  --md-text-font: "Roboto Mono", monospace;
}

/* Titles & Navigation */
h1, h2, h3 {
  text-transform: uppercase;
}

.md-nav__link {
  font-family: "Roboto Mono", monospace;
}

/* --- CLEAN GALLERY GRID SETTINGS --- */
.grid.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

/* Remove the "Card" look and stubborn borders from all grid containers */
.md-typeset .grid.cards > :is(ul, ol) > li,
.md-typeset .grid > :is(ul, ol) > li,
.grid.cards > li, 
.grid.cards > div {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

/* Thumbnails: Transparent background, No border, No Grow Effect */
.grid.cards img {
    width: 100%;
    height: 250px;
    object-fit: contain; 
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    
    /* NO GROW EFFECT */
    transform: none !important; 
    transition: none !important;

    /* MAGNIFYING GLASS CURSOR */
    cursor: zoom-in !important; 
}

/* --- SINGLE IMAGE SETTINGS (Standard Posts) --- */
/* Centers images NOT in a grid, removes border, adds magnifying glass */
.md-content :not(.grid) > p > img {
    display: block;
    margin: 2em auto;
    width: 400px;
    height: auto;
    border: none !important;
    box-shadow: none !important;
    cursor: zoom-in !important;
}

/* --- GLIGHTBOX OVERRIDE --- */
/* Ensures big images aren't constrained by the 250px/400px rules */
.glightbox-container img {
    width: auto !important;
    max-width: 95vw !important;
    max-height: 95vh !important;
    height: auto !important;
    border: none !important;
    cursor: pointer !important;
}