:root{
    /*__Couleurs__*/
    --prim-50:#faf6f2;
    --prim-100:#f4ece0;
    --prim-200:#e7d7c1;
    --prim-300:#d8bc99;
    --prim-400:#cea882;
    --prim-500:#bb8354;
    --prim-600:#A58162;
    --prim-700:#AC978C;
    --prim-800:#78695E;
    --prim-900:#4E4137;
    --prim-950:#14181B;

    --color-black:#0E1114;
    --color-font:#f4ece070;
    --color-gradient:linear-gradient(-90deg, var(--prim-400) 0%, var(--prim-600) 100%);

    /*__Fonts__*/
    --font:'DM Sans', sans-serif;
    --extraLight:100;
    --light:200;
    --regular:300;
    --medium:400;
    --semiBold:600;

    --letter-spacing-1:-0.25px;
    --letter-spacing-2:-0.5px;

    --text-xs:12px;
    --text-xs-lh:18px;
    --text-s:14px;
    --text-s-lh:21px;
    --text-m:16px;
    --text-m-lh:24px;
    --text-l:18px;
    --text-l-lh:27px;
    --text-xl:20px;
    --text-xl-lh:30px;
    --display-s:24px;
    --display-s-lh:30px;
    --display-m:32px;
    --display-m-lh:40px;
    --display-l:56px;
    --display-l-lh:68px;
    --display-xl:64px;
    --display-xl:72px;

    /*__Marges__*/
    --space-1:8px;
    --space-2:16px;
    --space-3:24px;
    --space-4:32px;
    --space-5:40px;
    --space-6:48px;
    --space-7:56px;
    --space-8:64px;
    --space-9:72px;
    --space-10:80px;
}
html{
    font-family: 'DM Sans', sans-serif;
}
main{
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 200,
    'GRAD' -25,
    'opsz' 20
}
a{
    text-decoration: none;
}
html{
    background-color: var(--prim-950);
}
h1{
    font-size: var(--display-s);
    font-weight: var(--semiBold);
    line-height: var(--display-s-lh);
    text-align: left;
    margin: 0 auto;
    background: linear-gradient(90deg, #F2DBCC, rgba(242,219,204,.6));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    margin-bottom:var(--space-6);
    max-width: 800px;
}
h1 span{
    color: var(--prim-100);
    opacity: .3;
}
h2{
    font-size: var(--display-s);
    font-weight: var(--semiBold);
    line-height: var(--display-s-lh);
    text-align: left;
    background: linear-gradient(90deg, #F2DBCC, rgba(242,219,204,.6));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    margin: 0 var(--space-2) 0 0;
}
h3{
    font-size: var(--text-xl);
    font-weight: var(--semiBold);
    line-height: var(--text-xl-lh);
    background: linear-gradient(90deg, #F2DBCC, rgba(242, 219, 204, .6));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}
.text-xl{
    font-size: var(--text-xl);
    line-height: var(--text-xl-lh);
    color: var(--prim-100);
    opacity: .5;
    font-weight: var(--semiBold);
}
.text-l{
    font-size: var(--text-l);
    line-height: var(--text-l-lh);
    color: var(--color-font);
    font-weight: var(--extraLight);
}
.text-m, .grid > article .text-m{
    font-size: var(--text-m);
    line-height: var(--text-m-lh);
    color: var(--color-font);
    font-weight: var(--extraLight);
}
.text-s{
    font-size: var(--text-s);
    line-height: var(--text-s-lh);
    font-weight: var(--extraLight);
    color: var(--color-font);
}
.title{
    display: flex;
    justify-content: left;
    align-items: center;
    margin-bottom: var(--space-2);
}
.subtitle{
    text-align: left;
    margin-bottom: var(--space-8);
}
.divider{
    display: flex;
    align-items: center;
    width: 20%;
}
.divider:not(.reverse){
    display:none;
}
.divider > .divider-stroke{
    width: 100%;
    max-width: 200px;
    height: 1px;
    background: var(--prim-900);
}
.divider > .divider-dot{
    width: 3px;
    height: 3px;
    background: var(--prim-900);
    border-radius: 2px;
    margin: 0 var(--space-1);
}
.divider.reverse > .divider-stroke{
    order:2;
}
a{
    font-size: var(--text-s);
    font-weight: var(--regular);
    color: var(--prim-100);
    opacity: 0.5;
    transition: all ease-in-out 0.2s;
}
a:hover{
    opacity: 1;
}

/*BUTTON*/
.button{
    display: flex;
    justify-content: center;
    align-items: center;
    padding:var(--space-2) var(--space-3);
    text-align: center;
    transition: all 0.2s ease-in-out;
    border-radius:35px;
    opacity: 1;
    width: 100%;
}
.button.first{
    background:var(--color-gradient);
}
.button.first.icon .material-symbols-outlined{
    color: var(--prim-900);
}
.button.second{
    background:linear-gradient(-90deg, #cea88210 0%, #A5816210 100%);
    position:relative;
    border: 0;
    inset: 0;
}
.button.second:after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(-20deg, #a5816250 30%, #f4ece080 50%, #a5816250 70%) 50% / calc(100% + 14px) calc(100% + 14px);
    border: 1px solid rgba(0, 0, 0, 0);
    mask: linear-gradient(hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0)), linear-gradient(hsl(0, 0%, 100%), hsl(0, 0%, 100%));
    border-radius: 35px;
    mask-clip: padding-box, border-box;
    mask-composite: intersect;
    transition: all 0.2s ease-in-out;
}
.button:hover{
    opacity: 0.6;
}
.button p{
    font-size: var(--text-s);
    color: var(--prim-900);
    font-weight: var(--regular);
    letter-spacing: var(--letter-spacing-1);
}
.button.icon .material-symbols-outlined{
    font-size: 30px;
    line-height: 0;
}
.button.second p, .button.icon .material-symbols-outlined{
    color: var(--prim-200);
}
#nav_part_two .button.second{
    margin-right: var(--space-1);
}
.button.icon > p{
    margin-right: var(--space-1);
}
.button-group{
    display: flex;
    flex-direction: column;
}
.button-group > .button.first{
    margin-bottom: var(--space-1);
}
.button.center{
    margin: 0 auto;
}
.link{
    display: flex;
    align-items: center;
}
.link > span{
    color: var(--prim-400);
}
/*BUTTON*/
/*GRID*/
.grid{
    display: grid;
    gap: var(--space-1);
}
.grid > article{
    background: linear-gradient(-90deg, #cea88210 0%, #A5816210 100%);
    position: relative;
    border-radius: 5px;
    border: 0;
    inset: 0;
    padding: var(--space-2);
}
.grid > article:after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(-20deg, #a5816250 30%, #f4ece080 50%, #a5816250 70%) 50% / calc(100% + 14px) calc(100% + 14px);
    border: 1px solid rgba(0, 0, 0, 0);
    mask: linear-gradient(hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0)), linear-gradient(hsl(0, 0%, 100%), hsl(0, 0%, 100%));
    border-radius: 5px;
    mask-clip: padding-box, border-box;
    mask-composite: intersect;
    transition: all 0.2s ease-in-out;
    z-index: -1;
}
.grid > article p{
    color: var(--color-font);
    font-size: var(--text-s);
    line-height: var(--text-s-lh);
    font-weight: var(--extraLight);
}
/*END GRID*/

/*___WRAPPER___*/

    #outline_top{
        width: calc(100% - 40px);
        height: 1px;
        background-color: var(--prim-900);
        top:20px;
        left:20px;
        position: fixed;
        z-index: 999;
    }
    #border_top{
        height: 20px;
        width: 100%;
        background-color: var(--prim-950);
        position: fixed;
        z-index: 999;
    }
    #outline_bottom{
        width: calc(100% - 40px);
        height: 1px;
        background-color: var(--prim-900);
        bottom:20px;
        left:20px;
        position: fixed;
        z-index: 999;
    }
    #border_bottom{
        height:20px;
        width: 100%;
        background-color: var(--prim-950);
        position: fixed;
        bottom: 0;
        z-index: 999;
    }
    #outline_left{
        width: 1px;
        height: calc(100% - 40px);
        background-color: var(--prim-900);
        top:20px;
        left:20px;
        position: fixed;
        z-index: 999;
    }
    #outline_right{
        width: 1px;
        height: calc(100% - 40px);
        background-color: var(--prim-900);
        right:20px;
        top:20px;
        position: fixed;
        z-index: 999;
    }

    /*___NAV___*/
        header{
            position: absolute;
            width: 100%;
            z-index: 998;
        }
        nav{
            width: 100%;
            display: flex;
            position: fixed;
            background-color: var(--prim-950);
            height: 0vh;
        }
        #logo{
            margin:20px 0 0 20px;
            width: 64px;
            height: 64px;
            border: solid 1px var(--prim-900);
            padding:5px;
            -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
            z-index: 999;
        }
        #logo figure{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
        }
        #logo figure img{
            width:50%;
        }
        #mobile_nav{
            height: 54px;
            width: calc(100% - 104px);
            margin-top: 20px;
            display: flex;
            flex-direction: row;
            justify-content: right;
            align-items: center;
            border-bottom: solid 1px var(--prim-900);
            -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
        }
        #nav_part_one, #nav_part_two{
            display: none;
            flex-direction: column;
            position: absolute;
            left: 50%;
            opacity: 0;
            width: calc(100% - 80px);
        }
        #nav_part_one > ul, #nav_part_two > ul{
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #nav_part_one > ul{
            flex-direction: column;
        }
        #nav_part_one{
            top: 38vh;
            transform: translate(-50%, -50%);
        }
        #nav_part_two{
            transform: translateX(-50%);
            bottom: 27vh;
            align-items: center;
        }
        #nav_part_two .button.second{
            margin-right: 0;
            margin-bottom: var(--space-1);
        }
        #nav_part_one ul li{
            width: 100%;
            display: flex;
            justify-content: center;
        }
        #nav_part_one ul li a{
            text-transform: uppercase;
            font-size: var(--font-size-h2);
            padding:25px 0;
            font-weight: var(--bold);
        }

        #nav_part_two ul{
            margin-top: 130px;
        }
        #nav_part_two ul li a{
            font-size: 35px;
            color: var(--prim-900);
        }
        #nav_part_two ul li a:first-child{
            margin-right: var(--space-2);
        }
        #burger{
            display: flex;
            align-items: center;
        }
        #burger p{
            font-family: var(--font);
            color: var(--prim-900);
            font-size: 14px;
            text-transform: uppercase;
        }
        #burger_button{
            width: 74px;
            height: 54px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: end;
            padding-right: var(--space-2);
        }
        #burger_button div:first-child{
            width: 25px;
            height: 1px;
            background-color: var(--prim-100);
            margin-bottom:6px ;
        }
        #burger_button div:last-child{
            width: 35px;
            height: 1px;
            background-color: var(--prim-100);
        }
    /*___END_NAV___*/

