/* index.css */

@font-face {
    font-family: 'ComicNeue';
    src: url('/fonts/ComicNeue-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ComicNeue';
    src: url('/fonts/ComicNeue-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

body {
    background-color: rgb(255, 255, 224);
    font-family: "ComicNeue", cursive;
    font-size: 18px;
}

.gallery {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start; /* Keeps everything to the left */
    width: 100%;
}

.image-block {
    position: relative;
    display: block;
    width: 100%;
    max-width: 800px;    /* Keeps it from over-expanding on desktop */
    container-type: inline-size;
}

.image-block .base {
    display: block;
    width: 100%;
    height: auto;
}

.text-box {
    position: absolute;
    /* top, left, and width are pulled from your HTML */

    padding: 1.76cqw;
    background: rgba(255, 255, 255, 0.0);
    border-radius: 1.76cqw;
    font-family: "ComicNeue", cursive;
    font-weight: 700;

    /* Desktop & Landscape sizing */
    font-size: 2.5cqw;
    line-height: 1.1;

    word-wrap: break-word;
    overflow-wrap: break-word;
}


/* Specific fix for portrait mode on mobile phones */
@media (max-width: 480px) and (orientation: portrait) {
.text-box {
        /* Reduces font size to scale better with the smaller image */
        /* font-size: 7px; */
        font-size: 2.5cqw;

        /* Optional: reduce padding to give text more room to breathe */
        /* padding: 4px; */

        /* Ensures the box width doesn't get too squeezed on tiny screens */
        /* min-width: 30%; */
    }
}

.about {
    max-width: 65ch;
    margin: 3rem 0;
    padding: 0 1rem;
    line-height: 1.7;
    text-align: left;
}

.copyright-notice {
    font-size: 14px;
    color: #555;
    margin-top: 20px;
    text-align: left;
}

.top-nav {
    margin-bottom: 1.5rem;
}

.top-nav a {
    text-decoration: none;
    font-weight: bold;
}

.top-nav a:hover {
    text-decoration: underline;
}