* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    --font-size-base: 12px;
    --font-size: var(--font-size-base);
    --nav-height: 3rem;
    --scroll-padding: 3rem;
    --page-min-height: calc(100vh - var(--nav-height));

    --color-text: #f3efe9;
    --color-text-alt: #c9c0b9;
    --color-bg: #1c1a29;
    --color-bg-alt: #100c14;
    --color-link-alt:#9182dd;
    --color-link-alt-active:#c5bdff;
    --color-link-alt-visited:#8062b9;
    --color-link:#f0b14c;
    --color-link-active:#f3df91;
    --color-link-visited:#cc8c33;
    --color-dark: #0b0b0c;
    --color-header: #110f23;
    --color-logo: #edeaf7;
    --color-logo-alt: #cac1e9;
    --color-title: #a298c3;
    --color-title-alt: #8185bf;
    --color-subtitle:#c5bdff;
    --color-subtitle-alt:#9d869f;
    --color-title-section:#d3d1e1;
    --color-title-section-alt:#d7d5e7;
    --color-title-small:#b4aac1;
    --color-button:#9d8adb;
    --color-button-active:#cdbeff;
    --color-action: #ffae2f;
    --color-action-active: #fbd674;


    --color-project-work-bg: hsl(82deg, 71%, 19%);
    --color-project-freelance-bg: hsl(125deg, 74%, 20%);
    --color-project-internship-bg: hsl(168deg, 80%, 21%);
    --color-project-studies-bg: hsl(211deg, 87%, 22%);
    --color-project-personal-bg: hsl(254deg, 60%, 22%);
    --color-project-collective-bg: hsl(297deg, 71%, 23%);
    --color-project-learning-bg: hsl(341, 82%, 24%);

    --font-text: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica", "Helvetica Neue", "Arial", sans-serif;
    --font-code: "Fira Code", "Source Code Pro", "Fira Mono", "JetBrains Mono", "Andale Mono", "MonoLisa", "Input Mono", "Apercu Mono", "Consolas", "Inconsolata", "Ubuntu Mono", monospace;
    
    color: var(--color-text);
    background-color: var(--color-bg);
    scroll-padding-top: var(--scroll-padding);
    scroll-behavior: smooth;
    font-family: var(--font-text);
    font-size: var(--font-size);

    @media (min-width: 320px)  { --font-size : calc(var(--font-size-base) + 1px);  }
    @media (min-width: 480px)  { --font-size : calc(var(--font-size-base) + 2px);  }
    @media (min-width: 640px)  { --font-size : calc(var(--font-size-base) + 3px);  }
    @media (min-width: 800px)  { --font-size : calc(var(--font-size-base) + 4px);  }
    @media (min-width: 960px)  { --font-size : calc(var(--font-size-base) + 5px);  }
    @media (min-width: 1120px) { --font-size : calc(var(--font-size-base) + 6px);  }
    @media (min-width: 1280px) { --font-size : calc(var(--font-size-base) + 7px);  }
    @media (min-width: 1440px) { --font-size : calc(var(--font-size-base) + 8px);  }
    @media (min-width: 1600px) { --font-size : calc(var(--font-size-base) + 9px);  }
    @media (min-width: 1760px) { --font-size : calc(var(--font-size-base) + 10px); }
    @media (min-width: 1920px) { --font-size : calc(var(--font-size-base) + 11px); }
    @media (min-width: 2080px) { --font-size : calc(var(--font-size-base) + 12px); }
    @media (min-width: 2240px) { --font-size : calc(var(--font-size-base) + 13px); }
}

h1 {
    font-weight: 300;
    font-size: 1.4em;
    margin: 1em 0;
    text-align: center;
    color:var(--color-title);
    font-family: var(--font-code);

}
h2 {
    font-size: 3em;
    margin: 2em 0;
    text-align: center;
    color:var(--color-subtitle)
}

a, a:link {
    color:var(--color-link);
    transition: color .3s ease-in-out, background-color .3s ease-in-out;
}

a:visited {
    color:var(--color-link-visited);
}

a:hover, a:active, a:focus, a.active {
    color:var(--color-link-active);
}

img {
    max-width: 100%;
}

header {
    position: relative;
    background-color:var(--color-header);
}

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

.nav {
    height: var(--nav-height);
    position: fixed;
    inset: 0 0 auto 0;
    background-color: var(--color-dark);
    z-index: 10000;
    padding:0 1rem;
    display: flex;
    justify-content: center;
    
    @media (min-width: 960px) {
        justify-content: space-between;
    }
}

