/** Main Settings **/

html, body {
    font-family: "Open Sans", sans-serif;
    font-size: var(--font-size);
    color: var(--body-color);
    background: var(--body-background);
    scrollbar-color: var(--darker) rgba(255, 255, 255, 0.6);
}

*:focus {
    outline-color: var(--medium);
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--dark);
    page-break-after: avoid;
}

p {
    margin: 0;
}

a {
    color: inherit;
}

a:hover {
    color: var(--link-color);
}

.bi {
    vertical-align: middle;
    margin: 0 var(--icon-margin);
}

#header-margin {
    height: var(--page-margin);
}

#footer-margin {
    height: calc(var(--footer-height) + var(--sections-list-page-margin));
}

/** Curriculum & Toggler Settings **/

#curriculum {
    background: var(--body-background);
    margin: var(--curriculum-margin-top) var(--curriculum-margin-side);
}

#print {
    position: absolute;
    top: calc(2px + var(--curriculum-margin-top) + var(--toggler-margin));
    right: calc(50px + var(--curriculum-margin-side) + var(--toggler-margin));
    color: var(--print-color);
    background: transparent;
    text-decoration: underline;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 17px;
    border: none;
}

#language {
    position: absolute;
    top: calc(var(--curriculum-margin-top) + var(--toggler-margin));
    right: calc(7px + var(--curriculum-margin-side) + var(--toggler-margin));
    background-color: transparent;
    border: none;

    &:hover {
        cursor: pointer;
        border-bottom: 1px solid var(--body-color);
    }
}

/** Navbar & Footer Settings **/

nav {
    a, a * {
        color: var(--body-color);

        &:hover {
            text-decoration: underline;
        }
    }

    .current-page a, .current-page a * {
        color: var(--medium);
        font-weight: bold;
    }

    .bi {
        font-size: calc(var(--nav-icon-multiplier) * var(--font-size));
    }
}

footer {
    height: var(--footer-height);
    padding: 0 var(--footer-padding-bottom);
    border-top: 1px solid var(--light);
    background-color: var(--body-background);
    justify-content: end;
    font-size: 10px;
}

/** Header Settings **/

header {
    font-family: "Poppins", sans-serif;
    background: var(--light);
    border-radius: var(--border-radius);
    box-shadow: var(--header-box-shadow);
    -moz-box-shadow: var(--header-box-shadow);
    -webkit-box-shadow: var(--header-box-shadow);

    #photo {
        position: absolute;
        top: var(--photo-top);
        left: var(--photo-left);
        width: var(--photo-size);
        box-shadow: 0 1px 1px var(--light);
        border: var(--photo-border-size) solid var(--light);
        border-radius: 100%;
    }

    #title {
        width: 100%;
        height: var(--title-height);
        background: var(--dark);
        color: var(--lighter);
        text-align: var(--title-text-align);
        margin-top: var(--title-margin-top);
        padding-bottom: var(--title-padding-bottom);
        padding-left: calc(var(--header-gap-left) + var(--title-gap-left));

        #tag {
            font-size: calc(1.2 * var(--font-size));
            font-weight: 500;
        }
    }

    #info {
        min-height: var(--info-min-height);
        padding-left: var(--info-padding-left);
        padding-right: var(--info-padding-right);

        ul {
            grid-template-columns: repeat(var(--info-columns), auto) max-content;
        }

        .info-item {
            font-size: calc(0.9 * var(--font-size));
        }

        .toggler {
            right: 0;
            position: absolute;
            font-size: calc(1.5 * var(--font-size));
            color: var(--body-color);
            text-decoration: none;
        }
    }
}

/** Sections Settings **/

main {
    border: var(--main-border);
    border-top: var(--main-border-top);
    border-radius: var(--border-radius);
    background: var(--main-background);
    margin-top: calc(-1 * var(--page-margin));
    margin-bottom: var(--curriculum-margin-top);
    padding: 20px var(--main-padding-x);

    a:hover, a:hover * {
        color: var(--link-color) !important;
        text-decoration: underline;
    }
}

.about {
    a, strong, em {
        color: var(--dark);
    }

    a {
        font-weight: 500;
    }

    #skills {
        grid-template-columns: repeat(var(--about-skills-columns), 1fr);
    }

    .skills-title {
        font-size: calc(1.2 * var(--font-size));
        font-weight: 500;
    }

    .bar-outer {
        height: var(--about-bar-height);
        border-radius: var(--about-bar-height);
        background: var(--light);
    }

    .bar-inner {
        height: var(--about-bar-height);
        border-radius: var(--about-bar-height);
        background: var(--dark);
    }

    .comment {
        font-size: calc(0.9 * var(--font-size));
        font-weight: 300;
    }
}

.education {
    .small {
        font-style: italic;
    }

    .description {
        font-size: calc(0.9 * var(--font-size));

        ul {
            border: none;
            list-style: square inside;
            margin-left: var(--sections-description-margin);
        }

        li {
            font-size: calc(0.85 * var(--font-size));
        }

        li:before {
            content: "";
            margin-left: -5px;
        }
    }
}