/*___END_WRAPPER___*/

/*___FOOTER___*/
footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 20px 20px 20px;
    background-color: var(--color-black);
    padding: var(--space-5) 0;
}
#footer_logo{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#footer_logo figure{
    width: 30px;
    margin-bottom: var(--space-2);
}
#footer_logo p{
    font-family: var(--font);
    text-transform: uppercase;
    font-weight: var(--semiBold);
    letter-spacing: 2px;
    color: var(--prim-400);
    font-size: var(--text-l);
    margin-bottom: var(--space-6);
}
footer > div > ul{
    display: flex;
    flex-direction: column;
    align-items: center;
}
footer > div > ul > li{
    margin-bottom: var(--space-2);
}


/*___END_FOOTER___*/


/*___PAGE_HOME___*/
    /*___HOME___*/
        #hero-section{
            position: relative;
            display: flex;
            flex-direction: column;
            height: 100dvh;
            justify-content: center;
        }
        #hero-section .halo, #about-hero .halo{
            width: 100%;
            background: radial-gradient(#CEA88290 -20%, #14181B30 70%, transparent 100%);
            height: 60vh;
            position: absolute;
            top: 0;
            transform: translateY(-50%);
            filter: blur(50px);
        }
        #hero-section img{
            width: 70px;
            border-radius: 50px;
            margin-bottom: var(--space-4);
        }
        .label{
            width: fit-content;
            display: flex;
            align-items: center;
            position: relative;
            background: linear-gradient(-90deg, #cea88210 0%, #A5816210 100%);
            border: 0;
            inset: 0;
            padding: var(--space-1) var(--space-2);
            border-radius: 20px;
            margin-bottom: var(--space-3);
        }
        .label:after{
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(-20deg, #a5816210 30%, #f4ece040 50%, #a5816210 70%) 50% / calc(100% + 14px) calc(100% + 14px);
            border: 1px solid rgba(0, 0, 0, 0);
            mask: linear-gradient(hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0)), linear-gradient(hsl(0, 0%, 100%), hsl(0, 0%, 100%));
            border-radius: 35px;
            mask-clip: padding-box, border-box;
            mask-composite: intersect;
        }
        .label p{
            font-size: var(--text-xs);
            color: var(--prim-200);
            font-weight: var(--light);
        }
        .label .label-glow{
            width: fit-content;
            padding: 6px;
            background-color: rgb(62 189 42 / 6%);
            border-radius: 25px;
            box-shadow: 0 0 10px rgb(62 189 42 / 8%);
            margin-right: var(--space-1);
            animation: glow 1s ease-in-out infinite alternate;
        }
        @keyframes glow{
            0%{
                background-color: rgb(62 189 42 / 0%);
            }
            100%{
                background-color: rgb(62 189 42 / 6%);
            }
        }
        .label .label-glow > div{
            height: 8px;
            width: 8px;
            background-color: #3EBD2A;
            border-radius: 5px;
            box-shadow: 0 0 8px #3EBD2A;
        }

        /*SKILLS*/
        #skills{
            position: absolute;
            width: fit-content;
            left: 0;
            z-index: -1;
            mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 0) 95%);
            mask-size: 100vw;
        }
        #skills .slide-track{
            display: flex;
        }
        #skills .label{
            margin:0 var(--space-1) 0 0;
            width: max-content;
            opacity: .5;
        }
        #skills > .skill-slider > .slide-track:first-child{
            margin-bottom: var(--space-1);
        }
        /*END_SKILLS*/

        /*ABOUT*/
        #home-about{
            margin-top: var(--space-10);
            padding-top: var(--space-10);
            margin-bottom: var(--space-10);
            padding-bottom: var(--space-10);
        }
        #home-about > div{
            max-width: 1000px;
            margin: 0 auto;
        }
        #home-about .text-xl{
            margin-bottom: var(--space-4);
        }
        #home-about .text-xl:last-child{
            margin-bottom: var(--space-10);
        }
        .quote{
            position: relative;
        }
        .quote > p{
            font-style: italic;
            font-weight: var(--extraLight);
        }
        .quote > img{
            position:absolute;
            width: 50%;
            right: 0;
            top: 110px;
        }
        /*END_ABOUT*/

        /*SELECTED PROJECTS*/
        #selected-projects{
            margin-bottom: var(--space-10);
            padding-bottom: var(--space-10);
        }
        .projects{
            margin-bottom: var(--space-6);
        }
        .projects > article > a{
            display: block;
            opacity: 1;
        }
        .projects > article > a > div{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--space-1) var(--space-1) 0 var(--space-1);
            margin-bottom: var(--space-1);
        }
        .projects > article > a > p{
            padding: 0 var(--space-1);
            margin-bottom: var(--space-4);
        }
        .projects > article > a > img{
            width: 100%;
            border-radius: 2px;
        }
        /*END SELECTED PROJECTS*/

