@font-face {
   font-family: Mulish;
   src: url(./Mulish/Mulish-VariableFont_wght.ttf);
}

body {
    font-size: 12pt;
    font-family: Mulish, sans;
    line-height: 16pt;
    background: #fff;
    color: #000;
}

#page {
    margin: 10pt;
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: auto 200pt;
    grid-column-gap: 30pt;
}

#header {
    grid-column-start: 1;
    grid-column-end: 3;
    padding-bottom: 10pt;
}

#experience {
    align-self: start;
}

#competence {
    align-self: start;
}

/* Layout adjustments for the moved basic block inside the competence column */
#competence .basic {
    margin: 0 0 12pt 0;
    padding-bottom: 8pt;
    text-align: left;
}

#competence .basic dl {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-auto-rows: auto;
    grid-auto-flow: row;
    grid-column-gap: 8pt;
}

#competence .basic dt {
    text-transform: uppercase;
    font-size: 9pt;
    font-weight: 700;
    color: #222;
    text-align: left;
    line-height: 16pt;
}

#competence .basic dd {
    margin: 0;
    text-align: left;
    line-height: 16pt;
    font-size: 11pt;
}

h1 {
    font-size: 20pt;
    line-height: 30pt;
    text-align: center;
    font-weight: 700;
    margin: 0 0 30pt 0;
    text-transform: uppercase;
}

h3 {
    font-size: 12pt;
    text-transform: uppercase;
    font-weight: 700;
    margin: 20pt 0 0 0;
    border-bottom: 1pt solid black;
}

#experience h3 {
    padding-left: 15pt;
}

#competence h3 {
    text-align: center;
}

p.notice {
    margin: 20pt 0 10pt 0;
    font-size: 10pt;
    text-align: center;
    letter-spacing: 2pt;
}

/* BASIC */

div.basic dl {
    display: grid;
    grid-template-columns: 50pt auto;
    grid-auto-rows: 1fr;
    grid-auto-flow: row;
    grid-column-gap: 10px;
}

div.basic dt {
    text-transform: uppercase;
    font-size: 9pt;
    line-height: 20pt;
    text-align: right;
}

div.basic dd {
    margin: 0;
    line-height: 20pt;
}

/* TIMELINE */

/*div.timeline::before {
    content: "";
    display: block;
    width: 25pt;
    height: 2pt;
    background-color: black;
}*/

div.timeline ul {
    margin-left: 10pt;
    padding-left: 10pt;
    border-left: 1pt solid black;
    position: relative;
}

/* End-cap circle: makes the vertical line end in a circle */
div.timeline ul::after {
    content: "";
    position: absolute;
    left: -3pt;
    bottom: -3pt;
    width: 6pt;
    height: 6pt;
    border-radius: 50%;
    background: #000;
}

div.timeline li {
    position: relative;
    padding: 5pt 0 5pt 10pt;
    text-indent: 0;
}

div.timeline li:first-child {
    padding-top: 7pt;
}

div.timeline li:last-child {
    padding-bottom: 7pt;
}

div.timeline li::before {
    content: "";
    display: inline-block;
    width: 6pt;
    height: 6pt;
    background: black;
    position: absolute;
    left: -13pt;
    top: 10.5pt;
}

div.timeline li:first-child::before {
    top: 12.5pt;
}

div.timeline span.date {
    font-size: 10pt;
    display: inline-block;
    padding-right: 8pt;
    margin-right: 8pt;
    border-right: 1pt solid #ccc;
}

div.timeline span.position {
    font-style: italic;
    padding: 0;
}

div.timeline span.position::before {
    content: " — ";
    font-style: normal;
    color: #444;
}

div.timeline span.place {
    font-weight: bold;
    padding: 0;
    margin-left: 0;
}

div.timeline span.desc {
    display: block;
    margin-top: 2pt;
    font-size: 10pt;
}

div.timeline section.projectdesc {
    display: block;
    margin-top: 2pt;
    position: relative;
    padding-left: 10pt;
}

div.timeline section.projectdesc::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    line-height: inherit;
}

div.timeline section.projectdesc .project {
    display: block;
    font-weight: 700;
}

div.timeline section.projectdesc .description {
    display: block;
    margin-left: 8pt;
    font-size: 10pt;
    line-height: 14pt;
}

div.timeline section.projectdesc .tech {
    display: block;
    font-size: 10pt;
    margin-left: 8pt;
    line-height: 14pt;
    color: inherit;
    font-style: italic;
}

div.timeline section.projectdesc .tech .tech-list {
    font-style: normal;
    font-weight: 600;
    color: inherit;
}


/* LANGUAGE */

div.language ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: flex-start;
}

div.language li {
    padding-top: 5pt;
}

div.language li * {
    display: block;
    text-align: center;
}

div.language span.code {
    font-size: 9pt;
    line-height: 9pt;
}

div.language span.level {
    font-weight: bold;
}

/* SKILLS */

div.skills li {
    padding-top: 5pt;
    text-align: center;
}






@media print {

    /* Force a single A4 page layout */
    @page {
        size: A4;
        margin: 10mm;
    }

    html, body {
        background: #fff;
        margin: 0;
        padding: 0;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Fit the content into the printable box (A4 minus margins) */
    #page {
        margin: 0;
        width: 190mm;
        height: 277mm;
        grid-template-rows: 1fr;
        grid-template-columns: 1fr 55mm;
        grid-column-gap: 8mm;
        overflow: hidden;
    }

    /* Slightly tighter typography for print */
    body {
        font-size: 10pt;
        line-height: 13pt;
    }

    h1 {
        font-size: 16pt;
        line-height: 20pt;
        margin: 0 0 10pt 0;
    }

    h3 {
        margin-top: 10pt;
        font-size: 10pt;
    }

    /* Reduce vertical spacing in lists */
    div.timeline li {
        padding: 3pt 0 3pt 15pt;
    }

    div.timeline li:first-child {
        padding-top: 5pt;
    }

    div.timeline li:last-child {
        padding-bottom: 5pt;
    }

    div.skills li {
        padding-top: 3pt;
    }

    div.language li {
        padding-top: 3pt;
    }

    /* Avoid awkward print splits inside timeline blocks (best-effort) */
    div.timeline,
    div.timeline ul,
    div.timeline li {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Keep project descriptions slightly smaller/tighter in print */
    div.timeline section.projectdesc .description {
        margin-left: 6pt;
        font-size: 9pt;
        line-height: 12pt;
    }

    div.timeline section.projectdesc .tech {
        margin-left: 6pt;
        font-size: 9pt;
        line-height: 12pt;
        color: inherit;
        font-style: italic;
    }

    div.timeline section.projectdesc .tech .tech-list {
        font-style: normal;
        font-weight: 600;
        color: inherit;
    }

}