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

    --left-margin: calc(
        ( 100vw - 
            4 * var(--square-size)
        ) / 2
    );
    --top-margin: calc(
        50vh - 
        1.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) + 
        var(--square-size)
    );

    width: var(--square-size);
    height: var(--square-size);
}
.page1 {
    left:calc(
        var(--left-margin ) + 
        var(--square-size)
    );
    top:calc(
        var(--top-margin) + 
        var(--square-size)
    );

    width: var(--square-size);
    height: var(--square-size);

    /* transform-origin: center center;            
    transform: rotate(90deg); */
}
.page2 {
    left:calc(
        var(--left-margin ) + 
        2 * var(--square-size)
    );
    top:calc(
        var(--top-margin) + 
        var(--square-size)
    );

    width: var(--square-size);
    height: var(--square-size);

    /* transform-origin: center center;            
    transform: rotate(90deg); */
}
.page3 {
    left:calc(
        var(--left-margin ) + 
        3 * var(--square-size)
    );
    top:calc(
        var(--top-margin) + 
        var(--square-size)
    );

    width: var(--square-size);
    height: var(--square-size);

    /* transform-origin: center center;            
    transform: rotate(90deg); */
}
.page4 {
    left:calc(
        var(--left-margin ) + 
        var(--square-size)
    );
    top:calc(
        var(--top-margin)
    );

    width: var(--square-size);
    height: var(--square-size);

    /* transform-origin: center center;            
    transform: rotate(90deg); */
}

.page5 {
    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);

    /* transform-origin: center center;            
    transform: rotate(90deg); */
}



/* 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: var(--left-margin);
    top: calc(
        var(--top-margin) 
    );
    pointer-events: none;
    transform-origin: center center;            
    transform: rotate(90deg);
}
.flap1{
    left: calc(
        var(--left-margin) +
        2 * var(--square-size)
    );
    top: calc(
        var(--top-margin) 
    );
    pointer-events: none;
    transform-origin: center center;            
    transform: rotate(270deg);
}
.flap2{
    left: calc(
        var(--left-margin) -
        var(--square-size)
    );
    top: calc(
        var(--top-margin) +
        var(--square-size)
    );
    pointer-events: none;
    transform-origin: center center;            
    transform: rotate(90deg);
}
.flap3{
    left: calc(
        var(--left-margin) +
        var(--square-size)
    );
    top: calc(
        var(--top-margin) + 
        2 * var(--square-size) 
    );
    pointer-events: none;
    transform-origin: center center;            
    transform: rotate(0deg);
}
.flap4{
    left: calc(
        var(--left-margin) +
        2 * var(--square-size)
    );
    top: calc(
        var(--top-margin) + 
        3 * var(--square-size) 
    );
    pointer-events: none;
    transform-origin: center center;            
    transform: rotate(0deg);
}
.flap5{
    left: calc(
        var(--left-margin) +
        3 * var(--square-size)
    );
    top: calc(
        var(--top-margin) + 
        2 * var(--square-size) 
    );
    pointer-events: none;
    transform-origin: center center;            
    transform: rotate(0deg);
}
.flap6{
    left: calc(
        var(--left-margin) +
        3 * var(--square-size)
    );
    top: calc(
        var(--top-margin) 
    );
    pointer-events: none;
    transform-origin: center center;            
    transform: rotate(180deg);
}