@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');

:root {
    /* Colors */
    --icon-active: var(--text-0);
    --icon-inactive: var(--text-2);

    --primary-0: #6A89A7;
    --primary-1: #BDDDFC;
    --primary-2: #88BDF2;
    --primary-3: #384959;

    --surface-0: #282828;
    --surface-1: #555555;

    --text-0: #d9d9d9;
    --text-1: #b9b9b9;
    --text-2: #555555;

    /* Shadows */
    --big-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.5);
}
* { font-family: "Roboto Flex", sans-serif; box-sizing: border-box; font-size: 18px; margin: 0; padding: 0; }
body, html { background-color: var(--surface-0); color: var(--text-0); display: flex; height: 100%; margin: 0; overflow-x: hidden; width: 100%; }

div { position: relative; }
svg { fill: none; height: inherit; }
iframe { border: none; display: block; height: 650px; margin: auto; width: 95%; }
ol, ul { margin: 10px 0 10px 50px; }
li { margin-top: 6px; }

/* Colors */
.primary-0 { fill: var(--primary-0);}
.primary-1 { fill: var(--primary-1);}
.primary-2 { fill: var(--primary-2);}
.primary-3 { fill: var(--primary-3);}

.opacity-75 { fill-opacity: 0.75; }

/** Titles */
h1 { font-size: 40px; font-weight: bolder; letter-spacing: 1px; }
h2 { font-size: 22px; font-weight: bold; line-height: 20px; }
h3 { font-size: 20px; font-weight: bold; text-align: center; margin-bottom: 16px; }

/* Separators */
hr { border-color: var(--surface-1); border-radius: 2px; border-style: solid; margin: 16px 0; }
div.vl{ background-color: var(--surface-1); border-radius: 2px; height: 98%; position: absolute; top: 50%; transform: translate(298px, -50%); width: 2px; }

/* Navbar */
div#navbar { height: 100%; left: 0; margin: auto 0; position: fixed; top: 0; width: 300px; z-index: 200; }
    /* Title */
div#navbar > #title { display: flex; height: 75px; margin:40px 40px; width: 220px; }
div#navbar > #title > h1 { height: fit-content; font-size: 42px; font-variant: small-caps; font-weight: bolder; margin: auto; width: fit-content; }
    /* Elements */
div#navbar > div.elements { color: var(--text-2); margin: auto 40px; }
div#navbar > div.elements.bottom { position: absolute; bottom: 40px; }
    /* Element */
div#navbar > div.elements > a.element { cursor: pointer; display: inline-flex; height: 40px; margin: 10px auto; transition: ease 0.2s;}
div#navbar > div.elements > a.element > svg { fill: var(--icon-inactive); height: inherit; transition: ease 0.2s; }
div#navbar > div.elements > a.element > h1 { height: fit-content; font-size: 18px; font-weight: normal; margin: auto; padding-left: 20px; width: fit-content; }
div#navbar > div.elements > a.element:hover { color: var(--text-1); }
div#navbar > div.elements > a.element:hover > svg { fill: var(--icon-active); }
div#navbar > div.elements > a.element#active:hover { cursor: default; }
div#navbar > div.elements > a.element#active { color: var(--text-0); }
div#navbar > div.elements > a.element#active > svg { fill: var(--icon-active); }

/* Content */
#content { box-sizing: border-box; margin: 0 0 0 300px; min-height: 100%; position: relative; width: calc(100% - 300px); }
#content > h1, #content > h2 { margin: 0 0 16px 0; text-align: center; padding: 8px 16px; border-radius: 16px;}

a.link { background: var(--surface-1); border-radius: 15px; cursor: pointer; padding: 1px 6px; transition: ease 0.2s; text-decoration: none; white-space: nowrap; }
a.link:link { color: var(--text-0); }
a.link:visited { color: var(--text-0); }
a.link:hover { background: var(--primary-3); color: var(--primary-1);}
a.link.big { padding: 10px 16px; margin: 0 auto 10px auto; }

    /* Container */
.cnt { border-radius: 15px; margin: 0 auto 25px auto; max-width: 95%; padding: 0; width: 1000px; z-index: 100; }
.cnt.content.no-scroll { height: 100vh; overflow-y: hidden;}

        /* Box */
.cnt.box { padding-bottom: 16px; background: var(--surface-0); box-shadow: 0 0 15px rgba(0, 0, 0, 0.6); }

        /* type of */
.cnt.box.small{ width: 30%; }
.cnt.box.medium { width: 40%; }
.cnt.box.large { width: 55%; }
.cnt.box.extra-large { width: 75%; }
.cnt.box.widest {width: 95%;}
.cnt.box.fullheight { min-height: 90vh; max-height: 100%; }

        /* Child of */