/*___END_PAGE_HOME___*/

/*___PAGE_WORKS___*/
    /*___WORKS___*/
        #main-works{
            height: 100dvh;
            padding: 20px;
            display: flex;
            flex-direction: column;
        }
        #works_desk{
            display: none;
        }
        #works{
            height: calc(91dvh - 45px);
            margin-bottom: 0;
        }
        #works > article > a{
            opacity: 1;
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        #works article{
            display: none;
            opacity: 0;
        }
        #works .work_active{
            display: block;
            opacity: 1;
            height: 100%;
        }
        #works .work_description{
            border: solid var(--prim-900);
            border-width: 0 1px 1px 1px;
            padding: var(--space-2);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        #works .work_description div:first-child{
            margin-bottom: var(--space-3);
        }
    /*___END_WORKS___*/
    /*___WORK_CONTROL___*/
        #work_control{
            display: flex;
            margin-bottom: 0;
            height: 9dvh;
        }
        #work_left, #work_right{
            display: flex;
            align-items: center;
            width: 20%;
        }
        #work_right span, #work_left span{
            color: var(--prim-900);
        }
        #work_left span{
            margin-right: 5px;
        }
        #work_right span{
            margin-left: 5px;
        }
        #work_right{
            justify-content: flex-end;
        }
        #work_left p, #work_right p{
            color: var(--prim-900);
        }
        #work_center{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 60%;
            flex-direction: column;
        }
        #work_center div p{
            font-size: 12px;
            font-weight: var(--bold);
            color: var(--prim-900);
            margin-bottom: 5px;
        }
        #work_center div p span{
            color: var(--color-font);
        }
        #work_center #dots{
            display: flex;
            width: 100%;
            justify-content: center;
            align-items: center;
        }
        #work_center #dots div{

            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: var(--prim-400);
            margin: 0 3px;
            opacity: 1;
        }
        #work_center #dots div:nth-child(1),#work_center #dots div:nth-child(9){
            width: 0;
            height: 0;
            opacity: 0;
        }
        #work_center #dots div:nth-child(2),#work_center #dots div:nth-child(8){
            width: 2px;
            height: 2px;
            opacity: 0.2;
        }
        #work_center #dots div:nth-child(3),#work_center #dots div:nth-child(7){
            width: 5px;
            height: 5px;
            opacity: 0.5;
        }
        #work_center #dots div:nth-child(4),#work_center #dots div:nth-child(6){
            width: 8px;
            height: 8px;
            opacity: 0.8;
        }
        .work_description h2{
            margin-bottom: 10px;
        }
    /*___END_WORK_CONTROL___*/
