@font-face {
    font-family: 'Work Sans';
    src: url('font/WorkSans-VariableFont_wght.ttf') format('truetype');
}

:root {

    --white2: #E1E1E1;
    --grey: #a9a9a9;
    --yellow: #FFE500;
    --black: #1E1E1E;
    --blue: #0043FF;
    --purple: #FF00E5;
    --white: #F5F5F5;
    --lgray: #3B456a;
    --dgray: #2e3d68;
    --dgrayT: rgba(180, 180, 180, 0.1);
    --lred: #ff2e2e;
    --dred: #c70000;
    --lorange: #ff852e;
    --dorange: #c75400;
    --lgreen: #00f327;
    --dgreen: #008a16;
    --lblue: #628dff;
    --dblue: #265eff;

    --hoverColor: #fff;

    --radius: 15px;

    --transition: all .2s ease-out;

    --gradS: linear-gradient(-45deg, var(--black), var(--blue), var(--black));
    --gradG: linear-gradient(135deg, var(--lgray), var(--dgray));
    --gradGI: linear-gradient(135deg, var(--dgray), var(--lgray));
    --shadow: 10px 30px 8px rgba(22, 26, 41, 0.34);
    --headShadow: 0 0 12px rgba(0, 0, 0, 1);

    --horizontalBannerLeftMargin: .5cm;
    --horizontalBannerWidth: 6.5cm;

    --verticalBannerTopMargin: .5cm;
    --verticalBannerHeight: 2.5cm;
}

html {
    scroll-behavior: smooth;
}

* {
    font-family: "Work Sans", sans-serif;
    margin: 0;
    padding: 0;
}

body {
    min-width: 25cm;
    min-height: 35cm;
    background: #2a2A2A;
    position: relative;
}

.textWithIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

a {
    color: white;
    text-decoration: none;
}

