/*---------------- Print / PDF ----------------*/
* { /* https://stackoverflow.com/questions/6670151/how-can-i-force-browsers-to-print-background-images-in-css */
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
}

@media print {
    body {
        background-color: transparent !important;
    }

    .page {
        margin: 0 !important;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
        --page-height: 100vh !important;
    }

    .title-line-link {
        pointer-events: none !important;
    }
}

/*---------------- Shadow ----------------*/
/* https://stackoverflow.com/questions/3186688/drop-shadow-for-png-image-in-css */
.shadow {
    --shadow: drop-shadow(0 1pt 3.5pt rgba(0, 0, 0, 0.2)) opacity(1);
    -webkit-filter: var(--shadow);
    filter: var(--shadow);
}

.icon-shadow {
    --shadow: drop-shadow(0 1pt 1.5pt rgba(0, 0, 0, 0.25)) opacity(1.0);
    -webkit-filter: var(--shadow);
    filter: var(--shadow);
}

/*---------------- Pages ----------------*/
body {
    font-family: Arial;
    
    background-color: rgba(96, 96, 96);
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

.page {
    --blue: #0096FF;
    --green: #0CDD4A;
    --orange: #FF7D0F;
    --gray: #C0C0C0;

    --base-margin: 6pt;
    --sidebar-lenght: 1.25cm;
    --text-indent: 2.5mm;
    --text-small: 8pt;
    --page-width: 210mm;
    --page-height: 296.75mm;
    --page-margin: 1.27cm;
    --sidebar-lenght-full: calc(var(--sidebar-lenght) + var(--text-indent));
    
    display: block;
    position: relative;
    z-index: 0;

    background-color: white;
    margin: 0.5cm auto 0.5cm auto;
    padding: 0;
    width: var(--page-width);
    height: var(--page-height);
    box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
    page-break-after: always;
    font-size: 11pt;
}

    .page .number {
        position: absolute;
        left: 50%;
        bottom: 1.2cm;
        transform: translateX(-50%);
    }

.orange {
    --color: var(--orange);
}

.green {
    --color: var(--green);
}

.blue {
    --color: var(--blue);
}

    .blue .section p, .green .section p {
        margin: 0 0 var(--base-margin) calc(var(--sidebar-lenght) + var(--text-indent));
    }

    .blue .dates-line p, .green .dates-line p {
        margin: 0 0 var(--base-margin) 0;
    }

.orange #author a {
    color: black;
    text-decoration: none;
}

.orange .experience a {
    color: var(--blue);
}

.blue a, .green a {
    color: var(--blue);
}

.blue .link, .green .link {
    padding-left: calc(1.5 * var(--sidebar-lenght-full));
    text-indent: calc(-0.5 * var(--sidebar-lenght-full));
}

/*---------------- Standard Content ----------------*/
.content {
    --content-width: calc(var(--page-width) - 2 * var(--page-margin));
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: var(--page-margin);

    z-index: 10;
}

.section {
    width: 100%;
    margin-bottom: 16pt;
}

.title-line {
    --line-thickness: 0.75mm;
    --line-indent: 2mm;
    display: flex;
    width: 100%;
    color: var(--color);
    font-size: 14pt;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: var(--base-margin);
}

    .title-line > .head {
        min-width: var(--sidebar-lenght);
        max-width: var(--sidebar-lenght);
        height: var(--line-thickness);
        margin-top: var(--line-indent);
        background-color: var(--color);
    }

    .title-line > .title {
        margin-left: var(--text-indent);
        margin-right: var(--text-indent);
        white-space: nowrap;
        line-height: 1;
    }

    .title-line > .tail {
        width: 100%;
        height: var(--line-thickness);
        margin-top: var(--line-indent);
        background-color: var(--color);
    }

    .title-line-link {
        text-decoration: none;
    }

.dates-line {
    display: flex;
    width: 100%;
    margin-bottom: var(--base-margin);
}

    .dates-line > .dates {
        min-width: var(--sidebar-lenght);
        max-width: var(--sidebar-lenght);
        color: var(--color);
        font-size: var(--text-small);
        font-weight: bold;
        text-transform: uppercase;
        text-align: center;
        margin-top: 3pt;
    }

        .dates-line > .dates > .single {
            margin-top: 2mm;
        }

        .dates-line > .dates > .delimeter {
            margin: 0.25mm auto 0.25mm auto;
            width: 3mm;
            height: 0.75pt;
            background-color: var(--color);
        }

    .dates-line > .entry {
        margin-left: var(--text-indent);
    }
    
/*---------------- Specific Content ----------------*/
.face {
    position: absolute;
    right: var(--page-margin);
    top: var(--page-margin);
    max-height: 4.4cm;
}

.game-line {
    display: flex;
    align-items: center;
    margin-bottom: var(--base-margin);
}

    .game-line > .icon{
        display: flex;
        min-width: var(--sidebar-lenght);
        max-width: var(--sidebar-lenght);
        justify-content: center;
        align-items: center;
    }

        .game-line > .icon > img {
            position: absolute;
        }

    .game-line > .title {
        display: flex;
        min-width: 4.5cm;
        max-width: 4.5cm;
        margin-left: var(--text-indent);
        font-weight: bold;
    }

    .game-line > .records {
        width: 100%;
    }

        .game-line > .records > .record-line {
            display: flex;
        }

            .game-line > .records > .record-line > .achievement {
                width: 100%;
            }

            .game-line > .records > .record-line > .top {
                min-width: 1.5cm;
                max-width: 1.5cm;
                text-align: right;
            }
    
.studio-list {
    margin: 12pt 0 0 var(--sidebar-lenght-full);
}

    .studio-list .title {
        font-size: 8.5pt;
        text-transform: uppercase;
        color: var(--color);
    }

    .studio-list ul {
        margin: 2pt 0 12pt -20pt;
        list-style-type: disc;
    }

    .studio-list li {
        font-size: 6.5pt;
    }