/*___END_PAGE_WORKS___*/

/*___PAGE_ABOUT___*/
   #about-hero{
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: var(--space-10) 0;
    position: relative;
   }
   #about-hero img{
    width: 100px;
    border-radius: 50px;
    margin-bottom: var(--space-4);
   }
   #about-hero h1{
    margin-bottom: var(--space-2);
   }
   #about-hero .button-group{
    margin-top: var(--space-4);
   }
   #whatido #skills{
    margin: var(--space-6) 0;
   }
   #whatido #skills + div{
    margin-top: var(--space-10);
    padding-top: var(--space-10);
   }
   #whatido #skills + div > .text-xl{
    margin-bottom: var(--space-4);
   }
   #whatido{
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-8);
   }
   #whatido > .title, #work-experience > .title, #qualifications > .title{
    margin-bottom: var(--space-4);
   }
   #work-experience article h3 > span{
    color: var(--prim-100);
    opacity: .3;
    font-size: var(--text-m);
    font-weight: var(--regular);
   }
   #work-experience article ul li {
    list-style: disc;
    color: var(--color-font);
    font-size: var(--text-s);
    line-height: var(--text-s-lh);
    font-weight: var(--extraLight);
    margin-left: var(--space-2);
    margin-bottom: var(--space-1);
   }
   #work-experience .grid .text-m{
    font-weight: var(--regular);
    margin: var(--space-2) 0;
   }
   #work-experience .grid article > div:first-child{
    display: flex;
    align-items: center;
    justify-content:space-between;
   }
   #work-experience .grid article > div:last-child{
    display: none;
   }
   #work-experience .grid article.active > div:last-child{
    display: block;
   }
   #work-experience .material-symbols-outlined{
    color: var(--prim-800);
    transition: all .3s ease-in-out;
   }
   #work-experience .active .material-symbols-outlined{
    transform: rotate(180deg);
   }
   
   #qualifications{
    padding: var(--space-8) 0;
    margin: var(--space-8) 0;
   }
   #qualifications .ver-divider{
    width: 1px;
    height: var(--space-6);
    background: var(--prim-900);
    margin: var(--space-2) 0;
   }
