@media  screen {
    /* Re-setting the slide-number counter*/
    body {
        counter-reset: slide-number;
    }

    /* Hide non-referring URI's (slides) */
    .slide:not(:target) {
        /* set to hidden so slide-number++*/
        visibility: hidden;
    }

    /* Show referring URI's (slides) */
    .slide:target {
        display: block;
        height: 100%;
        width: 100%;
    }

    /* Add slide number to content */
    .slide:target::after{
        float: right;
        content: "["counter(slide-number)"]";
    }

    /* slide-number++ */
    .slide{
        counter-increment: slide-number;
    }



}

@media print{

    body{
        font-size: 60%;
        counter-reset: slide-number;
    }

    header, article{
        margin-bottom: 5px;
    }

    .slide{
        counter-increment: slide-number;
        border-style:solid;
        border-width:1px;
    }

    .slide::before{
        float: right;
        content: "["counter(slide-number)"]";
    }

    article.slide:nth-child(4n){
        page-break-after: always;
    }



}