@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,700");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800");

/** Variables **/
:root {
    --darker: #090909;
    --dark: #1F3A5F;
    --medium: #4B86B4;
    --light: #D9E4F2;
    --lighter: #F3F3F6;

    --font-size: 16px;
    --page-margin: 0px;
    --icon-margin: 10px;
    --border-radius: 0px;
    --link-color: var(--medium);
    --body-color: var(--darker);
    --body-background: var(--lighter);

    --toggler-margin: 5px;
    --print-color: var(--light);

    --curriculum-width: 1200px;
    --curriculum-margin-top: 0px;
    --curriculum-margin-side: 0px;

    --header-box-shadow: none;
    --header-gap-left: 0px;

    --photo-size: 180px;
    --photo-margin: 20px;
    --photo-border-size: 5px;
    --photo-border-color: var(--light);
    --photo-left: calc(50vw - var(--photo-size) / 2);
    --photo-top: calc(var(--title-height) - var(--photo-size) / 2);

    --title-text-align: center;
    --title-gap-left: 0px;
    --title-margin-top: 0px;
    --title-height: calc(130px + var(--photo-size) / 2);
    --title-padding-bottom: calc(var(--photo-size) / 2 - 10px);

    --info-min-height: calc(var(--photo-margin) + var(--photo-size) / 2);
    --info-padding-right: 0px;
    --info-padding-left: 0px;
    --info-columns: 0;

    --nav-icon-multiplier: 1.3;

    --footer-height: 70px;
    --footer-padding-bottom: calc(var(--main-padding-x) - 5px);

    --main-background: var(--lighter);
    --main-padding-x: 30px;
    --main-border: none;
    --main-border-top: 1px solid var(--light);

    --sections-list-page-margin: 0px;
    --sections-list-border-size: 1px;
    --sections-list-margin-left: 5px;
    --sections-list-icon-color: var(--dark);
    --sections-item-margin-left: calc(var(--main-padding-x) + var(--sections-list-margin-left) - 5px);
    --sections-description-margin: 1px;

    --about-skills-columns: 1;
    --about-bar-height: 8px;
    --publications-margin-right: 0px;

    @media (min-width: 576px) {
        --info-columns: 1;

        --footer-height: 50px;
    }

    @media (min-width: 768px) {
        --header-gap-left: calc(2 * var(--photo-margin) + var(--photo-size));

        --photo-size: 240px;
        --photo-left: calc(var(--photo-margin) + var(--curriculum-margin-side));

        --title-text-align: left;
        --title-padding-bottom: 0px;
        --title-height: 160px;

        --info-min-height: 0px;
        --info-padding-right: calc(var(--title-gap-left) + var(--photo-margin));
        --info-padding-left: calc(var(--title-gap-left) + var(--header-gap-left) - var(--icon-margin));

        --about-skills-columns: 2;
    }

    @media (min-width: 992px) {
        --info-columns: 2;

        --nav-icon-multiplier: 1.2;

        --footer-height: 30px;
    }

    @media (min-width: 1200px) {
        --border-radius: 5px;
        --body-background: #FCFCFC;

        --curriculum-margin-top: 30px;
        --curriculum-margin-side: max(var(--curriculum-margin-top), calc((100vw - var(--curriculum-width)) / 2));

        --print-color: var(--dark);

        --header-box-shadow: 0 1px 2px var(--dark);

        --photo-margin: 15px;
        --photo-border-size: 8px;
        --photo-top: calc(var(--photo-margin) + var(--curriculum-margin-top));

        --title-margin-top: calc(var(--photo-margin) + var(--photo-size) / 2 - var(--title-height) / 2);
        --title-gap-left: 80px;
        --title-height: 130px;

        --info-columns: 3;

        --footer-height: 50px;
        --footer-padding-bottom: calc(5px + var(--curriculum-margin-side));

        --main-border: 1px solid var(--dark);
        --main-border-top: var(--main-border);

        --about-skills-columns: 4;
    }

    @media print {
        --body-background: var(--lighter);

        --photo-size: 180px;
        --photo-border-size: 5px;
        --photo-top: calc(var(--photo-margin) + var(--curriculum-margin-top));

        --info-columns: 3;

        .print-full {
            --font-size: 14px;
            --page-margin: 40px;
            --title-height: 110px;
            --info-min-height: calc(var(--title-height) - var(--photo-border-size));
            --sections-list-page-margin: 15px;
            --sections-list-margin-left: 5px;
            --sections-item-margin-left: 15px;
            --about-skills-columns: 4;
            --publications-margin-right: 40px;
        }

        .print-short {
            --font-size: 12px;
            --title-height: 90px;
            --title-margin-top: calc(var(--photo-margin) + var(--photo-size) / 2 - var(--title-height) / 2);
            --footer-height: 60px;
            --sections-list-margin-left: 10px;
            --sections-item-margin-left: 10px;
            --about-skills-columns: 1;
            --about-bar-height: 5px;
        }
    }
}