/*___END_PAGE_ABOUT___*/

/*___PAGE_PROJECT___*/
        /*___PROJECT_PRES___*/
            .project-main{
                padding: 0;
                max-width: calc(100% - 40px);
            }
            .project-main > section > *:not(div, a){
                padding: 0 var(--space-2);
            }
            .project_pres .project_head{
                width: 100%;
                height: 30vh;
                z-index: -1;
            }
            .project_pres h1{
                margin-top: var(--space-2);
                margin-bottom: var(--space-1);
            }
            .project_pres .big_text{
                margin-bottom: var(--space-1);
            }
            .project_pres .skills-category{
                display: flex;
                margin: var(--space-2) 0 var(--space-1) 0 ;
                flex-wrap: wrap;
                padding: 0 var(--space-2);
                gap: var(--space-1);
                margin-bottom: var(--space-4);
            }
            .project_pres > a{
                margin-left: var(--space-2);
            }
            .project_pres > a > span{
                margin-right: var(--space-1);
            }
            .skills-category .label{
                margin-bottom: 0;
            }
            .project_pres > p{
                margin-bottom: var(--space-2);
            }
            .project_pres{
                margin-bottom: var(--space-4);
            }

        /*___END_PROJECT_PRES___*/
        /*___PROJECT_IMG___*/
            .project_img figure img{
                width: 100%;
            }
            .project_img figure, .responsiv_vid{
                margin-bottom: var(--space-1);
            }
            .project_img figure:last-child{
                margin-bottom: 0;
            }
            .project_img figure + .img_desc{
                text-align: center;
                width: 100%;
                font-style: italic;
                color: var(--color-font);
                font-weight: var(--extraLight);
                margin-top: var(--space-3);
            }
            .responsiv_vid{ 
                overflow:hidden; 
                padding-bottom:56.25%; 
                position:relative; 
                height:0;
                width: 100%;
            }
            .responsiv_vid iframe {
            left:0; 
            top:0; 
            height:100%;
            width:100%;
            position:absolute;
            }
            
        /*___END_PROJECT_IMG___*/
        /*___NEXT_PROJECT___*/
            .next_project{
                padding: var(--space-4) var(--space-2);
            }
            .next_project a{
                display: flex;
                flex-direction: column;
                align-items: center;
                background-color: var(--color-black);
                border: solid 1px var(--prim-900);
                padding: 50px 0;
            }
            .next_project a > div{
                display: flex;
                align-items: center;
                margin-bottom: var(--space-1);
            }
            .next_project a > div p{
                margin-right: var(--space-1);
            }
            .next_project a > div .angle_right{
                width: 7px;
                height: 7px;
                border-bottom: solid 1px var(--color-font);
                border-right: solid 1px var(--color-font);
            }
        /*___END_NEXT_PROJECT___*/
