html {
	  font-size: 16px;
	}


    body {
        font-family: "Monospace", Courier, serif;
        margin: 4rem;
        padding: 0;
        font-size: 1.1rem;
        overflow-x: hidden;
    }
    .center { text-align: center; }
    .header-big { text-align: center; font-size: 5rem; font-weight: bold; margin-bottom: 0.8rem; font-style: italic; }
    .header-small { font-size: 1.6rem; font-weight: bold; margin-bottom: 0.375rem; font-style: italic; }
    .divider { border-top: 0.1875rem solid black; margin-top: 0.375rem; margin-bottom: 0.375rem; }
    .divider_minor { border-top: 0.1875rem solid #ccc; margin-top: 0.375rem; margin-bottom: 0.8rem; }
    .nav { margin-bottom: 0.375rem; font-size: 1rem; text-align: center; }
    .filter-bar {
    margin-bottom: 1rem;
}
    a { color: black; text-decoration: underline; }


    .search-bar { margin: 0.375rem 0 0.75rem 0; }

    .code-block { overflow-x: auto; width: 100%; white-space: pre; text-align: center}
	
	.code-block-abt { overflow-x: auto; width: 100%; white-space: pre-wrap}

    .hidden { display: none; }
.section-header {
        display: flex;
        align-items: center;   /* <-- key: align text baselines, not boxes */
        gap: 0.75rem;
        margin-top: 1.875rem;        /* spacing above the whole header block */
        justify-content: center;
    }

    /* Make the title behave like inline text (no block-level wrapping) */
    .section-title {
        display: inline-block;
        margin: 0;               /* remove default margins so it doesn't push line */
        padding: 0;
        font-size: 1.6rem;     /* ~24px if base font is 10.375rem — adjust as needed */
        font-weight: bold;
        line-height: 1;          /* tight line-height so baseline is predictable */

    }

    /* Make the input behave like text (matching font size & baseline) */
    .section-header .search-bar {
        font-family: inherit;
        font-size: 1rem;         /* match the body / primary text size */
        line-height: 1;          /* match the title line-height logic */
        padding: 0.12rem 0.4rem;   /* compact padding that won't shift baseline */
        border: 1px solid #000;
        box-sizing: border-box;
        height: auto;            /* let flexbox compute height; don't harden height */
        transform: translateY(2px);
        margin: 0;
    }

	.marquee {
		height: 3rem;
		overflow: hidden;
		display: flex;
		align-items: center;
	}

	.marquee-track {
		display: flex;
		width: max-content;
		animation: marquee-scroll 20s linear infinite;
	}

	.marquee-content {
		white-space: pre;
		font-size: 1.6rem;
		font-weight: bold;
		font-style: italic;
		padding-right: 0rem;
		flex-shrink: 0;
	}

	@keyframes marquee-scroll {
		from { transform: translateX(0); }
		to { transform: translateX(-50%); }
	}
    
		/* Shrink global scale on phones */
	@media (max-width: 600px) {
		html {
			font-size: 8px; /* from 16px down to 13px */
		}
        .header-big {
            font-size: 3rem;
        }
	}

	/* Extra small devices (old iPhones, tiny screens) */
	@media (max-width: 400px) {
		html {
			font-size: 6px;
		}
        .header-big {
            font-size: 3rem;
        }
	}

    /* ==========================
   Blog Layout
   ========================== */

.blog-container {
    width: 50%;
    max-width: 50rem;      /* prevents overly long lines on huge monitors */
    margin: 2rem auto;
}

/* Blog title */
.blog-title {
    font-size: 2.5rem;
    font-weight: bold;
    text-align: left;
    margin-bottom: 0.4rem;
}

.blog-title a {
    text-decoration: none;
}

/* Blog subtitle */
.blog-subtitle {
    font-size: 1rem;
    color: #666;
    text-align: left;
    margin-bottom: 0.25rem;
}

/* Blog date */
.blog-date {
    font-size: 1rem;
    color: #666;
    text-align: right;
    margin-bottom: 2rem;
}

.blog-body{
    white-space: pre-line; 
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  /* Optional: set a width so it doesn't default to full width */
  width: 75%; 
}

/* Tablets */
@media (max-width: 900px) {
    .blog-container {
        width: 75%;
    }
}

/* Phones */
@media (max-width: 600px) {
    .blog-container {
        width: 95%;
    }
}