:root {

    --primary: #f2e5d5;

    --secondary: #c9b8a7;

    --text-color: #1b1813;

    --selection: #b55bff;

}



@font-face {

    font-family: 'Nevanta';

    src: "assets/NevantaExtraBold-9MdV5.otf";

}



@font-face {

    font-family: 'Numbers';

    src: "assets/MomcakeThin-9Y6aZ.otf";

}



html {

    scroll-padding-top: 80px;

    scroll-behavior: smooth;

    scrollbar-width: none;

    overflow-x: hidden;

    -webkit-tap-highlight-color : rgba(0,0,0,0);

}



body {

    display: flex;

    flex-direction: column;

    background-color: var(--primary);

    font-family: 'Nevanta', sans-serif;

    font-size: 1vw;

    padding: 20px;

    margin: 0;

    gap: 10vh;

    align-items: center;

    justify-content: center;

    z-index: 1;

}



.dark-mode {

    --primary: #45362c;

    --secondary: #80735e;

    --text-color: antiquewhite;

}



/* =====================

   HEADER & NAVIGATION

   ===================== */



header {

    position: sticky;

    width: 100%;

    height: fit-content;

    top: 0;

    background-color: var(--secondary);

    border-radius: 10px;

    text-align: center;

    z-index: 100;

}



.menu {

    display: grid;

    grid-template-columns: 1fr;

    align-items: center;

    justify-content: space-between;

    height: fit-content;

    padding: 0 10px;

    border-radius: 10px;

    background-color: var(--secondary);

    box-shadow: 2px 2px 0px 1px var(--text-color);

    z-index: 100;

    transition: all 0.5s;

}



.pc-menu {

    display: flex;

    width: 100%;

    align-items: center;

    height: fit-content;

    justify-content: space-between;

    transition: all 0.5s;

}



/* Menu burger mobile - dropdown */

.mobile-menu {

    display: flex;

    width: 100%;

    height: fit-content;

    max-height: 5px;

    overflow: hidden;

    justify-content: center;

    align-items: center;

    opacity: 0;

    visibility: hidden;

    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out;

    padding: 0;

    transition: 0.2s;

}



.mobile-menu.open {

    max-height: 300px;

    opacity: 1;

    visibility: visible;

    padding: 10px 0;

}



.mobile-menu ul {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 10px;

    width: 100%;

    list-style: none;

    margin: 0;

    padding: 0;

}



.mobile-menu ul li a {

    display: block;

    text-decoration: none;

    color: var(--text-color);

    font-size: 1.3rem;

    padding: 8px 20px;

    border-radius: 5px;

    transition: 0.2s;

    cursor: pointer;

}



.mobile-menu ul li a:hover {

    background-color: var(--primary);

    color: var(--selection);

}



.menu .logo {

    width: 8vh;

}



.menu ul {

    display: flex;

    gap: 20px;

    list-style: none;

    margin: 0;

    padding: 0;

    flex: 1;

    justify-content: center;

}



.theme-toggle {

    position: static;

    display: flex;

    align-items: center;

    background-color: transparent;

}



.logo img {

    width: 100%;

    height: auto;

}



.menu a {

    text-decoration: none;

    color: var(--text-color);

    border-radius: 5px;

    font-size: 1.1rem;

    padding: 5px 10px;

    transition: 0.2s;

    cursor: pointer;

}



.menu a:hover:not(.logo) {

    background-color: var(--primary);

    color: var(--selection);

    transition: all 0.2s ease;

}



.menu ul li {

    display: inline-block;

    width: fit-content;

}



/* =====================

   TOGGLE THEME

   ===================== */



.toggleWrapper {

    display: flex;

    position: relative;

    padding: 5px;

    transform: none;

}



.toggleWrapper .input {

    display: none;

    position: absolute;

}



.toggle {

    cursor: pointer;

    display: inline-block;

    position: relative;

    width: 90px;

    height: 50px;

    background-color: #83d8ff;

    align-content: center;

    justify-content: center;

    border-radius: 84px;

    transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);

}



.toggle__handler {

    display: inline-block;

    z-index: 1;

    width: 47%;

    aspect-ratio: 1/1;

    background-color: #ffcf96;

    border-radius: 50px;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);

    transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

    position: absolute;

    left: 3px;

    transform: translateY(-50%) rotate(-45deg);

}



.toggle__handler .crater {

    position: absolute;

    background-color: #e8cda5;

    opacity: 0;

    transition: opacity 200ms ease-in-out;

    border-radius: 100%;

}



.toggle__handler .crater--1 {

    top: 18px;

    left: 10px;

    width: 4px;

    height: 4px;

}



.toggle__handler .crater--2 {

    top: 28px;

    left: 22px;

    width: 6px;

    height: 6px;

}



