@media screen and (max-width: 1200px) {
    body {
        margin-top: 25px;
        grid-template-columns: 5% 90% 5%;
    }

    .pageframe {
        margin: 2em 1em;
    }

    #main {
        padding: 25px;
    }
    #nav {
        padding: 1em;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
    }

    #content {
        padding: 1.25em;
        margin: .5em;
    }

    .frontIntro article {
       max-width: 90%;
    }

    .index_class_card {
        margin: 0em 1em 0em 1em;
    }

    .index_class_card_top {
        text-align: center;
    }

    .index_class_card_text {
        align-items: center;
    }

    .index_class_card_text p, .index_class_card_text h5, .index_class_card_text h4 {
        max-width: 70ch;
        text-align: center;
    }

    .nptool_key {
        display: grid;
        grid-template-rows: 1fr 1fr 1fr;
    }

}