PdfCSS:APRJA Minor Tech

@charset "utf-8"; 

:root{
    --first-heading-size: 36px;
    --first-heading-line-height: 150%; 
    --second-heading-size: 18px;
    --second-heading-line-height: 130%;
    --heading-font: "Times New Roman", serif;
    --author-font: "Arial", sans-serif;
    --body-font: var(--author-font);
    --accent-color: #2A9277;

}

/*------------------page rules */

@page {
    size: 210mm 297mm portrait;
    margin: 100px 90px 90px 90px;
}

@page:first {
    background-color: var(--accent-color);
    /*background-color: #13322b; this is the rgb value of the pantone we used for the newspaper*/

    @bottom-right{
        content: none;
    }

}


@page:left{

    @top-left{
        content: "APRJA Volume 12, Issue 1, 2023";
        font-weight: bold;
        color: var(--accent-color);
    }

    @bottom-left{
        content: counter(page);
        font-weight: bold;
    }
}

@page:right{

    @bottom-right{
        content: counter(page);
        font-weight: bold;
    }
}

/*-----------------cover */

div.cover > h1 {
    font-size: var(--first-heading-size);
    line-height: var(--first-heading-line-height);
    font-family: var(--heading-font);
    margin-top: 0;
}

div.cover > p {
    font-size: var(--second-heading-size);
    font-family: var(--author-font);
    font-weight: bold;
    padding-top: var(--second-heading-size);
    line-height: var(--second-heading-line-height);
}


/*----------------table of contents */

div.TOC {
    display:none;
}

/*-----------------turning off embedded pads */

/*--------------------------pad in article 1 */
div#article-1 {
    display: none;
}

/*-------------------------------all iframes */
iframe {
    display: none;
}

/*-----------------fixing heading hierarchy inconsistency */

div.heading1-heading2 > h1, div.heading2-heading3 > h2 {
    break-before:always;
    break-after:always;
    font-size: var(--first-heading-size);
    line-height: var(--first-heading-line-height);
    color: var(--accent-color);
}

div.heading1-heading2 > h2, div.heading2-heading3 > h3 {
    font-size: var(--first-heading-size);
    line-height: var(--first-heading-line-height);
    font-weight: regular;
    font-style: italic;
}

/*-----------------body font */

div.heading1-heading2 > p, div.heading2-heading3 > p {
    font-family: var(--body-font);
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

/*-----------------columns */

div.heading1-heading2, div.heading2-heading3{
    columns: 2;
    column-fill: auto;
    /*text-align: justify; justified text looks terrible */
}