.cnt.box > div { display: block; padding: 0 25px 0 25px; margin: 0 }
.cnt.box > div p { margin: 0 0 8px 0; }
.cnt.box > div p:last-child { margin-bottom: 0; }
.cnt.box > h2 { margin: 0 0 16px 0; text-align: center; padding: 8px 16px; background: var(--primary-3); border-radius: 15px 15px 0 0; width: 100%;  }
.cnt.box > div a.def { display: block; text-align: center;}
.cnt.box > div p.inline { display: inline-block; }
.cnt.box > div p.inline.before { display: inline-block; width: 100%; margin-top: 8px; }
.cnt.box > div p.inline.after { display: inline; margin-left: 5px; white-space: nowrap; }

        /* Modal */
.cnt.box.modal { box-shadow: 0 0 15px rgba(0, 0, 0, 0.6); font-size: 15px; max-height: 820px; overflow-y: auto; opacity: 0; transform: translateY(-20px); transition: transform 0.3s ease, opacity 0.3s ease; }
.modal-overlay.show .cnt.box.modal { opacity: 1; transform: translateY(0); }

.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center;
    justify-content: center; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.modal-overlay.show { opacity: 1; visibility: visible; }

/* Pages */

    /* Home Elements */
.img-txt { overflow: hidden; }
.img-txt > img { border-radius: 15px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.6); float: left; margin: 0 20px 6px 0; width: 180px; }
.img-txt > img.no-shadow { box-shadow: none !important; }
.img-txt > img.no-shadow.small { height: 105px; width: auto; }

div.competences-categories { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.petit { flex: 1 1 290px; }
.grand { flex: 4 4 350px; }
.categorie { background: var(--surface-1); border-radius: 15px; padding-bottom: 16px; }
.categorie h3 { margin: 0 0 16px 0; padding: 8px 16px; border-radius: 15px 15px 0 0; box-shadow: 0 0 15px rgba(0, 0, 0, 0.6) ;
    background: var(--primary-0); }
.competences-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.competences-list li { display: flex; flex-direction: column; align-items: center; width: 80px; text-align: center; }
.competences-list img { width: 50px; height: 50px; object-fit: contain; margin-bottom: 5px; filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 1)); transition: 0.3s ease-out }
.competences-list img:hover { transform: scale(1.5); }
.hover-text { position: absolute; background-color: rgba(0, 0, 0, 0.7); color: var(--clr-white-a0); font-size: 12px;
    padding: 5px 10px; border-radius: 15px; z-index: 1000; pointer-events: none; transition: opacity 0.3s ease; opacity: 0; }


/* Timeline (barre verticale) */
.timeline { margin: 0 auto; max-width: 1200px; position: relative; }
.timeline::after { background-color: var(--primary-1); border-radius: 5px; bottom: 0; content: ''; left: 50%; margin-left: -3px; position: absolute; top: 0; width: 6px; }
/* Container global (content & cercle) */
.container { background-color: inherit; padding: 10px 40px; position: relative; width: 50%; }
/* Cercle sur la timeline */
.container::after { background-color: var(--primary-3); border: 4px solid var(--primary-2); border-radius: 50%; content: ''; height: 25px;
    position: absolute; right: -17px; top: 18px; width: 25px; z-index: 1; }
/* Place the container to the left */
.left { left: 0; }
/* Place the container to the right */
.right { left: 50%; }
/* Add arrows to the left container (pointing right) */
.left::before { border: medium solid var(--primary-0); border-width: 10px 0 10px 10px ; border-color: transparent transparent transparent var(--primary-0);
    content: " "; height: 0; right: 30px; position: absolute; top: 25px; width: 0; z-index: 1; }
/* Add arrows to the right container (pointing left) */
.right::before { border: medium solid var(--primary-0); border-width: 10px 10px 10px 0; border-color: transparent var(--primary-0) transparent transparent;
    content: " "; height: 0; left: 30px; position: absolute; top: 25px; width: 0; z-index: 1; }
/* Fix the circle for containers on the right side */
.right::after { left: -16px; }
/* The actual content */
.content { background-color: var(--surface-0); border-radius: 15px; box-shadow: var(--big-shadow); position: relative; }
.content > h2 { margin: 0 0 16px 0; padding: 8px 16px; border-radius: 15px 15px 0 0; background: var(--primary-0); }
.content > .text { display: inline-block; margin: 0 25px 16px 25px; color: var(--text-0); }

@media screen and (max-width: 1300px) {
    /* Place the timelime to the left */
    .timeline::after { left: 31px; }

    /* Full-width containers */
    .container { padding-left: 70px; padding-right: 25px; width: calc(100% - 300px); }

    /* Make sure that all arrows are pointing leftwards */
    .container::before { left: 60px; border: medium solid var(--primary-0); border-width: 10px 10px 10px 0; border-color: transparent var(--primary-0) transparent transparent; }

    /* Make sure all circles are at the same spot */
    .left::after, .right::after { left: 15px; }

    /* Make all right containers behave like the left ones */
    .right { left: 0%; }
}

    /* Mes Projets */

.cf { color: var(--text-1); font-size: 13px; }