/* ==========================
   Base Styles
========================== */
body {
    background-color: rgb(44, 44, 44);
    margin-left: 8%;
    margin-right: 8%;
    font-family: Verdana, sans-serif;
    font-size: 1.125rem; /* ~18px on desktops */
    line-height: 1.6;
    color: lightgray;
}

/* Headers */
h1, h2, h3, h4 {
    color: white;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

h5, h6 {
    color: lightgray;
}

h1 { text-align: center; }

h1 { font-size: 2.25rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.625rem; }

/* Paragraphs and lists */
p, li {
    font-size: 1.125rem;
    color: lightgray;
}

/* Links */
a {
    color: rgb(87, 129, 225);
    text-decoration: underline;
}

.center { text-align: center; }

/* ==========================
   Images
========================== */
img {
    display: block;
    margin: 1em auto;
    max-width: 100%;
    max-height: 600px;
    width: auto;
    height: auto;
    object-fit: contain;
}

img.small-img { width: 30%; }
img.large-img { width: 70%; }

.img-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.img-row > * {
    flex: 1 1 45%;
    max-width: 48%;
    display: flex;
    justify-content: center;
}

.img-row > * img {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: contain;
    display: block;
}

.img-row img.small-img,
.img-row img.large-img {
    flex: 1 1 auto;
    height: auto;
}

.img-block { text-align: center; margin: 1em 0; }

.img-caption {
    text-align: center;
    margin-bottom: 0.5em;
    font-style: italic;
    font-size: 0.95rem;
}

/* ==========================
   Mobile adjustments (phones)
========================== */
@media (max-width: 480px) {
    body {
        font-size: 1.05rem; /* bigger base text for phones */
    }

    p, li {
        font-size: 1.05rem;
    }

    h1 { font-size: 2.25rem; }
    h2 { font-size: 2.0rem; }
    h3 { font-size: 1.75rem; }

    .img-caption {
        font-size: 1.05rem; /* larger captions on phones */
    }

    .img-row > * { 
        flex: 1 1 80%; 
        max-width: 100%; 
    }

    img.small-img { width: 60%; }
    img.large-img { width: 90%; }
}