.header,
.body,
.footer {
    box-sizing: border-box;
}

/* __________________________________ HEADER __________________________________ */
.header {
    top: 0;
    margin: 0;
    padding-top: @page-margin-top;
    width: 100%;
    height: @header-height;
    text-align: left;

    &:after {
        content: @header-text;
    }
}
/* __________________________________ MAIN SECTION __________________________________ */
.body {
    height: @page-height - @header-height - @footer-height;
    width: @page-width;
    margin-bottom: @page-margin-bottom;
    padding-top: @page-margin-top + @header-height;
    padding-bottom: @page-margin-bottom;
    position: absolute;
}

.recipient {
    -webkit-flow-from: myStory;
            flow-from: myStory;
}

#my-story {
    -webkit-flow-into: myStory;
            flow-into: myStory;
}
/* __________________________________ FOOTER __________________________________ */
.footer {
    position: absolute;
    bottom: 0;
    margin: 0;
    width: 100%;
    height: @footer-height;
    text-align: center;

    &:after {
        content: @footer-text;
    }
}

/* mirrored pages */
.paper {
    &:nth-child(odd) .header {
        text-align: right;
    }

    &:nth-child(odd) .header,
    &:nth-child(odd) .body,
    &:nth-child(odd) .footer {
        padding-left: @page-margin-inside;
        padding-right: @page-margin-outside;
    }
    &:nth-child(even) .header,
    &:nth-child(even) .body,
    &:nth-child(even) .footer {
        padding-left: @page-margin-outside;
        padding-right: @page-margin-inside;
    }
}

img {
    max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    /* Avoids headings to be cut or to be orphans.
     * But it doesn't seem to work
     * if the element after has a page-break-inside avoid. It tries its best! */
    -webkit-region-break-inside: avoid;
    -webkit-region-break-after: avoid;
}

/* AN EXAMPLE TO AVOID PAGE BREAK INSIDE,
 * HERE NO PARAGRAPH WILL BE CUT,
 * BUT YOU MIGHT WANT TO DEACTIVATE THIS */
p {
    /*-webkit-region-break-inside: avoid;*/
}