.title-nav {
    color:currentColor;
    font-size: 1em;
    line-height: var(--nav-height);
    margin: 0;
    font-weight: 200;
}

.link-nav {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.link-nav, 
.link-nav:link 
.link-nav:visited,
a.link-nav, 
a.link-nav:link 
a.link-nav:visited {
    color:var(--color-text);
}

.link-nav:hover,
.link-nav:active, 
.link-nav:focus, 
.link-nav.active,
a.link-nav:hover,
a.link-nav:active, 
a.link-nav:focus, 
a.link-nav.active {
    color:var(--color-logo-alt);
}

.menu {
    display: flex;
    list-style-type: none;
}

.menu-nav {
    position:fixed;
    inset: calc(var(--nav-height) - 1px) 0 0 0;
    display: none;
    flex-direction: column;
    gap: 0;
    padding-top:3rem;
    background-color: var(--color-dark);

    @media (min-width: 960px) {
        display: flex;
        position: static;
        flex-direction: row;
        padding-top: 0;
        gap:1rem;
        background-color: transparent;
    }
}

.menu-nav.visible {
    display: flex;
}

.menu_item {
    display: flex;
}

.menu_item-nav {
    flex-direction: column;

    @media (min-width: 960px) {
        flex-direction: row;
    }
}

.link-menu {

}
.link-menu.link-nav {
    font-size:1.4rem;
    padding: 2em;

    @media (min-width: 960px) {
        font-size: .8rem;
        padding:0;
    }
}
.menu_item:not(:first-of-type) .link-menu.link-nav {
    border-top:1px solid var(--color-bg);
    
    @media (min-width: 960px) {
        border-top:none;
    }
}

.header_content {

    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding: 6rem 0 10rem 0;
    height: 100dvh;
    z-index: 2;

    @media(min-width: 640px) {
        padding: 6rem 0 7.5rem 0;
    }
}

.header_background {
    position: absolute;
    inset: 0 0 0 0;
    background-image: url('../img/bxl_header.jpg');
    background-color:var(--color-header);
    background-size: cover;
    background-position: center;
    background-blend-mode: luminosity;
    opacity: .15;
}

.page {    
    min-height: var(--page-min-height);
    /* margin-top: var(--nav-height); */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.section {
    background-color:var(--color-bg);
    padding:6em 0;
}

.section-alt {
    background-color:var(--color-bg-alt);
}

.content {
    margin-left: auto;
    margin-right: auto;
    max-width: 1600px;

    @media (min-width:960px) {
        width: calc(100vw - 1rem);
    }
    @media (min-width:1120px) {
        width: calc(100vw - 3rem);
    }
    @media (min-width:1280px) {
        width: calc(100vw - 6rem);
    }
}

.logo { 
    width:6rem;
}

.logo svg {    
    fill:var(--color-logo);
}

.title-header.title-logo {
    font-size: .85rem;
    color:var(--color-logo-alt);
}

.subtitles {
    position:relative;
    font-size: .5rem;
    @media(min-width: 320px)  { font-size: .55rem; }
    @media(min-width: 480px)  { font-size: .6rem; }
    @media(min-width: 640px)  { font-size: .65rem; }
    @media(min-width: 800px)  { font-size: .7rem; }
    @media(min-width: 960px)  { font-size: .75rem; }    
    /* @media(min-width: 1120px) { font-size: .8rem; } */
}
.subtitles h2 {
    font-weight:500;
    margin:0;
    font-size:2em;
    text-align: right;
}
.subtitles h2:first-of-type {
    color:var(--color-logo);
}
.subtitles h2:last-of-type {
    width:100%;
    position:absolute;
    inset:0 0 auto 0;
    z-index: 1;
    transform: translateY(1.4em);
}
.subtitles h2 .big {
    font-weight: 200;
    font-size:2em;
    vertical-align: top;
    vertical-align: text-top;
    color:var(--color-subtitle-alt);
    margin:0 .15em;
}
.subtitles h2 .hidden {
    opacity: 0;
}

.title-section {
    font-family: var(--font-code);
    font-weight: 300;
    text-align: center;
    color:var(--color-title-section);
    font-size:1.2em;
    margin-bottom: 3em;
    padding:0 1rem;
}

.title-section-alt {
    color:var(--color-title-section-alt);
}

.columns {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap:3rem;

    @media (min-width:960px) {
        flex-direction: row;
        justify-content: center;
        gap:1rem;
    }
}

.button {
    font-size: .85em;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: .6em 1.2em .7em 1.2em;
    border-radius: .2em;
    text-decoration: none;
    transition: color .3s ease-in-out, background-color .3s ease-in-out;
}

.button, 
.button:link 
.button:visited,
a.button, 
a.button:link 
a.button:visited {
    background-color: var(--color-button);
    color:var(--color-dark);
}

.button:hover,
.button:active, 
.button:focus, 
.button.active,
a.button:hover,
a.button:active, 
a.button:focus, 
a.button.active {
    background-color: var(--color-button-active);
}

.button-contact, 
.button-contact:link 
.button-contact:visited,
a.button-contact, 
a.button-contact:link 
a.button-contact:visited {
    background-color: var(--color-action);
}

.button-contact:hover,
.button-contact:active, 
.button-contact:focus, 
.button-contact.active,
a.button-contact:hover,
a.button-contact:active, 
a.button-contact:focus, 
a.button-contact.active {
    background-color: var(--color-action-active);
}

.bigtext {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    gap:1.5em;
    margin:1em;
}

.development-text {
    margin: 0;
    flex-grow:1;
    flex-shrink:1;
    
    @media (min-width: 960px) {
        flex-grow:0;
        min-width:32em;
    }
}

.technologies-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    font-size: calc(.3em + .8vw);
    
    @media (min-width: 960px) {
        font-size: calc(.4em + (100vw - 960px) / 120);
    }
}
.technologies {
    display: flex;
    flex-wrap:wrap;
    justify-content: flex-start;
    align-items: stretch;
    list-style-type: none;
}

.technology {
    /* width: 20vw; */
    height: 2.1em;
    margin:.15em .6em;
    flex-grow: 0;
    flex-shrink: 0;
    text-align: center;
}

.technology img {
    max-width: none;
    /* max-width: 20vw; */
    height: 100%;
}

.technologies-xl .technology { height:4.8em; }
.technologies-l .technology { height:3.2em; }
.technologies-s .technology { height:1.3em; }
.technologies-xs .technology { height:.9em; }

.technologies-margin {
    margin-top:2em;
}

.formations {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    list-style-type: none;
    gap:2rem 4rem;
    margin:4.5rem 1rem;
    font-size: .95em;

    @media (min-width: 960px) {
        font-size: .8em;
    }
}

.formation {
    width: 80ch;
    padding-left: .3em;
    border-left: 1px solid var(--color-subtitle-alt);
}

.formation_title {
    font-family: var(--font-code);
    color: var(--color-title-small);
    font-weight: 200;
}

.formation_icon img {
    height: 1em;
}

.formation_description {
    font-size: .9em;
    color:var(--color-text-alt);
}

.formation_description b {
    color: var(--color-text);
}

.formation_description > * {
    margin-top: .3em;
}

.legend {
    display: flex;
    justify-content: space-evenly;
    font-size: .85em;
    line-height: 2.4em;
    margin: 4em 1em;
    flex-direction:column;

    @media (min-width:640px) {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

.legend > * {
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;
    
    @media (min-width:640px) {
        width: 50%;
    }
    
    @media (min-width:960px) {
        flex-grow: 0;
        width: auto;
    }
}

.color {
    display: inline-block;
    width: 2em;
    height: 2em;
    border-radius: 3em;
    border: 1px solid var(--color-text-alt);
    vertical-align: middle;
    box-shadow: 0 .2em .5em rgba(0,0,0,.3);
}

.color + * {
    margin-left:.3em;
}

.projects {
    list-style-type: none;
    display: grid;
    gap:.3em;
    margin:1em;
    grid-auto-rows: minmax(0, auto);
    grid-template-columns:
        [work1-start] 1fr 
        [work1-end work2-start] 1fr 
        [work2-end projects1-start] 1fr 
        [projects1-end year-start] 4em
        [year-end projects2-start] 1fr 
        [projects2-end projects3-start] 1fr 
        [projects3-end learning-start] 1fr
        [learning-end]
    ;
    
    @media (min-width: 1120px) {
        gap:.3em 1em;
        grid-auto-rows: minmax(6em, auto);
    }
}

.projects a {
    color:var(--color-action);
}

.year_row {
    color:var(--color-text-alt);
    padding:.85em .3em .55em .3em;
    border-top: 1px dotted;
    
    @media (min-width: 1120px) {

    }
}
.year {
    font-size: 1em;
    font-weight: 600;
    text-align: center;
    
    @media (min-width: 1120px) {
        font-size: 1.5em;
    }
}

.project {
    /* font-size: .7em;
    word-break: break-word;
    margin-top: .15em;
    border-radius: .3em;
    box-shadow: 0 .2em .5em rgba(0,0,0,.3);
    background: linear-gradient(0deg, rgba(0,0,0,.05), rgba(255,255,255,.05));
    background-color: var(--color-project-bg);
    overflow: hidden;
    opacity: 0; */
    /* transform-origin: center;
    transform: scale(1.005) translateY(-1em);
    transition: transform .15s ease-in-out, opacity .6s ease-in-out; */
    display: flex;
}

.project-visible {
    /* transform: scale(1) translateY(0); */
    /* opacity: 1; */
}

/* .project:hover,
.project:active,
.project:focus {
    transform: scale(1.05) translateY(0);
} */

.project_trigger {
    font-size: .7em;
    word-break: break-word;
    margin-top: .15em;
    border-radius: .3em;
    box-shadow: 0 .2em .5em rgba(0,0,0,.3);
    background: linear-gradient(0deg, rgba(0,0,0,.05), rgba(255,255,255,.05));
    background-color: var(--color-project-bg);
    overflow: hidden;
    opacity: 0;
    transform-origin: center;
    transform: scale(1.005) translateY(-1em);
    transition: transform .15s ease-in-out, opacity .6s ease-in-out;

    display: block;
    flex-grow: 1;
    width: 100%;
    
    @media (min-width: 1120px) {
        display: none;
    }
}

.project_wrapper {
    position: fixed;
    inset: calc(var(--nav-height) + 1rem) 1rem 1rem 1rem;
    display: none;
    font-size: 1.4em;
    margin-top: .15em;
    border-radius: .3em;
    box-shadow: 0 .2em .5em rgba(0,0,0,.3);
    background: linear-gradient(0deg, rgba(0,0,0,.05), rgba(255,255,255,.05));
    background-color: var(--color-project-bg);
    overflow-x: hidden;
    overflow-y: auto;
    opacity: 0;
    transform-origin: center;
    transform: scale(1.005) translateY(-1em);
    transition: transform .15s ease-in-out, opacity .6s ease-in-out;
    z-index: 10;
    
    @media (min-width: 1120px) {
        position: static;
        display: block;
        /* background-color: transparent; */
        /* border-radius: 0; */
        font-size: .7em;
    }
}

.project-visible .project_trigger,
.project-visible .project_wrapper {
    transform: scale(1) translateY(0);
    opacity: 1;
}


.project_toggle:checked ~ .project_wrapper {
    display: block;
}

.project_link {
    display: block;
    width: 100%;
    height: 100%;
    color:currentColor;
    text-decoration: none;
    cursor: default;
}

.project_header {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding:.45em;
    background-color: rgba(0,0,0,.3);
}

.project_dates {
    text-align: left;
}
.project_label {
    text-align: right;
}
.project_dates,
.project_label {
    flex-shrink: 1;
    flex-grow: 0;
    font-size: .85em;
    padding:.3em .6em;
    background-color: rgba(0,0,0,.3);
    color: var(--color-text-alt);
    border-radius:1em;
}

.project_title {
    font-family: var(--font-code);
    font-weight: 500;
    font-size: .9em;
    margin-top:1.8em;
    margin-bottom:.8em;
    width: 100%;
    flex-shrink: 0;
    flex-grow: 1;
}

.project_contract {
    font-size:.85em;
    padding:.1em 0em;
    color:var(--color-text-alt);
    width: 100%;
    flex-shrink: 0;
    flex-grow: 1;
}

.project_place {
    padding:.15em 0em;
    width: 100%;
    flex-shrink: 0;
    flex-grow: 1;
    color: var(--color-action);
}

.project_location {
    font-size:.85em;
    padding:.1em 0em;
    color:var(--color-text-alt);
    width: 100%;
    flex-shrink: 0;
    flex-grow: 1;
}

.project_description {
    display: block;
    font-size:.85em;
    padding:.6em .55em;
    color:currentColor;
    width: 100%;
    flex-shrink: 0;
    flex-grow: 1;
}

.project_description p + p {
    margin-top:.6em;
}

.footer {
    background-color: var(--color-dark);
    color: var(--color-text);
    padding: 3em 1em;
    font-size: .7em;
    text-align: center;
}