.toggle__handler .crater--3 {

    top: 10px;

    left: 25px;

    width: 8px;

    height: 8px;

}



.star {

    position: absolute;

    background-color: #fff;

    transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);

    border-radius: 50%;

}



.star--1 {

    top: 10px;

    left: 35px;

    z-index: 0;

    width: 30px;

    height: 3px;

}



.star--2 {

    top: 18px;

    left: 28px;

    z-index: 1;

    width: 30px;

    height: 3px;

}



.star--3 {

    top: 27px;

    left: 40px;

    z-index: 0;

    width: 30px;

    height: 3px;

}



.star--4,

.star--5,

.star--6 {

    opacity: 0;

    transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);

}



.star--4 {

    top: 16px;

    left: 11px;

    z-index: 0;

    width: 2px;

    height: 2px;

    transform: translate3d(3px, 0, 0);

}



.star--5 {

    top: 32px;

    left: 17px;

    z-index: 0;

    width: 3px;

    height: 3px;

    transform: translate3d(3px, 0, 0);

}



.star--6 {

    top: 36px;

    left: 28px;

    z-index: 0;

    width: 2px;

    height: 2px;

    transform: translate3d(3px, 0, 0);

}



.input:checked+.toggle {

    background-color: #749dd6;

}



.input:checked+.toggle .toggle__handler {

    background-color: #ffe5b5;

    left: calc(50%);

    transform: translateY(-50%) rotate(0);

}



.input:checked+.toggle .toggle__handler .crater {

    opacity: 1;

}



.input:checked+.toggle .star--1 {

    width: 2px;

    height: 2px;

}



.input:checked+.toggle .star--2 {

    width: 4px;

    height: 4px;

    transform: translate3d(-5px, 0, 0);

}



.input:checked+.toggle .star--3 {

    width: 2px;

    height: 2px;

    transform: translate3d(-7px, 0, 0);

}



.input:checked+.toggle .star--4,

.input:checked+.toggle .star--5,

.input:checked+.toggle .star--6 {

    opacity: 1;

    transform: translate3d(0, 0, 0);

}



.input:checked+.toggle .star--4 {

    transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);

}



.input:checked+.toggle .star--5 {

    transition: all 300ms 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);

}



.input:checked+.toggle .star--6 {

    transition: all 300ms 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95);

}



.theme-toggle {

    transform: scale(1);

    transition: 0.2s ease-out;

}



.theme-toggle:hover {

    transform: scale(1.05);

    transition: 0.2s ease-out;

}



.burger {

    display: none;

    position: relative;

    right: 0;

    scale: 1.5;



    .hamburger {

        cursor: pointer;

    }



    .hamburger input {

        display: none;

    }



    .hamburger svg {

        height: 24px;

        transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);

    }



    .line {

        fill: none;

        stroke: var(--text-color);

        stroke-linecap: round;

        stroke-linejoin: round;

        stroke-width: 3;

        transition:

            stroke-dasharray 400ms cubic-bezier(0.4, 0, 0.2, 1),

            stroke-dashoffset 400ms cubic-bezier(0.4, 0, 0.2, 1);

    }



    .line-top-bottom {

        stroke-dasharray: 12 63;

    }



    .hamburger input:checked+svg {

        transform: rotate(-45deg);

    }



    .hamburger input:checked+svg .line-top-bottom {

        stroke-dasharray: 20 300;

        stroke-dashoffset: -32.42;

    }

}



form select {

    padding: 5px;

    border-radius: 5px;

    border: none;

    background-color: var(--primary);

    color: var(--text-color);

    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s ease;

    scale: 1.2;

}



/* =====================

   SECTIONS

   ===================== */



section {

    width: 98%;

    height: max-content;

    padding: 20px;

    text-align: center;

    background-color: var(--secondary);

    color: var(--text-color);

    font-family: 'Nevanta', 'Arial', sans-serif;

    border-radius: 10px;

    box-shadow: 2px 2px 0px 1px var(--text-color);

    scroll-margin-top: 5vh;

    overflow: visible;

}



section h1 {

    text-align: start;

    margin-top: 0;

    margin-right: 50%;

    font-size: clamp(1.5rem, 3vw, 3rem);

}



/* =====================

   SECTION ABOUT

   ===================== */



#about {

    display: grid;

    height: fit-content;

    padding: 0;

    grid-template-columns: 60% 40%;

    grid-template-rows: 1fr;

    position: relative;

    align-items: stretch;

    /* ← était "center" */

    justify-content: space-between;

    gap: 20px;

    overflow: hidden;

}



.intro {

    display: flex;

    width: 100%;

    padding: 50px;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    font-size: clamp(1rem, 2vw, 2rem);

    box-sizing: border-box;

}



