@media screen and (max-width: 945px) {

    /* header */
    header div {
        background-color: #247ba0;
        margin: 0 auto;
        border-radius: 1em;
    }

    header h1,
    h2 {
        text-align: center;
        padding: .2em;
        margin: .2em 0;
        color: white;
    }

    header a {
        text-decoration: none;
    }

    header h2:hover {
        color: black;
    }

    /* for the main */

    .container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 1fr);
        row-gap: 0;
    }

    /* the sections */

    .firstSection,
    .secondSection,
    .thirdSection {
        border: .4em solid #247ba0;
        border-radius: .2em;
        text-align: center;
        margin: 10px auto;
    }

    .firstSection {
        grid-row: 1;
    }

    .secondSection {
        grid-row: 2;
    }

    .thirdSection {
        grid-row: 3;
    }

    .firstSection h3,
    .secondSection h3,
    .thirdSection h3 {
        background-color: #247ba0;
        margin: 5px;
        padding: 3%;
        color: white;
    }

    .firstSection p,
    .secondSection p,
    .thirdSection p {
        margin: 0 auto;
        padding: 0;
    }


    .firstSection a,
    .secondSection a,
    .thirdSection a {
        font-size: 1.2em;
        color: #247ba0;
    }

    .firstSection a:hover,
    .secondSection a:hover,
    .thirdSection a:hover {
        font-size: 1.2em;
        background-color: #247ba0;
        color: white;
    }


    .firstSection img,
    .secondSection img,
    .thirdSection img {
        margin: 0 auto;
        display: block;
        padding: 10px;
        border-bottom: #247ba0 10px solid;
        border-top: #247ba0 5px solid;
        height: 500px;

    }

    /* descriptions for sections */
    .descriptions {
        margin: 0 auto;
        text-align: left;
        width: 22em;
        padding: 5px;
        width: 75%;
    }


    /* for the footer */
    footer {
        padding-top: 10px;
        padding-bottom: 10px;
        padding: 10px 0 10px 10px;
        background-color: #247ba0;
        margin: 15px auto;
        border-radius: .2em;
        text-align: center;
    }

    footer a {
        color: white;
    }

    footer a:hover {
        background-color: white;
        color: #247ba0;
    }

    .lastModifiedDate {
        color: #FFE066;
    }


    /* font-family: 'Open Sans', sans-serif;
font-family: 'Source Serif Pro', serif; */
}