/*___END_PAGE_PROJECT___*/


/*___DEBUT_RESPONSIVE___*/

@media screen and (min-width:600px){
    /*___NAV___*/
        #nav_part_one ul li a{
            font-size: var(--font-size-h1);
            padding: var(--space-5) 0;
        }
    /*___END_NAV___*/

}
@media screen and (min-width:1000px){
    :root{
        --text-xs:14px;
        --text-xs-lh:21px;
        --text-s:16px;
        --text-s-lh:24px;
        --text-m:18px;
        --text-m-lh:27px;
        --text-l:24px;
        --text-l-lh:36px;
        --text-xl:32px;
        --text-xl-lh:42px;
        --display-s:40px;
        --display-s-lh:50px;
        --display-m:48px;
        --display-m-lh:60px;
        --display-l:56px;
        --display-l-lh:68px;
        --display-xl:64px;
        --display-xl:72px;
    }
    main, .project-main{
        width: 95%;
        max-width:1080px;
        margin: 0 auto;
        position: inherit;
    }
    .divider:not(.reverse){
        display:flex;
    }
    h1,h2,p,.subtitle{
        text-align: center;
    }
    h1{
        margin-bottom: var(--space-10);
        font-size: var(--display-m);
        line-height: var(--display-m-lh);
    }
    h2{
        margin: 0 var(--space-2);
    }
    .button-group{
        flex-direction: row;
        justify-content: center;
    }
    .button{
        width: fit-content;
    }
    .button-group .button.first{
        margin-bottom: 0;
        margin-right: var(--space-1);
    }
    #hero-section .label, #hero-section img, .button-group{
        margin: 0 auto;
    }
    #hero-section img{
        width: 96px;
        margin-bottom: var(--space-6);
    }
    #hero-section .label{
        margin-bottom: var(--space-3);
    }
    .quote > img{
        width: 30%;
        right: 0;
        top: 80px;
    }
    .title{
        justify-content: center;
    }
    .projects{
        grid-template-columns: 1fr 1fr;
    }
    #work-experience .grid article{
        cursor: pointer;
    }
    #about-hero{
        margin: 0;
    }
    #about-hero img{
        margin: 0 auto var(--space-4) auto;
    }
    #whatido .grid > article{
        padding: var(--space-3);
    }
    #qualifications-inside h3{
        text-align: center;
    }
    #qualifications-inside .ver-divider{
        margin: var(--space-4) auto;
    }
    #whatido > .title, #work-experience > .title, #qualifications > .title{
        margin-bottom: var(--space-8);
    }
    footer > div > ul{
        flex-direction: inherit;
        align-items: inherit;
    }
    footer > div > ul > li{
        margin-right: var(--space-3);
    }
    #footer_logo p{
        margin-bottom: 0;
    }
    /*WORKS*/
    #works_desk{
        display: block;
        padding: var(--space-10) 0 var(--space-2) 0;
        margin-top: var(--space-10);
    }
    #work_control{
        display: none;
    }
    #works{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: var(--space-1);
    }
    #works h2{
        font-size: var(--text-xl);
        line-height: var(--text-xl-lh);
    }
    #works > article{
        display: block;
        opacity: 1;
    }
    #works > article{
        background: linear-gradient(-90deg, #cea88210 0%, #A5816210 100%);
        position: relative;
        border-radius: 5px;
        border: 0;
        inset: 0;
        padding: var(--space-2);
    }
    #works > article:after{
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(-20deg, #a5816250 30%, #f4ece080 50%, #a5816250 70%) 50% / calc(100% + 14px) calc(100% + 14px);
        border: 1px solid rgba(0, 0, 0, 0);
        mask: linear-gradient(hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0)), linear-gradient(hsl(0, 0%, 100%), hsl(0, 0%, 100%));
        border-radius: 5px;
        mask-clip: padding-box, border-box;
        mask-composite: intersect;
        transition: all 0.2s ease-in-out;
        z-index: -1;
    }
    #works_desk #filter ul{
        display: flex;
        justify-content: center;
    }
    #filter .label{
        opacity: .5;
        cursor: pointer;
    }
    #filter .label.active{
        opacity: 1;
    }
    #filter ul{
        gap: var(--space-1);
    }
    .grid > article p{
        text-align: left;
    }
    #main-works, #works{
        height: 100%;
    }
    #works{
        padding-bottom: var(--space-8);
    }
    #works .work_description{
        border: none;
        flex-grow: 2;
    }
    .work_cover{
        height: 220px;
        border-radius: 4px;
    }
    .work_description h2, .work_description .text-m{
        text-align: left;
        margin-left: 0;
    }
    .project_pres .skills-category{
        justify-content: center;
    }
    .project_desc{
        max-width: 670px;
        margin: 0 auto var(--space-2) auto;
    }
    .project_pres > a.link{
        justify-content: center;
    }
    /*END_WORKS*/

    /*GRID*/
    .grid._2{
        grid-template-columns: 1fr 1fr;
    }
    .grid._3{
        grid-template-columns: 1fr 1fr 1fr;
    }
    #works > article{
        background: linear-gradient(-90deg, #cea88210 0%, #A5816210 100%);
        position: relative;
        border-radius: 5px;
        border: 0;
        inset: 0;
        padding: var(--space-2);
    }
    /*END GRID*/
    /*___NAV___*/
        header{
            position: fixed;
        }
        nav{
            position: initial;
            height: 60px;
            margin: 20px 20px 0 20px;
            width: initial;
            background-color: inherit;
        }
        #mobile_nav{
            display: none;
        }
        #nav_part_one, #nav_part_two{
            display: flex;
            flex-direction: row;
            position: inherit;
            left: inherit;
            opacity: 1;
            width: inherit;
            transform: none;
            top: inherit;
            bottom: inherit;
            width: 50%;
            border-bottom: solid 1px var(--prim-900);
            -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
            background-color: #14181B50;
        }
        #nav_part_one{
            order: 1;
            padding-left: 40px;
        }
        #logo{
            order: 2;
            margin: 0;
            width: 70px;
            height: 70px;
            padding: 10px;
            background-color: #14181B50;
        }
        #nav_part_two{
            order: 3;
            justify-content: flex-end;
            padding-right: 40px;
            align-items: center;
        }
        #nav_part_two .button.second{
            margin-right: var(--space-1);
            margin-bottom: 0;
        }
        #nav_part_one ul{
            flex-direction: row;
        }
        #nav_part_one ul li{
            width: inherit;
            height: 100%;
            align-items: center;
            margin-right: var(--space-5);
        }
        #nav_part_one ul li a{
            font-size: var(--text-s);
            font-weight: var(--regular);
            color: var(--prim-100);
            padding: 0;
            opacity: 0.5;
            transition: all ease-in-out 0.2s;
            text-transform: none;
        }
        #nav_part_one ul li .active{
            opacity: 1;
        }
        #nav_part_one ul li a:hover{
            opacity: 1;
        }
        #nav_part_two ul{
            margin-top: 0;
        }
        #nav_part_two ul li a{
            font-size: var(--font-size-h2);
        }
        #nav_part_two ul li a:first-child {
            margin-right: 0;
            margin-left: var(--space-2);
        }
        #nav_part_two .button_first{
            margin-right: var(--space-2);
        }
        #nav_part_two .vert_divider{
            height: 40px;
            display: block;
            margin: 0;
        }
    /*___END_NAV___*/
    /*___FOOTER___*/
        footer{
            padding: var(--space-5) var(--space-5);
        }
        footer, #footer_logo{
            flex-direction: row;
            justify-content: space-between;
        }
        #footer_logo figure{
            width: 30px;
            margin-bottom: 0;
            margin-right: var(--space-2);
        }
        footer > .divider{
            display: none;
        }
        footer .divider {
            width: 1px;
            height: 60px;
            margin: 0 var(--space-4);
        }
        footer > div:last-child{
            width: initial;
            flex-direction: row-reverse;
        }
        footer > div:last-child > div:last-child ul li a{
            font-size: var(--font-size-h2);
        }
        footer > div:last-child > div:first-child{
            align-items: flex-start;
        }
        footer > div:last-child > div div i{
            font-size: var(--font-size-big-basic);
        }
    /*___END_FOOTER___*/
}