<script>
    import NameAndImage from "../Comps/NameAndImage.svelte";
    import ShortProfile from "../Comps/ShortProfile.svelte"
    import CombinedContacts from "../Comps/CombinedContacts.svelte"
    import LinkedInQR from "../Comps/LinkedInQR.svelte";
    import Education from "../Comps/Education.svelte";

    import Profile from "../Comps/Profile.svelte";
</script>

<div class="cv-container-container include-in-print">
    <div class="cv-container">
        <div id="left-section">
            <NameAndImage/>
            <ShortProfile/>
            <CombinedContacts/>
            <LinkedInQR/>
        </div>
        <div id="right-section">
            <Profile/>
            <Education/>
        </div>
    </div>
</div> 

<style>
    .cv-container-container{
        width: 100%;
        height: 100%;

        display: grid;
        place-items: center;
    }

    .cv-container-container * {
        color: black;
    }

    .cv-container {
        width:  210mm;
        height: 297mm;

        background-color: #eeeeee;

        overflow: visible;
        display: flex;
        justify-content: center;
        padding: auto;
    }

    .include-in-print { &, & * {
        -webkit-print-color-adjust:exact !important;
        print-color-adjust:exact !important;
    }}

    #left-section{
        background-color: #bdd6ee;
        width: calc(100% / 3 * 1);
        left: 0;

        display: grid;
        place-items: center;
    }

    #right-section{
        width: calc(100% / 3 * 2);

        display: grid;
        place-items: center;
    }
</style>