:root {
    --margin-mm: 5;
    --font-size-mm: 4;


    --width-mm: 210;
    --height-mm: 297;
    --gap-mm: 5;
    --side-panel-width-fs: 11;
    --width: min(95vw, 250mm);
    --page-color: white;
    --highlight-color: rgb(243, 243, 246);
}


body {
    background-color: #404040;
    margin: 0;
    --padding: calc( (100vw - var(--width)) / 2 );
    padding: 2.5vw var(--padding)
}

@media print {
    :root {
        --width: 210mm;
        --highlight-color: white;


    }
    body {
        padding: 0;
        margin: 0;
        width: 210mm;
        height: 297mm
    }

    #root {
        height: 297mm;
        --mm: 1mm;
    }


    .guide {
        display: none;
    }
    .shrink-to-fit {
        display: none;
    }
}

h1, h2 {
    font-weight: 900;
}
h1, h2, h3, h4, h5, h6, p, li{
    margin: 0;
    padding: 0;
}
ul {
    margin: 0;
}

.shrink-to-fit {
    position: fixed;
    top: 0;
    left: 0;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.64 97.61"><path fill="white" d="M30.71,0h36.22c7.65,0,13.85,6.21,13.85,13.85v5.03H16.86v-5.03c0-7.65,6.21-13.85,13.85-13.85Z"/><path fill="white" d="M83,24.38H14.64c-8.09,0-14.64,6.55-14.64,14.64v22.25c0,8.09,6.55,14.64,14.64,14.64h2.47v-15.06h-2.15c-1.52,0-2.75-1.23-2.75-2.75s1.23-2.75,2.75-2.75h67.73c1.52,0,2.75,1.23,2.75,2.75s-1.23,2.75-2.75,2.75h-2.15v15.06h2.47c8.09,0,14.64-6.55,14.64-14.64v-22.25c0-8.09-6.55-14.64-14.64-14.64ZM27.53,39.65c0,1.63-1.32,2.95-2.95,2.95h-9.51c-1.63,0-2.95-1.32-2.95-2.95h0c0-1.63,1.32-2.95,2.95-2.95h9.51c1.63,0,2.95,1.32,2.95,2.95h0Z"/><path fill="white" d="M22.61,60.85v30.72c0,3.33,2.7,6.03,6.03,6.03h40.36c3.33,0,6.03-2.7,6.03-6.03v-30.72H22.61ZM56.72,85.12h-15.8c-1.63,0-2.95-1.32-2.95-2.95s1.32-2.95,2.95-2.95h15.8c1.63,0,2.95,1.32,2.95,2.95s-1.32,2.95-2.95,2.95ZM56.72,73.01h-15.8c-1.63,0-2.95-1.32-2.95-2.95s1.32-2.95,2.95-2.95h15.8c1.63,0,2.95,1.32,2.95,2.95s-1.32,2.95-2.95,2.95Z"/></svg>');
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
    width: 2.5em;
    height: 2.5em;
    background-color: rgb(27, 26, 26);
    border-bottom-right-radius: 1em;
    cursor: pointer;
    z-index: 10000;
}

#root {
    --mm: calc(var(--width) / var(--width-mm));

    --fs: calc(var(--font-size-mm) * var(--mm));
    --side-panel-width-mm: calc(var(--side-panel-width-fs) * var(--font-size-mm));
    --margin: calc(var(--margin-mm) * var(--mm));
    --page-height: calc(var(--height-mm) * var(--mm));
    --gap: calc(var(--gap-mm) * var(--mm));
    --side-panel-width: calc(var(--side-panel-width-mm) * var(--mm));
    font-size: var(--fs);
    padding: var(--margin);
    width: var(--width);
    box-sizing: border-box;
    background: var(--page-color);
    font-family:  "Supreme LL TT";
    position: relative;
}

#root:not([resizing]) {
    min-height: var(--page-height);
}

#root:not([guides]) .guide {
    display: none;
}

.guide {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--width);
    height: var(--page-height);
    border: 1px dashed red;
    pointer-events: none;
    z-index: 1000;
    box-sizing: border-box;
    border: 1px dashed #493a3ab3;
}


.header {
    background: #3e719b;
    color: white;
    /* height: var(--side-panel-width); */
}
.header > .col {
    padding: calc(var(--gap) * 0.7) 0;
}

.profile-pic {
    aspect-ratio: 1 / 1;
    width: var(--side-panel-width);
    height: var(--side-panel-width);
    background-image: url("images/dp4.jpg");
    background-size: cover;
}

.header .info { 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    gap: calc(2 * var(--mm));
}

.loading {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3em;
    color: white;
    z-index: 0;
}

/* .header h1 {
    font-size: 2em;
} */

.main {
    display: flex;
    gap: var(--gap);
    height: 100%;
}


.side-small {
    width: var(--side-panel-width);
}

.side-large {
    width: calc(var(--width) - var(--side-panel-width) - 2 * var(--margin) - var(--gap));
    height: 100%;
}


.row {
    display: flex;
    gap: var(--gap);
}


.row-center {
    display: flex;
    gap: var(--gap);
    align-items: center;
}


.row-space {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.col {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

t-frame {
    display: block
}

t-for[key="skills"] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6em;
    justify-content: flex-start;
    width: 100%;
}

t-for[key="skills"] img{
   height: 1.9em;
}




[inline] {
    display: inline;
}

[small] {
    font-size: 0.85em;
}

*[tiny-gap] {
    gap: calc(0.4 * var(--gap));
}
*[small-gap] {
    gap: calc(0.7 * var(--gap));
}
*[big-gap] {
    gap: calc(1.5 * var(--gap));
}
*[no-gap] {
    gap: 0;
}
[indent] {
    padding-left: var(--gap);
}

[space] {
    justify-content: space-between;
}

[border-bottom] {
    border-bottom: 2px solid black;
    padding-bottom: calc(0.4 * var(--gap));
}

[hover-highlight] {
    transition: background 0.3s, box-shadow 0.3s;
    border-radius: 1em;
}
*[hover-highlight]:hover {
    background: var(--highlight-color);
    box-shadow: 0 0 0.5em 0.5em var(--highlight-color);
}
.company-logo {
    max-height: 1.7em;
    max-width: 5em;
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s transform, 0.3s color;
}
a:hover {
    transform: scale(1.05);
    color: rgb(52, 52, 88);
}





[unset] {
    display: none;
}