/* Global variables */
:root {
    /* Margin where cutlines are drawn */
    --pdf-margin: 10;
    /* A4 */
    --pdf-width: 842;
    --pdf-height: 595;
    
    --square-size: min(10vw, 18vh); 
    --flat-page-height: var(--square-size);
    --flat-page-width: var(--square-size);

    --left-margin: calc(
        ( 100vw - 
            8 * var(--square-size)
        ) / 2
    );
    --top-margin: calc(
        50vh - 
        2.5 * var(--square-size)
    );

  --flap-height: calc(var(--square-size) * 0.15); /* tweak */
  --flap-inset:  calc(var(--square-size) * 0.05); /* slant amount */

}

/* Individual pages positions and skews */
.page0 {
    left:calc(
        var(--left-margin)
    );
    top:calc(
        var(--top-margin) + 
        2 * var(--square-size)
    );
    width: var(--square-size);
    height: var(--square-size);
}
.page1 {
    left:calc(
        var(--left-margin) +
        1 * var(--square-size)
    );
    top:calc(
        var(--top-margin) + 
        2 * var(--square-size)
    );
    width: var(--square-size);
    height: var(--square-size);
}
.page2 {
    left:calc(
        var(--left-margin) +
        2 * var(--square-size)
    );
    top:calc(
        var(--top-margin) + 
        2 * var(--square-size)
    );
    width: var(--square-size);
    height: var(--square-size);
}
.page3 {
    left:calc(
        var(--left-margin) +
        3 * var(--square-size)
    );
    top:calc(
        var(--top-margin) + 
        2 * var(--square-size)
    );
    width: var(--square-size);
    height: var(--square-size);
}
.page4 {
    left:calc(
        var(--left-margin) +
        4 * var(--square-size)
    );
    top:calc(
        var(--top-margin) + 
        2 * var(--square-size)
    );
    width: var(--square-size);
    height: var(--square-size);
}
.page5 {
    left:calc(
        var(--left-margin) +
        5 * var(--square-size)
    );
    top:calc(
        var(--top-margin) + 
        2 * var(--square-size)
    );
    width: var(--square-size);
    height: var(--square-size);
}
.page6 {
    left:calc(
        var(--left-margin) +
        6 * var(--square-size)
    );
    top:calc(
        var(--top-margin) + 
        2 * var(--square-size)
    );
    width: var(--square-size);
    height: var(--square-size);
}
.page7 {
    left:calc(
        var(--left-margin) +
        7 * var(--square-size)
    );
    top:calc(
        var(--top-margin) + 
        2 * var(--square-size)
    );
    width: var(--square-size);
    height: var(--square-size);
}

.page8 {
    left:calc(
        var(--left-margin) +
        0 * var(--square-size)
    );
    top:calc(
        var(--top-margin) + 
        1 * var(--square-size)
    );
    width: var(--square-size);
    height: var(--square-size);
}
.page9 {
    left:calc(
        var(--left-margin) +
        2 * var(--square-size)
    );
    top:calc(
        var(--top-margin) + 
        1 * var(--square-size)
    );
    width: var(--square-size);
    height: var(--square-size);
}
.page10 {
    left:calc(
        var(--left-margin) +
        4 * var(--square-size)
    );
    top:calc(
        var(--top-margin) + 
        1 * var(--square-size)
    );
    width: var(--square-size);
    height: var(--square-size);
}
.page11 {
    left:calc(
        var(--left-margin) +
        6 * var(--square-size)
    );
    top:calc(
        var(--top-margin) + 
        1 * var(--square-size)
    );
    width: var(--square-size);
    height: var(--square-size);
}

.page12 {
    left:calc(
        var(--left-margin) +
        0 * var(--square-size)
    );
    top:calc(
        var(--top-margin) + 
        3 * var(--square-size)
    );
    width: var(--square-size);
    height: var(--square-size);
}
.page13 {
    left:calc(
        var(--left-margin) +
        2 * var(--square-size)
    );
    top:calc(
        var(--top-margin) + 
        3 * var(--square-size)
    );
    width: var(--square-size);
    height: var(--square-size);
}
.page14 {
    left:calc(
        var(--left-margin) +
        4 * var(--square-size)
    );
    top:calc(
        var(--top-margin) + 
        3 * var(--square-size)
    );
    width: var(--square-size);
    height: var(--square-size);
}
.page15 {
    left:calc(
        var(--left-margin) +
        6 * var(--square-size)
    );
    top:calc(
        var(--top-margin) + 
        3 * var(--square-size)
    );
    width: var(--square-size);
    height: var(--square-size);
}

.page16 {
    left:calc(
        var(--left-margin) +
        2 * var(--square-size)
    );
    top:calc(
        var(--top-margin)
    );
    width: var(--square-size);
    height: var(--square-size);
}
.page17 {
    left:calc(
        var(--left-margin) +
        2 * var(--square-size)
    );
    top:calc(
        var(--top-margin) + 
        4 * var(--square-size)
    );
    width: var(--square-size);
    height: var(--square-size);
}






/* generic flap */

.flap{
    position: fixed;         
    width: var(--square-size);
    height: var(--square-size);
    background: #aaaaaa;
    clip-path: polygon(
        0px 0px,
        var(--square-size) 0px,
        calc(var(--square-size) - var(--flap-inset)) calc(var(--flap-height)),
        var(--flap-inset) calc(var(--flap-height))
    );
}

.flap0{
    left: calc(
        var(--left-margin) +
        8 * var(--square-size)
    );
    top: calc(
        var(--top-margin) +
        2 * var(--square-size)
    );
    pointer-events: none;
    transform-origin: center center;            
    transform: rotate(270deg);
}
.flap1{
    left: calc(
        var(--left-margin) +
        3 * var(--square-size)
    );
    top: calc(
        var(--top-margin) +
        0 * var(--square-size)
    );
    pointer-events: none;
    transform-origin: center center;            
    transform: rotate(270deg);
}
.flap2{
    left: calc(
        var(--left-margin) +
        3 * var(--square-size)
    );
    top: calc(
        var(--top-margin) +
        4 * var(--square-size)
    );
    pointer-events: none;
    transform-origin: center center;            
    transform: rotate(270deg);
}
.flap3{
    left: calc(
        var(--left-margin) +
        1 * var(--square-size)
    );
    top: calc(
        var(--top-margin) +
        0 * var(--square-size)
    );
    pointer-events: none;
    transform-origin: center center;            
    transform: rotate(90deg);
}
.flap4{
    left: calc(
        var(--left-margin) +
        1 * var(--square-size)
    );
    top: calc(
        var(--top-margin) +
        4 * var(--square-size)
    );
    pointer-events: none;
    transform-origin: center center;            
    transform: rotate(90deg);
}

.flap5{
    left: calc(
        var(--left-margin) +
        2 * var(--square-size)
    );
    top: calc(
        var(--top-margin) +
        -1 * var(--square-size)
    );
    pointer-events: none;
    transform-origin: center center;            
    transform: rotate(180deg);
}
.flap6{
    left: calc(
        var(--left-margin) +
        2 * var(--square-size)
    );
    top: calc(
        var(--top-margin) +
        5 * var(--square-size)
    );
    pointer-events: none;
}