/* ---------- all screens ---------- */
img {
    max-width: 100%;
}

.container {
    width: 100%;
    max-width: 960px;
}

.headers {
    width: 100%;
    max-width: 961px;
}

/* ---------- tablets and phones: single column ---------- */
@media (max-width: 960px) {
    .headers {
        height: auto;
        display: flow-root;
    }

    .site-title {
        float: none;
        margin: 0 auto;
        max-width: 100%;
        background-position: center;
        background-size: contain;
    }

    .sitiles {
        float: none;
        height: auto;
        text-align: center;
        padding: 8px 10px;
    }

    .sitile {
        float: none;
        padding: 0 0 8px;
    }

    #menu {
        float: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

        #menu li {
            float: none;
        }

    .all1 {
        text-align: center;
        padding: 4px 10px;
    }

    /* decorative left image is too tall for a phone */
    .sidebar1 {
        display: none;
    }

    .content, .contents {
        float: none;
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }

        .content img {
            height: auto;
        }

        .content .gal-card img {
            height: 100px;
        }
        /* keep square thumbnails */

        .content ul, .content ol {
            padding-left: 25px;
        }

    .footer {
        padding: 16px 10px;
        text-align: center;
        background-image: none; /* drop the tiled image on small screens */
        background-color: #42413C; /* same dark color as the page, so no stripe */
        clear: both;
        overflow: hidden;
    }

        .footer h1 {
            margin-bottom: 4px;
        }
}

/* ---------- phones ---------- */
@media (max-width: 520px) {
    .gal {
        padding: 10px;
    }

    /* two thumbnails per row */
    .gal-grid {
        gap: 12px;
    }

    .gal-card {
        width: calc(50% - 6px);
        box-sizing: border-box;
    }

    .gal-search {
        text-align: center;
    }

        .gal-search input {
            width: 60%;
        }

    .gal-photo img {
        max-height: 70vh;
    }

    .gal-controls button, .gal-pager a {
        padding: 8px 14px;
    }
    /* bigger tap targets */

    .text2 {
        font-size: 16px;
    }

    .text3 {
        font-size: 14px;
    }
}