#CV {
    width: 21cm;
    height: 29.7cm;
    margin: 40px auto;
    padding: 0;

    background: white;
    display: flex;
    position: relative;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

    .section {
        display: flex;
        flex-direction: column;
        gap: .2cm;
        font-size: .6em;
        font-weight: normal;
        width: 100%;
    }

    .section:not(:first-child) {
        padding-top: 16px;
    }

    .skills_list {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: .4cm .2cm;
        justify-content: center;
        align-items: center;

        .skill_container {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            justify-content: center;
            align-items: center;

            img {
                margin: 4px 10px;
                width: 1cm;
                object-fit: cover;
            }

            p {
                margin-top: auto;
            }

        }
    }


    .bandeau {
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-size: 1.5em;
        font-weight: bold;


        .section_title {
            font-variant: small-caps;
            padding-left: .6cm;
            text-decoration: underline;
        }
    }

    #topBand {
        position: absolute;
        width: calc(100% - (var(--horizontalBannerWidth) + 1cm));
        height: var(--verticalBannerHeight);
        top: var(--verticalBannerTopMargin);
        background: #552727;
        padding-left: calc(var(--horizontalBannerWidth) + 1cm);
        display: flex;
        flex-direction: column;
        align-content: start;
        justify-content: center;
        align-items: start;

        h1 {
            margin-left: 1cm;
            font-size: 1.5em;
            font-weight: bold;
        }

        p {
            margin-left: 1cm;
            font-size: 1em;
            font-weight: bold;
        }

        p#permis {
            margin-left: 1cm;
            font-size: .6em;
            font-weight: bold;
        }

    }

    #leftBand {
        position: absolute;
        width: var(--horizontalBannerWidth);
        left: var(--horizontalBannerLeftMargin);
        height: calc(100% - 3.6cm);
        background: #242a43;
        padding-top: 3.6cm;
        display: flex;
        flex-direction: column;
        align-content: start;
        justify-content: start;


        .section:not(:last-child)::after {
            content: '';
            width: 60%;
            margin: auto;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--grey);
        }

        #contact {
            width: 100%;
            font-weight: normal;
            display: flex;
            flex-direction: column;
            align-content: start;
            justify-content: start;
            align-items: start;
            box-sizing: border-box;


            .textWithIcon {
                width: 100%;

                span.material-symbols-outlined {
                    margin-right: .4cm;
                }

                p {
                    width: 66%;
                }


            }

        }

        #copyright {
            width: 100%;
            font-size: .6em;
            font-weight: normal;
            display: flex;
            margin-top: auto;

            p {
                width: 100%;
                text-align: center;
                padding: .4cm;
            }

        }
    }

    #crossingPoint {
        position: absolute;
        width: calc(var(--horizontalBannerWidth) + .6cm);
        height: calc(var(--verticalBannerHeight) + .8cm);
        background: #242a43;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        left: .2cm;
        display: flex;

        img {
            margin: auto;
            aspect-ratio: 3/3.6;
            height: 80%;
            object-fit: cover;
        }
    }

    #mainPart {
        position: absolute;
        left: 7.25cm;
        top: calc(var(--verticalBannerHeight) + .8cm);
        width: calc(100% - (var(--horizontalBannerWidth) + 1cm));
        height: calc(100% - (var(--verticalBannerHeight) + 1cm));
        /*outline: solid 1px red;*/

        .section::before {
            content: attr(section-title);
            font-size: 1.6em;
            text-decoration: underline;
            font-weight: bold;
            text-transform: uppercase;
            padding: .2cm;
        }

        #objectifs p {
            padding: .1cm .4cm;
            text-indent: 16px;
            font-size: 1.2em;
            font-weight: normal;
            text-align: justify;

        }

        #diplomes {
            position: relative;
        }

        #diplomes .list {
            display: flex;
            flex-direction: row-reverse;
            text-align: center;
            justify-content: space-between;
        }

        #separator {
            position: absolute;
            background: var(--dgray);
            padding: 0 !important;
            top: 54px;
            left: 0;
            right: 0;
            margin-left: .2cm;
            width: 78%;
            height: 6px;
            border-radius: 5px 0 0 5px;
        }

        #separator::after {
            content: '';
            position: absolute;
            background-image: linear-gradient(
                    35deg,
                    var(--dgray) 0%,
                    var(--dgray) 10%,
                    white 10%,
                    white 20%,
                    var(--dgray) 20%,
                    var(--dgray) 30%,
                    white 30%,
                    white 40%,
                    var(--dgray) 40%,
                    var(--dgray) 50%,
                    white 50%,
                    white 60%,
                    var(--dgray) 60%,
                    var(--dgray) 70%,
                    white 70%,
                    white 80%,
                    var(--dgray) 80%,
                    var(--dgray) 90%,
                    white 90%,
                    white 100%
            );
            padding: 0 !important;
            right: -2.15cm;

            width: 22%;
            height: 6px;
            border-radius: 0 5px 5px 0;
        }

        .diplome::before {
            content: '';
            position: absolute;
            padding: 0 !important;
            width: 10px;
            height: 10px;
            top: -4.5px;
            border-radius: 100%;
            background: white;
            outline: 4px solid var(--dgray);
        }

        .diplome {
            position: relative;
            display: flex;
            gap: .1cm;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            width: fit-content;


            .diplome_title {
                font-size: 1.2em;
                font-weight: bold;
                padding: .5cm .2cm .1cm;
            }

            .diplome_date {
                font-size: 1em;
                font-weight: normal;
            }

            .diplome_description {
                font-size: .8em;
                font-weight: normal;
            }
        }

        #personalProjects, #scholarProjects {
            padding-top: 0;
        }

    }


}


.job {
    font-size: 1.2em;
    margin: 0 10px;
}

.job h3 {
    font-variant: small-caps;
    font-weight: normal;
}

.job .details {
    text-align: justify;
    text-indent: 16px;
}

.job a {
    margin: 8px 0;
    color: black;
    text-decoration: underline;
}

.job p {
    margin: 6px 0;
}

.job .when {
    text-align: right;
}

#comp {
    padding: 16px 0 0;
    font-variant: small-caps;
    font-weight: normal;
    font-size: 1em !important;
}

.fab {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    width: 100vw !important;
    display: flex;
    font-size: 1.2em;
    font-weight: bold;
    background: var(--dgray);
    border-radius: 0 0 0 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    transition: all .2s ease-out;

    a {
        padding: 16px;
        color: white;
        text-decoration: none;
        width: 100%;
    }

    &:hover {
        cursor: pointer;
        background: var(--lgray);
    }
}



/* Temporary, when pages will be done, remove this */
#personalProjects .job .when a {
    display: none;
}