/* Global variables */
:root {
    /* Margin where cutlines are drawn */
    --pdf-margin: 10;
    /* A4 */
    --pdf-width: 842;
    --pdf-height: 595;
    /* Ratio of minipages h:w */
    --page-ratio: calc(
        (var(--pdf-width) - 2 * var(--pdf-margin)) /
        (var(--pdf-height) - 2 * var(--pdf-margin)) 
    );

    --flat-page-width: 8vw;
    --flat-page-height: calc(var(--page-ratio) * var(--flat-page-width));
    
    --back-page-width: calc(4 * var(--flat-page-width)); 
    --back-page-height: calc(4 * var(--flat-page-height));

    --skew-angle-A: 10deg;

    --skew-yshift: calc(sin( var(--skew-angle-A) ) * var(--flat-page-width));

    --left-margin: calc(
        ( 100vw - 
            8 * var(--flat-page-width)
        ) / 2.25
    );
    --left-margin-2: calc(var(--left-margin) + 4.25 * var(--flat-page-width));
    --top-margin: calc(50vh - 2 * var(--flat-page-height));
}

/* Individual pages positions and skews */
.page0 {
    left:var(--left-margin-2);
    top:var(--top-margin);

    width: var(--back-page-width);
    height: var(--back-page-height);
}
.page1 {
    left:calc(var(--left-margin));
    top:var(--top-margin);

    width: calc(1px + var(--flat-page-width));
    height: calc(1px + var(--flat-page-height));

    transform-origin: center middle; 
    transform: rotate(180deg);
}
.page2 {
    top:var(--top-margin);
    left:calc(var(--left-margin) + var(--flat-page-width));

    height: calc(1px + var(--flat-page-height));
    width: calc(1px + var(--flat-page-width));

    transform-origin: center middle;
    transform: rotate(180deg);
}
.page3 {
    left:calc(var(--left-margin) + 2 * var(--flat-page-width));
    top:var(--top-margin);

    height: calc(1px + var(--flat-page-height));
    width: calc(1px + var(--flat-page-width));

    transform-origin: center middle;
    transform: rotate(180deg);
}
.page4 {
    left:calc(var(--left-margin) + 3 * var(--flat-page-width));
    top:var(--top-margin);

    width: calc(1px + var(--flat-page-width));
    height: calc(1px + var(--flat-page-height));

    transform-origin: center middle;
    transform: rotate(180deg);
}

.page5 {
    left: var(--left-margin);
    top: calc(var(--top-margin) + var(--flat-page-height));

    width: calc(1px + var(--flat-page-width));
    height: calc(1px + var(--flat-page-height));

    transform-origin: center middle;
    transform: rotate(180deg);
}


.page6 {
    left:calc(var(--left-margin) + var(--flat-page-width));
    top:calc(var(--top-margin) + var(--flat-page-height));

    height: calc(1px + var(--flat-page-height));
    width: calc(1px + var(--flat-page-width));

    transform-origin: right top;        
    transform: 
        skewY(calc(var(--skew-angle-A)))
        translate(0, var(--skew-yshift))
    ;

}
.page7 {
    left:calc(var(--left-margin) + 2 * var(--flat-page-width));
    top:calc(var(--top-margin) + var(--flat-page-height) + var(--skew-yshift));

    height: calc(1px + var(--flat-page-height));
    width: calc(1px + var(--flat-page-width));

}

.page8 {
    left:calc(var(--left-margin) + 3 * var(--flat-page-width));
    top:calc(var(--top-margin) + var(--flat-page-height) + var(--skew-yshift));

    width: calc(1px + var(--flat-page-width));
    height: calc(1px + var(--flat-page-height));

    transform-origin: center middle;            
}

.page9 {
    left:calc(var(--left-margin) + 3 * var(--flat-page-width));
    top:calc(var(--top-margin) + 2 * var(--flat-page-height) + var(--skew-yshift));

    width: calc(1px + var(--flat-page-width));
    height: calc(1px + var(--flat-page-height));
    
    transform-origin: center middle;
    transform: rotate(180deg);
}

.page10 {
    left:calc(var(--left-margin) + 2 * var(--flat-page-width));
    top:calc(var(--top-margin) + 2 * var(--flat-page-height) + var(--skew-yshift));

    width: calc(1px + var(--flat-page-width));
    height: calc(1px + var(--flat-page-height));
    
    transform-origin: left top;        
    transform: 
        skewY(calc(-1 * var(--skew-angle-A)))
        translate(0, var(--skew-yshift))
    ;
}


.page11 {
    left:calc(var(--left-margin) + 1 * var(--flat-page-width));
    top:calc(var(--top-margin) + 2 * var(--flat-page-height) + 2 * var(--skew-yshift));

    height: calc(1px + var(--flat-page-height));
    width: calc(1px + var(--flat-page-width));

    transform-origin: left top;        
}

.page12 {
    left:calc(var(--left-margin) );
    top:calc(var(--top-margin) + 2 * var(--flat-page-height) + 2 * var(--skew-yshift));

    height: calc(1px + var(--flat-page-height));
    width: calc(1px + var(--flat-page-width));

    transform-origin: left top;        

}


.page13 {
    left:calc(var(--left-margin) );
    top:calc(var(--top-margin) + 3 * var(--flat-page-height) + 2 * var(--skew-yshift));

    height: calc(1px + var(--flat-page-height));
    width: calc(1px + var(--flat-page-width));

    transform-origin: left top;        
}



.page14 {
    left:calc(var(--left-margin) + 1 * var(--flat-page-width));
    top:calc(var(--top-margin) + 3 * var(--flat-page-height) + 2 * var(--skew-yshift));

    height: calc(1px + var(--flat-page-height));
    width: calc(1px + var(--flat-page-width));

    transform-origin: right top;        
    transform: 
        skewY(calc(var(--skew-angle-A)))
        translate(0, var(--skew-yshift))
    ;
}

.page15 {
    left:calc(var(--left-margin) + 2 * var(--flat-page-width));
    top:calc(var(--top-margin) + 3 * var(--flat-page-height) + 3 * var(--skew-yshift));

    height: calc(1px + var(--flat-page-height));
    width: calc(1px + var(--flat-page-width));

    transform-origin: right top;        
}
.page16 {
    left:calc(var(--left-margin) + 3 * var(--flat-page-width));
    top:calc(var(--top-margin) + 3 * var(--flat-page-height) + 3 * var(--skew-yshift));

    height: calc(1px + var(--flat-page-height));
    width: calc(1px + var(--flat-page-width));

    transform-origin: right top;        
}