@media (orientation: landscape) {
    .pagebody {
        width: 100%;
        columns: 3 auto;
        display: inline-grid;
        grid-template-rows: auto;
        grid-template-columns: 30% 40% 30%;
        grid-template-areas:
            "pone1 ptwo1 pthree1"
            "pone2 ptwo2 pthree2";
    }
    .btabl {
        margin-right: 2%;
    }
    .btabr {
        margin-left: 2%;
    }
    .btabc {
        margin-left: 2%;
        margin-right: 2%;
    }
    #bl1 {
        grid-area: pone1;
    }
    #bc1 {
        grid-area: ptwo1;
    }
    #br1 {
        grid-area: pthree1;
    }
    #bl2 {
        grid-area: pone2;
    }
    #bc2 {
        grid-area: ptwo2;
    }
}
@media (orientation: portrait) {
.pagebody {
        width: 100%;
        columns: 1 auto;
        display: inline-grid;
        grid-template-rows: auto;
        grid-template-columns: 100%;
        grid-template-areas:
            "pone1"
            "pone2"
            "pone3"
            "pone4";
    }
    #bl1 {
        grid-area: pone1;
    }
    #bc1 {
        display: none;
    }
    #bl2 {
        grid-area: pone2;
    }
    #bc2 {
        grid-area: pone3;
    }
    #bc3 {
        grid-area: pone4;
    }
    p {
        margin-left: 2vw;
        margin-right: 2vw;
    }
    html {
        margin-left: 5vw;
        margin-right: 6vw;
        font-size: 3vw;
    }
    #br1, #br2 {
        display: none;
    }
}