/* 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(2 *
        (var(--pdf-height) - 2 * var(--pdf-margin)) /
        (var(--pdf-width) - 2 * var(--pdf-margin)) 
    );

    --flat-page-width: 10vw;
    --flat-page-height: calc(var(--page-ratio) * var(--flat-page-width));
    
    --back-page-width: calc(2 * var(--flat-page-width)); 
    --back-page-height: calc(2 * var(--flat-page-height));

    --skew-angle: 20deg;
    --skewed-page-width: calc(cos(var(--skew-angle)) * var(--flat-page-width)); 
    --skewed-page-height: 
        calc((var(--flat-page-height) + sin(var(--skew-angle))*var(--flat-page-width))); 
    
    --left-margin: calc(
        ( 100vw - 
            2 * var(--flat-page-width) - 
            2 * var(--skewed-page-width) - 
            var(--back-page-width)
        ) / 2.25
    );
    --top-margin: calc(50vh - var(--skewed-page-height));
}

/* Individual pages positions and skews */
.page0 {
    left:calc(
        1.25 * var(--left-margin ) + 
        2 * var(--flat-page-width) +
        2 * var(--skewed-page-width)
    );
    top:var(--top-margin);

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

    width: var(--flat-page-width);
    height: var(--flat-page-height);

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

    height: var(--flat-page-height);
    width: var(--skewed-page-width);

    transform-origin: center middle;
    transform: 
        rotate(180deg)
        skewY(calc(-1 * var(--skew-angle))) 
        translate(0,calc(sin(var(--skew-angle))*var(--flat-page-width)/2));
}
.page3 {
    left:calc(var(--left-margin) + var(--flat-page-width) + var(--skewed-page-width));
    top:var(--top-margin);

    height: var(--flat-page-height);
    width: var(--skewed-page-width);

    transform-origin: center middle;
    transform: 
        rotate(180deg)
        skewY(var(--skew-angle)) 
        translate(0,calc(sin(var(--skew-angle))*var(--flat-page-width)/2));
}
.page4 {
    left:calc(var(--left-margin) + var(--flat-page-width) + 2*var(--skewed-page-width));
    top:var(--top-margin);

    width: var(--flat-page-width);
    height: var(--flat-page-height);

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

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

    height: var(--flat-page-height);
    width: var(--skewed-page-width);

    transform-origin: left top;            
    transform: skewY(var(--skew-angle));
}
.page7 {
    left:calc(var(--left-margin) + var(--flat-page-width) + var(--skewed-page-width));
    top:calc(var(--top-margin) + var(--flat-page-height));

    height: var(--flat-page-height);
    width: var(--skewed-page-width);

    transform-origin: right top;            
    transform: skewY(calc(-1*var(--skew-angle)));
}
.page8 {
    left:calc(
        var(--left-margin) + 
        var(--flat-page-width) + 
        2*var(--skewed-page-width)
    );
    top:calc(var(--top-margin) + var(--flat-page-height));

    width: var(--flat-page-width);
    height: var(--flat-page-height);
}