/* Target devices smaller than Bootstrap's "sm" breakpoint (<576px) */
@media (max-width: 575.98px) {

    /* Headings */
    h1,
    .h1 {
        font-size: 1.75rem;
    }

    /* default: 2.5rem */
    h2,
    .h2 {
        font-size: 1.5rem;
    }

    /* default: 2rem */
    h3,
    .h3 {
        font-size: 1.25rem;
    }

    /* default: 1.75rem */
    h4,
    .h4 {
        font-size: 1.125rem;
    }

    /* default: 1.5rem */
    h5,
    .h5 {
        font-size: 1rem;
    }

    /* default: 1.25rem */
    h6,
    .h6 {
        font-size: 0.875rem;
    }

    /* default: 1rem */

    /* Paragraphs & body text */
    p,
    .lead,
    body {
        font-size: 0.9375rem;
        /* ~15px instead of 16px */
        line-height: 1.5;
        /* Keep it readable */
    }
}



/* For short screens (portrait height < 700px) */
@media (max-height: 700px) {

    h1,
    .h1 {
        font-size: 1.3rem;
    }

    /* larger than h2 */
    h2,
    .h2 {
        font-size: 1.15rem;
    }

    /* your target size */
    h3,
    .h3 {
        font-size: 1rem;
    }

    /* slightly smaller */
    h4,
    .h4 {
        font-size: 0.95rem;
    }

    h5,
    .h5 {
        font-size: 0.9rem;
    }

    h6,
    .h6 {
        font-size: 0.85rem;
    }

    body,
    p,
    .lead {
        font-size: 0.85rem;
        /* comfortable reading size */
        line-height: 1.5;
    }
}