/* 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;
    --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: 5deg;
    --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-B))*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 - var(--skewed-page-B-height) - 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)
        skewY(var(--skew-angle-A)) 
        translate(0,calc(sin(var(--skew-angle-A))*var(--flat-page-width)/2));
}
.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)
        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) + 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)
        skewY(var(--skew-angle-A)) 
        translate(0,calc(sin(var(--skew-angle-A))*var(--flat-page-width)/2));
}
.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)
        skewY(calc(-1 * var(--skew-angle-A))) 
        translate(0,calc(sin(var(--skew-angle-A))*var(--flat-page-width)/2));
}

.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:
        skewY(var(--skew-angle-A)) 
        translate(0,calc(-1 * sin(var(--skew-angle-A))*var(--flat-page-width)/2));
}
.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));

}
.page7 {
    left:calc(var(--left-margin) + 2 * 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(1*var(--skew-angle-B)))
        scaleX(1.02);
    z-index: 2;
}
.page8 {
    left:calc(var(--left-margin) + 3 * var(--flat-page-width));
    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: 
        skewY(calc(-1 * var(--skew-angle-A))) 
        translate(0,calc(-1 * sin(var(--skew-angle-A))*var(--flat-page-width)/2));
}
.page9 {
    left:var(--left-margin);
    top: calc(var(--top-margin) + 2 * 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);
}
.page10 {
    left:calc(var(--left-margin) + var(--flat-page-width));
    top: calc(var(--top-margin) + 2 * 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);
}
.page11 {
    left:calc(var(--left-margin) + 2 * var(--flat-page-width));
    top:calc(var(--top-margin) + 2 * var(--flat-page-height));

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

    transform-origin: left top;        
    transform: 
        rotate(180deg)
        skewY(calc(1*var(--skew-angle-B)))
        translate(calc(-1 * (1px + var(--flat-page-width))), calc(-1 * (1px + var(--flat-page-height) - sin(var(--skew-angle-B))*var(--flat-page-width))))
        /* translate(0,calc(1 * sin(var(--skew-angle-B))*var(--flat-page-width)/2)) */
        scaleX(1.02);
    z-index: 2;
    /* transform-origin: center middle; 
    transform:            
        rotate(180deg)
        skewY(calc(-1 * var(--skew-angle-B))) 
        translate(0,calc(-1 * sin(var(--skew-angle-B))*var(--flat-page-width)/2)); */
}

.page12 {
    left:calc(
        var(--left-margin) + 
        3 * var(--flat-page-width)
    );
    top:calc(var(--top-margin) + 2 * 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);
}

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

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

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

    transform-origin: left top;            
    transform: skewY(var(--skew-angle-A));
}
.page15 {
    left:calc(var(--left-margin) + 2 * var(--flat-page-width));
    top:calc(var(--top-margin) + 3 * 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(-1*var(--skew-angle-A)));
}
.page16 {
    left:calc(
        var(--left-margin) + 
        3 * var(--flat-page-width)
    );
    top:calc(var(--top-margin) + 3 * var(--flat-page-height));

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