/* 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));
    
    --skew-angle-A: 10deg;
    --skewed-page-A-width: calc(cos(var(--skew-angle-A)) * var(--flat-page-width)); 
    --skewed-page-A-height: 
    calc((var(--flat-page-height) + sin(var(--skew-angle-A))*var(--flat-page-width))); 
    --skew-angle-B: 20deg;
    --skewed-page-B-width: calc(cos(var(--skew-angle-B)) * var(--flat-page-width)); 
    --skewed-page-B-height: 
    calc((var(--flat-page-height) + sin(var(--skew-angle-Bs))*var(--flat-page-width))); 
    
    --left-margin: calc(
        ( 100vw - 
            4 * var(--flat-page-width) - 
            4 * var(--skewed-page-A-width)
        ) / 2.25
    );
    --left-margin-2: calc(
        1.25 * var(--left-margin) + 2 * var(--flat-page-width) + 2 * var(--skewed-page-A-width)
    );
    --top-margin: calc(50vh - var(--skewed-page-A-height));
}

/* Individual pages positions and skews */
.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-A-width);

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

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

    transform-origin: center middle;
    transform: 
        rotate(180deg)
        skewY(var(--skew-angle-A)) 
        translate(0,calc(sin(var(--skew-angle-A))*var(--flat-page-width)/2));
}
.page4 {
    left:calc(var(--left-margin) + var(--flat-page-width) + 2*var(--skewed-page-A-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);

    transform-origin: center center;            
    transform: rotate(180deg);
}
.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-A-width);

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

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

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

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

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

/* Opposite side */

.page9 {
    left:var(--left-margin-2);
    top:var(--top-margin);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}