.intro p {

    font-family: cursive;

    display: block;

    width: 100%;

    text-align: justify;

}



#about .img {

    display: block;

    width: 100%;

    aspect-ratio: 1/1;

    background-image: url("assets/profile.png");

    background-size: cover;

    background-repeat: no-repeat;

    background-position: top;

    border-radius: 10px;

    transition: all 0.2s ease;

    z-index: 1;

    filter: grayscale(0.7);

    opacity: 0.3;

    min-height: 300px;

    overflow: hidden;

}



#about .img img{

    opacity: 1;

    visibility: hidden;

}



::selection {

    color: var(--selection);

}



/* =====================

   SECTION PROJECTS

   ===================== */



#projects {

    padding: 0;

    gap: 50px;

    overflow-x: hidden;

    align-items: center;

    justify-content: center;

}



#projects h1 {

    position: absolute;

    font-size: clamp(1.5rem, 3em, 5rem);

    margin: 2% 0 0 5%;

}



.carousel {

    position: relative;

    overflow: hidden;

    width: 100%;

    padding: 60px 100%;

    scale: 0.7;

    font-size: clamp(0.8rem, 1.2vw, 1.5rem);

}



.carousel-track {

    display: flex;

    gap: 40px;

    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);

    will-change: transform;

}



#projects .table {

    display: grid;

    width: 100%;

    grid-template-columns: 1fr 3fr 1fr;

    align-items: center;

    justify-items: center;

}



#projects .arrow {

    display: block;

    content: url('assets/arrow.svg');

    scale: 2 2;

    border-radius: 5px;

    cursor: pointer;

    transition: all 0.2s ease;

    z-index: 3;

}



#projects .arrow:hover {

    scale: 2.2 2.2;

}



#left_arrow {

    opacity: 0;

    cursor: default;

    transform: scaleX(-1);

}



.carousel-item {

    display: flex;

    flex-direction: column;

    width: 80%;

    aspect-ratio: 7/3;

    background-image: linear-gradient(45deg, rgba(0, 145, 255, 1) 0%, rgba(163, 92, 250, 1) 50%, rgba(255, 143, 249, 1) 100%);

    background-size: cover;

    background-position: center;

    box-shadow: 5px 5px 0px rgb(255, 255, 255);

    text-decoration: none;

    color: #1b1813;

    border-radius: 10px;

    position: relative;

    text-align: center;

    justify-content: end;

    transition: all 0.2s ease;

    overflow: hidden;

    min-width: 100%;

    opacity: 1;

    transform: scale(0.65);

    transition:

        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),

        opacity 0.4s ease,

        box-shadow 0.2s ease;

    z-index: 2;

    filter: blur(10px);

    pointer-events: none;

}



.carousel-item .carousel-caption {

    display: block;

    width: 100%;

    height: 0%;

    background-color: rgba(255, 242, 225, 0.5);

    backdrop-filter: blur(10px);

    font-weight: 700;

    font-size: 1.3em;

    text-transform: capitalize;

    transition: all 0.2s ease;



    h3 {

        color: rgb(154, 76, 255);

    }

}



.carousel-item.active {

    pointer-events: all;

    opacity: 1;

    transform: scale(1);

    z-index: 2;

    filter: blur(0px);

    cursor: pointer;

}



#slide1 {

    background-image: url("assets/wordle-background.png");

}



.carousel-item.active:hover {

    transform: scale(1.05) rotate(-2deg);

    box-shadow: -1vw 1vw 5px rgb(0, 0, 0);

    transition: all 0.2s ease;



    .carousel-caption {

        height: 40%;

        transition: all 0.2s ease;

    }

}



/* =====================

   BOUTON TOP

   ===================== */



.top_button {

    position: fixed;

    bottom: 50px;

    right: 10px;

    z-index: 1000;

    opacity: 0;

    visibility: visible;

    transform: translateY(50px);

    transition: all 0.4s ease;

}



.button {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    background: linear-gradient(rgb(227, 203, 255), rgba(252, 235, 252, 1));

    border: none;

    font-weight: 600;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0px 0px 0px 4px rgba(180, 160, 255, 0.253);

    cursor: pointer;

    transition-duration: 0.3s;

    overflow: hidden;

    position: relative;

}



.svgIcon {

    display: inline-block;

    width: 12px;

    transform: translateY(0);

    transition: transform 0.3s ease-in-out;

}



.svgIcon path {

    fill: #7a18e5;

}



.button:hover {

    scale: 1.2;

}



.button:hover .svgIcon {

    animation: bounce 0.5s infinite alternate ease-in-out;

}