.publications {
    margin-right: var(--publications-margin-right);

    em {
        font-style: normal;
        color: var(--medium);
    }

    .description {
        font-size: calc(0.85 * var(--font-size));
    }
}

.section-list {
    border-left: var(--sections-list-border-size) solid var(--sections-list-icon-color);
    margin-left: var(--sections-list-margin-left);

    > li {
        /* use this margin/padding trick to have the border line on top of new pages */
        padding-top: var(--sections-list-page-margin);
        margin-top: calc(-1 * var(--sections-list-page-margin));
        margin-left: var(--sections-item-margin-left);
        font-size: calc(1.1 * var(--font-size));
        page-break-inside: avoid;
    }

    strong {
        color: var(--darker);
    }

    .timeline {
        position: absolute;
        background: var(--main-background);
        color: var(--sections-list-icon-color);
        margin-left: calc(0px - var(--sections-list-border-size) - var(--sections-item-margin-left) - 1.1 * var(--font-size) / 2);
        padding: 1px 0;
    }

    .small {
        font-size: var(--font-size);
        font-weight: 300;
    }

    .description {
        width: 100%;

        p {
            margin: 4px var(--sections-description-margin);
            border-left: 2px solid var(--light);
            padding-left: 10px;
        }

        a {
            color: var(--dark);
            font-weight: 500;
        }

        strong, strong * {
            color: var(--dark);
            font-weight: bold;
        }
    }
}

/** Print Settings **/

@media print {
    @page {
        size: A4 portrait;
    }

    html {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    footer {
        font-size: 9px;
    }

    strong {
        font-weight: 600;
    }

    nav, #language, #print, .toggler {
        display: none !important;
    }

    #info .bi {
        margin-right: 3px;
    }

    .about {
        .skillset * {
            font-size: 11px !important;
        }

        .skills-title {
            font-size: 13px;
            font-weight: 600;
            text-transform: uppercase;
        }
    }

    .print-short {
        --sidebar-size: calc(2 * var(--photo-margin) + var(--photo-size));
        --sidebar-padding: 15px;
        --footer-bottom: 10px;

        #footer-margin {
            height: 0;
        }

        h1 {
            font-size: 28px;
        }

        header {
            background-color: transparent;
        }

        main {
            margin: 0;
            padding: 0;
            border: none;
            height: calc(100vh - var(--photo-margin) - var(--photo-size) / 2 - var(--title-height) / 2);
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
        }

        footer {
            position: absolute;
            width: var(--sidebar-size);
            bottom: var(--footer-bottom);
            padding: 0 var(--sidebar-padding);
            background-color: transparent;
            text-align: left;
        }

        #photo {
            z-index: 2;
            border-color: var(--body-background);
        }

        #title {
            padding-left: calc(var(--sidebar-size) / 2 + 50px);
            margin-left: calc(var(--sidebar-size) / 2);
            z-index: 1;
        }

        #info {
            top: 0;
            left: 0;
            right: 0;
            position: absolute;
            padding-left: calc(var(--sidebar-size) + var(--photo-margin) - var(--icon-margin));
            padding-right: var(--photo-margin);
        }

        .about {
            top: 0;
            bottom: 0;
            position: absolute;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            height: 100%;
            width: var(--sidebar-size);
            padding: 0 var(--sidebar-padding);
            padding-top: calc(5px + var(--photo-margin) + var(--photo-size));
            padding-bottom: calc(5px + var(--footer-height) + var(--footer-bottom));
            background-color: var(--light);

            strong, a {
                color: var(--darker)
            }

            p {
                font-size: 12.5px;
                text-align: left;
            }

            #skills {
                .skill-name {
                    margin-bottom: 1px !important;
                }

                .bar-outer {
                    background-color: rgba(0, 0, 0, 0.1);
                }
            }
        }

        section:not(.about) {
            padding: 0 10px;
            margin-left: var(--sidebar-size)
        }
    }
}

/** Utilities **/

.justified {
    text-align: justify;
    text-justify: inter-word;
}

.toggler[aria-expanded=true] > .open, .toggler[aria-expanded=false] > .close {
    display: none;
}

.toggler[aria-expanded=true] > .close, .toggler[aria-expanded=false] > .open {
    display: inline;
}

@media print {
    .print-full .d-full-none, .print-short .d-short-none {
        display: none;
    }

    .print-full .d-full-block, .print-short .d-short-block {
        display: block;
    }

    .print-short .m-short-0 {
        margin: 0 !important;
    }

    .print-short .mt-short-0 {
        margin-top: 0 !important;
    }

    .print-short .mt-short-half {
        margin-top: 2px !important;
    }

    .print-short .mb-short-1 {
        margin-bottom: 4px !important;
    }

    .print-short .py-short-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .print-short .gap-short-half {
        gap: 2px !important;
    }

    .print-short .gap-short-2 {
        gap: 8px !important;
    }
}