/* Here you can put your specific typography, layout styles. */
@page-width: 210mm;
@page-height: 297mm;

@header-height: 0mm;
@header-text: "";
@footer-height: 0mm;
@footer-text: counter(page-counter);

@column-gutter: 8mm;

/** Combined Color **/

/*@color-background: yellow;
@color-halfvisible: gold;
@color-visible: black;

@color-hidden: @color-background;
@color-past: @color-halfvisible;
@color-present: @color-visible;*/


/** Combined BW **/
/*@color-background: white;
@color-halfvisible: rgba(0,0,0,.25);
@color-visible: black;

@color-hidden: @color-background;
@color-past: @color-halfvisible;
@color-present: @color-visible;*/

/** Present black **/
@color-background: white;
@color-halfvisible: rgba(0,0,0,.25);
@color-visible: black;

@color-hidden: @color-background;
@color-past: @color-background;
@color-present: @color-visible;


/** Past black **/
/*@color-background: white;
@color-halfvisible: rgba(0,0,0,.25);
@color-visible: black;

@color-hidden: @color-background;
@color-past: @color-visible;
@color-present: @color-background;*/

@font-face {
    font-family: FuturaRenner;
    font-weight: regular;
    src: url(/assets/fonts/FuturaRenner-Regular.otf);
}

* {
    font-family: FuturaRenner;
    font-weight: normal;
}

.header, .footer {
    margin: 0;
    padding: 0;
}

.footer {
    font-family: monospace;
    position: absolute;
    bottom: -10mm;
    height: 20px;
    content: @footer-text;
    font-size: 12pt;
}

.paper:nth-child(odd) .footer {
    text-align: right;
}
.paper:nth-child(even) .footer {
    text-align: left;
}

.body,
.paper:nth-child(odd) .body,
.paper:nth-child(even) .body {
    margin: 0;
}

.paper:nth-child(even) .body {
    padding: 4mm 40mm 4mm 4mm;
}

.paper:nth-child(odd) .body {
    padding: 4mm 4mm 4mm 40mm;
}

@media print {
    .paper:first-of-type {
        /* Really weird bug in chrome causes the
        first page to have an vertical offset if
        this line is not present */
        margin-top: -.01mm;
    }
}

.paper {
    background-color: @color-background;
    
    .column {
        width: 100%;
        float: left;
        margin: 0;
        padding: 0;
        height: 100%;
    }
}

section {
    break-after: always;
}

p {    
    font-size: 13pt;
    line-height: 15.2pt;
    margin: 0;
    color: @color-past;
    /* text-indent: 60pt; */
    
    .credits {
        font-size: 11pt;
    }
    
    a {
        color: @color-past;
        text-decoration: none;
    }
     
    .refcall {
        display: inline-block;
        margin-left: .5mm;
        position: absolute;
        margin-top: -.25mm;
        font-size: 85%;
    
        /* &:before {
            content: "(";
        }
        
        &:after {
            content: ")";
        } */
    }
}

p + p {
    margin-top: 15.2pt;
}

p .present {
    color: @color-present;
    
    a {
        color: @color-present;
    }
}

p .hidden {
    color: @color-hidden;
    
    a {
        color: @color-hidden;
    }
}

.credits {
    color: @color-present;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 32mm;
    
    font-size: 10pt;
    transform: rotate(-90deg) translate(80mm, 70mm);
    
    .reference {
        display: inline-block;
        position: relative;
        /* top: -10px;
        font-size: 80%; */
    
        margin-left: 3px;
        margin-right: 3px;
        
        /*&:before {
            content: "(";
        }
        
        &:after {
            content: ")";
        }*/
    }
}

@center-crop-size: 6mm;
@center-crop-size-middle: 4mm;

.center-crop {
    position: absolute;
    width: @center-crop-size-middle;
    height: @center-crop-size-middle;
    
    .horizontal {
        position: absolute;
        top: 0;
        left: -@center-crop-size / 2;
        width: @center-crop-size;
        border-bottom: 1px solid black;
    }
    
    .vertical {
        position: absolute;
        left: 0;
        top: -@center-crop-size / 2;
        height: @center-crop-size;
        border-left: 1px solid black;
    }
    
    .circle {
        position: absolute;
        border: 1px solid black;
        border-radius: (@center-crop-size-middle) / 2;
        top: calc((-@center-crop-size-middle / 2));
        left: calc((-@center-crop-size-middle / 2));
        height: calc(@center-crop-size-middle ~ "- 2px");
        width: calc(@center-crop-size-middle ~ "- 2px");
    }
    
    &.left {
        top: (@paper-height - @center-crop-size) / 2;
        left: 4mm;
    }
    
    &.top {
        top: 4mm;
        left: (@paper-width - @center-crop-size) / 2;
        .circle {
            left: calc((-@center-crop-size-middle / 2) ~" + 1px");
        }
    }
    
    &.right {
        top: (@paper-height - @center-crop-size) / 2;
        right: 0mm;
    }
    
    &.bottom {
        bottom: 0mm;
        left: (@paper-width - @center-crop-size) / 2;
        .circle {
            left: calc((-@center-crop-size-middle / 2) ~" + 1px");
        }
    }
}