@keyframes bounce {

    0% {

        transform: translateY(0px);

    }



    100% {

        transform: translateY(-10px);

    }

}



.button:active .svgIcon {

    transform: translateY(5px);

}



/* =====================

   FOOTER

   ===================== */



footer {

    display: flex;

    flex-direction: row;

    justify-content: center;

    align-items: center;

    gap: 20px;

    width: 100%;

    text-align: center;

    font-size: clamp(0.8rem, 1vw, 1.2rem);

    background-color: var(--secondary);

    border-radius: 5px;

    box-shadow: 0 5px 0px rgba(0, 0, 0, 0.5);

    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}



footer a {

    color: var(--text-color);

    text-decoration: none;

    font-weight: 600;

}



footer a:hover {

    color: var(--selection);

    transition: 0.2s;

}



footer ul {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    gap: 20px;

    justify-content: center;

}



* {

    user-select: none;

}



@media (max-width: 1024px) {

    body {

        font-size: 1.5vw;

        padding: 10px;

        gap: 6vh;

    }



    #about {

        grid-template-columns: 1fr 1fr;

        min-height: 350px;

    }



    .intro {

        font-size: clamp(1rem, 1.8vw, 1.5rem);

        padding: 30px;

    }



    .carousel {

        scale: 0.8;

        padding: 60px 80%;

    }

}



@media (max-width: 800px) {



    body {

        font-size: 4vw;

        padding: 10px;

        gap: 5vh;

    }



    

    /* ---- Menu ---- */

    header {

        position: fixed;

        top: 0;

        width: 100%;

        padding: 20px;

        border-radius: 0 0px 10px 10px;

        z-index: 100;

    }



    .menu {

        position: fixed;

        top: 0;

        margin: auto;

        padding: 0;

        width: 100%;

        border-radius: 10px;

        box-shadow: 0px 2px 0px 1px var(--text-color);

    }



    .menu #links,

    .menu .theme-toggle {

        display: none;

    }



    .burger {

        display: flex;

        align-items: center;

        justify-content: center;

        margin-right: 15px;

    }



    section {

        width: 100%;

        box-sizing: border-box;

    }



    section h1 {

        text-align: center;

        margin: 0 auto 10px;

        font-size: clamp(1.8rem, 8vw, 3rem);

    }



    #about {

        margin-top: 100px;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: flex-start;

        padding: 0;

        gap: 0;

        min-height: 520px;

        overflow: hidden;

    }



    .intro {

        padding: 20px 20px 10px;

        font-size: clamp(0.9rem, 4.5vw, 1.3rem);

        align-items: center;

        text-align: center;

        width: 100%;

        box-sizing: border-box;

        flex: 0;

    }



    .intro h1 {

        text-align: center;

        margin: 0 0 10px;

    }



    .intro p {

        text-align: center;

        font-size: 1em;

    }



    #about .img {

        flex: 1;

        width: 100%;

        min-height: 250px;

        background-size: 100%;

        background-position: center top;

        border-radius: 0 0 10px 10px;

        margin: 0;

    }



    #projects h1 {

        position: relative;

        left: 0;

        margin: 20px auto 10px;

        text-align: center;

    }



    #projects .carousel {

        padding: 50px 100%;

        scale: 1;

        font-size: clamp(0.9rem, 3.5vw, 1.2rem);

        align-items: center;

        justify-content: center;

    }



    .carousel-item {

        width: 70%;

        box-shadow: 2px 2px 0 white;

    }



    .carousel-item .carousel-caption {

        height: 40%;

        font-size: 1.7vw;

    }



    .carousel-item.active {

        transform: scale(1);

        box-shadow: 5px 5px 0px rgb(255, 255, 255);

    }



    .carousel-item.active:active {

        transform: scale(1.03) rotate(-1deg);

        box-shadow: -10px 10px 5px rgb(0, 0, 0);

    }



    footer {

        font-size: clamp(0.8rem, 3vw, 1rem);

        padding: 15px 0;

        width: 100%;

        box-sizing: border-box;

    }



    @media (max-width: 480px) {

        body {

            padding: 8px;

            gap: 4vh;

        }



        .burger {

            scale: 1.5;

            margin-right: 10px;

        }



        .intro {

            font-size: clamp(0.85rem, 4vw, 1.1rem);

            padding: 15px;

        }



    #about .img {

        min-height: 200px;

        background-size: 100%;

    }



        #projects .carousel {

            padding: 20px 10%;

        }



    .carousel-item {

        width: 80%;

    }



        #projects .arrow {

            scale: 1.5 1.5;

        }



        #projects .arrow:hover {

            scale: 1.7 1.7;

        }



        footer {

            flex-direction: column;

            gap: 10px;

            padding: 15px;

        }

    }

}