/* 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: 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;
    --complement-skew-angle: calc(90deg - var(--skew-angle));

    --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 - (
        2 * var(--skewed-page-height) +
        0.25 * var(--skewed-page-width) -
        var(--flat-page-height)
    ));
}

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

    width: calc(2 * var(--skewed-page-width));
    height: calc(2 * var(--skewed-page-width));
}
.pageA1 {
    left:var(--left-margin);
    top:var(--top-margin);

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

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

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

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

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

    transform-origin: left bottom;
    transform:
        scaleY(calc(  
            (var(--skewed-page-height) - var(--flat-page-height)) /
            (var(--flat-page-height) * cos(45deg))
        )) 
        scaleX(calc(var(--skewed-page-width) / (var(--flat-page-width) * cos(45deg)))) 
        rotate(45deg) ;
}

.pageB1 {
    left: calc(var(--left-margin) + 2.5 * var(--skewed-page-width));
    top:var(--top-margin);

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

    transform-origin: center center;            
    transform:
        skewY(calc(-1 * var(--skew-angle))) 
        translate(0,calc(sin(var(--skew-angle))*var(--flat-page-width)/2));
}
.pageB2 {
    left:calc(var(--left-margin) + 2.5 * var(--skewed-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: 
        skewY(calc(var(--skew-angle))) 
        translate(0,calc(sin(var(--skew-angle))*var(--flat-page-width)/2));
}
.pageB3 {
    left:calc(var(--left-margin) + 2.5 * var(--skewed-page-width));
    top:calc(var(--top-margin) + var(--skewed-page-height) - var(--flat-page-height));

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

    transform-origin: left bottom;
    transform:
        scaleY(calc(  
            (var(--skewed-page-height) - var(--flat-page-height)) /
            (var(--flat-page-height) * cos(45deg))
        )) 
        scaleX(calc(var(--skewed-page-width) / (var(--flat-page-width) * cos(45deg)))) 
        rotate(45deg) ;
}


.pageC1 {
    left:var(--left-margin);
    top: calc(
        var(--top-margin) +
        var(--skewed-page-height) +
        0.5 *  var(--skewed-page-width) + 
        (var(--skewed-page-height) - var(--flat-page-height))  
    );

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

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

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

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

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

    transform-origin: left bottom;
    transform:
        scaleY(calc(  
            (var(--skewed-page-height) - var(--flat-page-height)) /
            (var(--flat-page-height) * cos(45deg))
        )) 
        scaleX(calc(var(--skewed-page-width) / (var(--flat-page-width) * cos(45deg)))) 
        rotate(45deg) ;
}

.pageD1 {
    left: calc(var(--left-margin) + 2.5 * var(--skewed-page-width));
    top:calc(
        var(--top-margin) +
        var(--skewed-page-height) +
        0.5 *  var(--skewed-page-width) + 
        (var(--skewed-page-height) - var(--flat-page-height))  
    );
    width: var(--skewed-page-width);
    height: var(--flat-page-height);

    transform-origin: center center;            
    transform:
        skewY(calc(-1 * var(--skew-angle))) 
        translate(0,calc(sin(var(--skew-angle))*var(--flat-page-width)/2));
}
.pageD2 {
    left:calc(var(--left-margin) + 2.5 * var(--skewed-page-width) + var(--skewed-page-width));
    top:calc(
        var(--top-margin) +
        var(--skewed-page-height) +
        0.5 *  var(--skewed-page-width) + 
        (var(--skewed-page-height) - var(--flat-page-height))  
    );

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

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

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

    transform-origin: left bottom;
    transform:
        scaleY(calc(  
            (var(--skewed-page-height) - var(--flat-page-height)) /
            (var(--flat-page-height) * cos(45deg))
        )) 
        scaleX(calc(var(--skewed-page-width) / (var(--flat-page-width) * cos(45deg)))) 
        rotate(45deg) ;
}

.pageX2 {
    left:calc(
        var(--left-margin) + 5 * var(--skewed-page-width)
    );
    top:calc(
        var(--top-margin) +
        var(--skewed-page-height) +
        0.5 *  var(--skewed-page-width) + 
        2*(var(--skewed-page-height) - var(--flat-page-height))  
    );

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

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

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

    transform-origin: center middle;
    transform: 
        skewY(calc(-1 * var(--skew-angle))) 
        translate(0,calc(sin(var(--skew-angle))*var(--flat-page-width)/2));
}