.article {
    /* float: left;*/
    margin-top: 0;
    padding: 0;
    column-count: 2;
    column-gap: 3rem;
    column-rule-width: thin;
    column-rule-style: solid;
    column-rule-color: black;
    -moz-column-count: 2;
    -moz-column-gap: 3rem;
    -moz-column-rule-width: thin;
    -moz-column-rule-style: solid;
    -moz-column-rule-color: black;
    -webkit-column-count: 2;
    -webkit-column-gap: 3rem;
    -webkit-column-rule-width: thin;
    -webkit-column-rule-style: solid;
    -webkit-column-rule-color: black;
    -webkit-column-count: 2;
}

.citatiion p {
    margin-top: -2rem;
    font-size: 1rem;
}

.bagpipe-player {
    max-width: 70%;
    float: left;
    margin: 0 1rem 1rem 0;
}

.chaucer {
    margin: 0 5rem 0 5rem;
}

.pipe-band {
    width: 100%;
    text-align: center;
}

    .pipe-band img {
        max-width: 100%;
    }

.pipes-war {
    width: 100%;
}

    .pipes-war img {
        margin: 1rem;
        float: right;
        max-width: 80%;
        border: thin solid brown;
    }

p.box {
    width: 75%;
    margin-left:calc((100%  - 75%) / 2);
    float: left;
    border: thin solid black;
    padding: 1rem;
}

@media screen and (max-width:399px) {
    .bagpipe-player {
        max-width: 100%;
        clear: left;
        margin: 0;
    }

    .chaucer {
        margin: 0 1rem 0 1rem;
    }
}

@media screen and (max-width:599px) {
    .article {
        column-count: 1;
        -moz-column-count: 1;
        -webkit-column-count: 1;
    }

    p.box {
        width: 100%;
        margin-left:0;
    }
}

@media screen and (min-width:600px) and (max-width:799px) {
    .bagpipes .article {
        column-count: 1;
        -moz-column-count: 1;
        -webkit-column-count: 1;
    }

    p.box {
        width: 70%;
    }
}

@media screen and (min-width:800px) and (max-width:1299px) {
    p.box {
        width: 90%;
    }
}