:root {
    --bg-color: rgba(253, 251, 245,1);
    --text-color: rgba(25,25,25,1);
}

.dark-mode {
    --bg-color: rgba(25,25,25,1);
    --text-color: rgba(253, 251, 245,1);
}


/*-------------*/
/*---DEFAULT---*/
/*-------------*/
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
    font-family: "Poppins", serif;
    font-weight: 400;
    font-style: normal;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 10px;
    font-optical-sizing: auto;
    scrollbar-width: none; /* Hide scrollbar in Firefox */
    z-index: 0;
    overscroll-behavior: none;
    overflow-x: hidden;
}

.border-test{
    position: absolute;
    width: calc(100vw - 30px);
    height: calc(200vh - 30px);
    top: 15px;
    left: 15px;
    border-color: var(--text-color);
    border-style: solid;
    border-width: 1px 1px 0px 1px;
    z-index: 200;
    pointer-events: none;
}

.left-border-test{
    position: fixed;
    width: calc(100vw - 30px);
    height: calc(200vh - 30px);
    top: 0;
    left: 15px;
    border-color: var(--text-color);
    border-style: solid;
    border-width: 0px 0px 0px 1px;
    z-index: 200;
    pointer-events: none;
}

.left-right-border-test{
    position: absolute;
    margin: 0;
    width: calc(100vw - 30px);
    height: 100%;
    top: 0;
    left: 15px;
    border-color: var(--text-color);
    border-style: solid;
    border-width: 0px 1px 0px 1px;
    z-index: 200;
    pointer-events: none;
}

.infinite-bar-wrapper .left-right-border-test{
    position: absolute;
    margin: 0;
    width: calc(100vw - 30px);
    height: calc(100% + 30px);
    top: 0;
    left: 15px;
    border-color: var(--text-color);
    border-style: solid;
    border-width: 0px 1px 0px 1px;
    margin-left: -50px;
    margin-top: -25px;
    z-index: 200;
    pointer-events: none;
}

.navbar .left-right-border-test{
    position: absolute;
    width: calc(100vw - 30px);
    height: 100%;
    top: 0;
    left: 15px;
    border-color: var(--text-color);
    border-style: solid;
    border-width: 0px 1px 0px 1px;
    z-index: 200;
    pointer-events: none;
}

.right-border-test{
    position: absolute;
    width: calc(100vw - 30px);
    height: calc(200vh - 30px);
    top: 0;
    left: 15px;
    border-color: var(--text-color);
    border-style: solid;
    border-width: 0px 1px 0px 0px;
    z-index: 200;
    pointer-events: none;
}

html{
    scrollbar-width: none;
    overscroll-behavior: none;
    filter: invert(0.01);
}

  /* For Webkit browsers */
  html::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Webkit browsers */
}

section{
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}

h1 {
    color: var(--text-color);
    font-weight: bolder;
}

canvas{
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none;  /* Allow hover effects on elements behind the canvas */
    z-index: 20;
}

.wait-point{
    width: 12px;
    height: 12px;
    background-color: var(--text-color);
    position: absolute;
    Bottom: 50px;
    Left: 200px;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(27, 27, 27, 0.6); }
  70% { box-shadow: 0 0 0 10px rgba(27, 27, 27, 0); }
  100% { box-shadow: 0 0 0 0 rgba(27, 27, 27, 0); }
}

/*----------------------------------*/

/*-------------*/
/*---NAV BAR---*/
/*-------------*/
.navbar {
    z-index: 100;
    position: absolute;
    margin-top: 100vh;
    top: 0;
    display: flex;
    justify-content:space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    font-weight:normal;
    background-color: var(--bg-color);
    font-family: "Atkinson Hyperlegible Mono", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 1.6em;
    transition: background-color 0.3s, color 0.3s;

}

.navbar .border-top{
    position: absolute;
    width: calc(100% - 30px);
    height: 100%;
    border-style: solid;
    border-color: var(--text-color);
    left: 15px;
    border-top-width: 1px;
}

.navbar .border-bottom{
    position: absolute;
    width: calc(100% - 60px);
    height: 100%;
    border-style: solid;
    border-color: var(--text-color);
    left: 30px;
    border-bottom-width: 1px;
}

.navbar a {
    color: var(--text-color);

    align-content: center;
}

.navbar .logo {
    font-size: 3em;
    padding-left: 30px;
    font-family: "Bricolage Grotesque", serif;
    font-optical-sizing: auto;
    font-weight: 400;
}

.navbar .nav-links ul {
    font-size: 1em;
    display: flex;
}

.navbar .nav-links li {
    padding: 15px 15px;
    color: var(--text-color);
    flex-direction: column;
    align-items: center;
    z-index: 99999;
    align-content: center;
    justify-content: center;
}

.navbar .nav-links li:last-child {
    padding-right: 30px;
}

.navbar .nav-links .focused {
    display: inline-block;
    width: 30%;
    height: 1.5px;
    background-color: var(--text-color);
    margin-top: -5px;
    opacity: 100%;
    transition: width 0.3s ease; /* Animates width change */
}

.navbar  .nav-links li:hover .line {
    width: 30%; /* Expand the width to 100% when li is hovered */
}

.nav-links a {
  color: #1B1B1B;
  text-decoration: none;
  position: relative;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: #1B1B1B;
  transition: width 0.2s ease;
}

.nav-links a:hover::after {
  width: 100%;
}

.navbar .vertical-bar{
    height: 100%;
    border-style: solid;
    border-color: var(--text-color);
    border-right-color: 1px;
}

.nav-links .language-button{
    width: 40px;
    height: 40px;
    padding: 5px;
    border-style: solid;
    border-radius: 50%;
    border-width: 1px;
    color: var(--text-color);
    align-content: center;
    transition: all 0.2s ease-in-out;

}

.nav-links .language-button.active {
    background-color: var(--text-color);
    color: var(--bg-color);
}

.nav-links .language-button:hover{
    background-color: var(--text-color);
    color: var(--bg-color);    
}

.navbar .nav-links .contact-me{
    padding: 5px 10px;
    background-color: var(--text-color);
    color: var(--bg-color);
    border-radius: 5px;
    align-content: center;
}

.btn-text-wrapper{
    width: 100%;
    height: 100%;
    overflow: hidden;
    clip-path: inset(20% 0);

}

.navbar .nav-links .contact-me .text-top{
    display: inline-block;
    position: relative;
    transition: transform 0.3s ease-in-out;
    
}

.navbar .nav-links .contact-me .text-bottom{
    display: inline-block;
    position: absolute;
    transform: translate(-100%, 100%);
    transition: transform 0.3s ease-in-out;
}

.navbar .nav-links .contact-me:hover .text-top{
    transform: translateY(-100%);
}

.navbar .nav-links .contact-me:hover .text-bottom{
    transform: translate(-100%, 0%);
}






/*-------------------*/
/*---SWITCH BUTTON---*/
/*-------------------*/

/* Genel stil */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    margin: 10px;
  }
  
  /* Giriş stil */
  .toggle-switch .toggle-input {
    display: none;
  }
  
  /* Anahtarın stilinin etrafındaki etiketin stil */
  .toggle-switch .toggle-label {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 24px;
    background-color: var(--text-color);
    border-radius: 34px;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  
  /* Anahtarın yuvarlak kısmının stil */
  .toggle-switch .toggle-label::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    background-color: #fff;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s;
  }
  
  /* Anahtarın etkin hale gelmesindeki stil değişiklikleri */
  .toggle-switch .toggle-input:checked + .toggle-label {
    background-color: var(--text-color);
  }
  
  .toggle-switch .toggle-input:checked + .toggle-label::before {
    transform: translateX(16px);
    background-color: var(--bg-color);

  }
  
  /* Light tema */
  .toggle-switch.light .toggle-label {
    background-color: #BEBEBE;
  }
  
  .toggle-switch.light .toggle-input:checked + .toggle-label {
    background-color: #9B9B9B;
  }
  
  .toggle-switch.light .toggle-input:checked + .toggle-label::before {
    transform: translateX(6px);
  }
  
  /* Dark tema */
  .toggle-switch.dark .toggle-label {
    background-color: #4B4B4B;
  }
  
  .toggle-switch.dark .toggle-input:checked + .toggle-label {
    background-color: #717171;
  }
  
  .toggle-switch.dark .toggle-input:checked + .toggle-label::before {
    transform: translateX(16px);
  }  

/*------------*/
/*---FOOTER---*/
/*------------*/
.footer {
    display: flex;
    justify-content:space-between;
    align-items: center;
    box-sizing: border-box;
    color: var(--text-color);
    height: 20px;
}

.footer .logo {
    font-size: 1em;
    padding-left: 15px;
    font-weight: bold;
}

.footer .footer-links ul {
    font-size: 1em;
    display: flex;
    align-items: center;
}

.footer .footer-links li {
    padding: 0 70px;
}
/*----------------------------------*/

.flex-wrapper{
    height:100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:flex-start;
}

.point {
    color: #5C71C0;
    display: inline-block;
    transition: transform 0.3s ease; /* Transition for smooth movement */
}

/* Hover effect */
.title:hover .point{
    transform: translateY(-10px); /* Move the element 10px upwards */
}

.title::selection {
    background-color: transparent; /* No background on selection */
    color: inherit; /* Keep the text color unchanged */
}

/* For Firefox */
.title::-moz-selection {
    background-color: transparent;
    color: inherit;
}

.point::selection {
    background-color: transparent; /* No background on selection */
    color: inherit; /* Keep the text color unchanged */
}

/* For Firefox */
.point::-moz-selection {
    background-color: transparent;
    color: inherit;
}

.subtitle::selection {
    background-color: transparent; /* No background on selection */
    color: inherit; /* Keep the text color unchanged */
}

/* For Firefox */
.subtitle::-moz-selection {
    background-color: transparent;
    color: inherit;
}

.selected{
    width: 30% !important;
}

/*--------------*/
/*-----HOME-----*/
/*--------------*/
.home {
    width: 100%;
    height:100vh;
    color: var(--text-color);
    scroll-snap-align: start;
    z-index: 1;
}

.home  .title {
    z-index: 9999999;
    padding-left: 10vw;
    font-size: 11em;
    font-weight: bold;
    line-height: 95%;
    /*font-family: "Ribeye", serif;
    font-weight: 400;
    font-style: normal;*/
    font-family: "Bricolage Grotesque", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
      "wdth" 100;
}

.home  .subtitle {
    padding-left: 10vw;
    font-family: "Figtree", sans-serif;
    font-size: 5.4em;
    font-weight: lighter;
    line-height: 80%;
}

.home  .arrow{
    z-index: 9999999;
    position: absolute;
    bottom: 10px;
    width: 100%; /* Span full screen width */
    color: var(--text-color);
    transition: transform 0.3s ease, opacity 0.1s ease-in-out, visibility 0.1s ease-in-out;
}

.home  .arrow img{
    width: 41px;
    height: 39px;
    margin: auto;
}

.home  .arrow:hover{
    transform: translateY(5px); /* Move the element 10px upwards */
}

.hidden {
    opacity: 0;
    visibility: hidden; /* Ensures it's not interactive */
  }

/*----------------------------------*/

/*---------------*/
/*-----ABOUT-----*/
/*---------------*/


.about {
    position: relative;
    padding-left: 75px; /* 60 + 15 */
    width: 100vw;
    height: 100vh;
    min-height: calc(100vh - 100px);
    color: var(--text-color);
    scroll-snap-align: start;
    display: flex;
    margin-top: 100px;
    flex-direction: column;
}

.about  .title {
    font-size: 7em;
    font-weight: bold;    
    /*font-family: "Ribeye", serif;
    font-weight: 400;
    font-style: normal;*/
    font-family: "Bricolage Grotesque", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
      "wdth" 100;
}

.about  .description {
    font-size: 1.4em;
    width: 100%;
    margin-top: 10px;
    text-align: justify;
}

.about .flex-wrapper{
    padding-right: 60px;
    vertical-align: top;
    align-items: flex-start; /* Align items to the top */
    justify-content: flex-start; 
}

.about .new-flex-wrapper{
    padding-right: 75px;
    padding-left: 60px;
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items:center;
    align-content: center;
}

.about .experiences{
    position: relative;
}

.experience-section:first-child{
    border-top-width: 0px;
}

.experience-section{
    border-top-width: 1px;
    border-style: solid;
    border-color: var(--text-color);
    padding-top: 30px;
    padding-bottom: 30px;
}

.vertical-bar{
    display: flex;
    position: relative;
    margin-top: 0;
    margin-bottom: 0;
    width: 1px;
    align-self: stretch;
    border-right-width: 1px;
    border-style: solid;
    border-color: var(--text-color);
} 

.experience-section:first-child{
    border-top-width: 0px;
}

.about .experiences .title{
    padding: 15px 0px 0px 0px;
    font-size: 3em;
    font-weight: bold;
}

.about .experiences .subtitle{
    padding-bottom: 10px;
    padding-left: 0;
    font-size: 1.4em;
    font-weight: bold;
    display: flex; /* Enables Flexbox layout */
    justify-content: space-between; /* Pushes items to the sides */
    align-items: center;
}

.about .experiences .education .title{
    padding-top: 20px;
}

.about .experiences .education .subtitle{
    padding-top: 5px;
    padding-bottom: 0px;
    padding-left: 0;
    font-size: 1.4em;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.about .experiences .education .date-right{
    padding-left: 20px;
    font-size: 1em;
    font-weight: lighter;
    font-style: italic; /* Optional for styling */
    color: gray; 
}

.about .experiences .description{
    padding: 0px Opx 25px 0px;
    margin: 0;
    text-align: justify;
    font-size: 1.4em;
    width: 100%;
}

.date-right{
    font-size: 1em;
    font-weight: lighter;
    font-style: italic; /* Optional for styling */
    color: gray; 
}

.flex-row-wrapper{
    display: flex;
    flex-direction: row;

}

.about .wait-point{
    background-color: var(--text-color);
    position: absolute;
    Bottom: 40%;
    Left: 50%;
}

.flex-contact-logo{
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    gap: 10px;
    padding-top: 5px;
}

.contact-logo{
    width: 32px;
    height: 32px;
    transition: transform 0.2s ease;

}

.contact-logo-yt{
    width: 45px;
    height: 45px;
    transition: transform 0.2s ease;
}

.contact-logo:hover {
  transform: translateY(-3px);
}

.contact-logo-yt:hover {
  transform: translateY(-3px);
}

.a-link:hover {
  transform: translateY(-3px);
}


.copyable {
  position: relative;
  cursor: pointer;
  font-weight: lighter;
}

.copyable::after {
  content: "Copié ✅";
  position: absolute;
  top: -30px; /* au-dessus du texte */
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7); /* noir transparent */
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  cursor: none;
  transition: opacity 0.2s ease;
}

.copyable.show::after {
  opacity: 1;
}

.hover-transition {
  transition: all 0.2s ease;
}

.cv{
    padding-top: 10px;
    text-decoration: underline;
}

/*----------------------------------*/

/*--------------*/
/*---PROJECTS---*/
/*--------------*/
.projects {
    background-color:blue;
    height: 1000px;
}

/*----------------------------------*/

/*-------------*/
/*---CONTACT---*/
/*-------------*/
.contact {
    background-color:darkgoldenrod;
    height: 1000px;
}
/*----------------------------------*/

#cursor {
    pointer-events: none;
    .cursor-circle {
      position: fixed;
      top: 0;
      left: 0;
      mix-blend-mode:difference;
      z-index: 100000000;
  
      circle {
        fill: white;
      }
    }
}

/*-------------*/
/*--- CARD ----*/
/*-------------*/

.card-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    text-align: center;
    color: var(--text-color);
    background-color: var(--bg-color);
}

.card-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 50px;
    padding-left: 10vw;
    padding-right: 10vw;
}

.card-text{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 300px;
    max-width: 100%;
    flex: 1; 
    text-align: left;
    width: 100%;
    margin-top: 25px;

}

.tag-container {
    margin-top: 20px;
    padding-bottom: 20px;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    font-size: clamp(0.9em, 1.5vh, 1.1em);
}

.tag {
    flex: 0 1 auto;
    text-align: center;
    display: inline-block;
    background-color: var(--text-color);
    color: var(--bg-color);
    border-radius: 5px;
    padding: 2px 12px;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px;
    transition: transform 0.3s ease-in-out;

}

.tag-container .tag:hover {
    transform: translateY(-5px);


}

.video-wrapper {
    width: 100%;
    max-width: 720px;
    display: flex;
    width: 720px;
    flex-shrink: 0;
    margin-top: 25px;
}

.ambilight-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

#ambilight {
    filter: blur(25px) opacity(0.5) saturate(300%);
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    transform: scale(1.1) translateZ(0);
    width: 100%;
    z-index: -1;
    height: 100%;
}

/*---------------*/
/*--- SCROLL ----*/
/*---------------*/

/*.swipe-section {
    overscroll-behavior: none;
    width: 600%;
    display: flex;
    flex-wrap: nowrap;
}*/

.container-project {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content:space-evenly;
    width: 100vw;
    height: 100vh;
    padding-right: 10vw;
    padding-left: 75px; /* 60 + 15 */
    text-align: center;
    color: var(--text-color);
    padding-top: 75px;
}

.container-project .flex-row-wrapper{
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-evenly;
    text-align: left;
    font-size: 1.4em;
}

.container-project .flex-column-wrapper{
    justify-content: space-between;
}

.container-project .flex-row-wrapper > div:nth-child(1) {
    flex: 2;
}

.container-project .flex-row-wrapper > div:nth-child(3) {
    flex: 3;
    padding-left: 60px;
}

.flex-row-wrapper .vertical-bar {
    flex: 0;
    padding-right: 60px;
}

.container-project .flex-row-wrapper .subtitle{
    font-family: "Atkinson Hyperlegible Mono", serif;
    font-optical-sizing: auto;
    font-weight: bold;
    font-style: normal;
    font-size: clamp(1.2em, 1.5vh, 1.4em);
    padding-bottom: 10px;
}

.container-project .title{
    font-size: 7em;
    font-weight: bold;    
    font-family: "Bricolage Grotesque", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    text-align: left;
    margin-left: -5px;
}

.container-project  .description {
    font-size: clamp(1.2em, 1.5vh, 1.4em);
    width: 100%;
    margin-top: 10px;
    text-align: justify;
}

.container-project li{
    font-size: clamp(0.9em, 1.5vh, 1.1em);
}

.container-project .space{
    height: 10px;
}

.container-project b {
    font-family: "Atkinson Hyperlegible Mono", serif;
    font-optical-sizing: auto;
    font-weight: bolder;
    font-style: normal;
    font-size: clamp(0.9em, 1.5vh, 1.1em);
}

.container-project ul{
    padding-left: 0px;
}

.container-project li{
    /*padding-bottom: 10px;*/
}

.container-project li:last-child{
    /*padding-bottom: 20px;*/
}

.container-project .game-controller{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    padding: 0px;
}

.container-project .game-controller li{
    display: flex;
    flex: 1 1 50%;
}

.container-project .other .game-controller li{
    display: flex;
    flex: 1 1 33.3%;
}

.container-project .game-controller li:nth-child(1),
.container-project .game-controller li:nth-child(3) {
    padding-left: 25px;
}

.container-project .game-controller li::before {
    content: "";
    position: absolute;
    width: 20px; /* Set icon size */
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: translateX(-25px);
}

.container-project .game-controller li:nth-child(1)::before {
    background-image: url("../img/hourglass-outline.svg"); /* SVG as background */
}

.container-project .game-controller li:nth-child(2)::before {
    background-image: url("../img/game-controller-outline.svg"); /* SVG as background */
}

.container-project .game-controller li:nth-child(3)::before {
    background-image: url("../img/people-outline.svg"); /* SVG as background */
}

.container-project .game-controller li:nth-child(4)::before {
    background-image: url("../img/tv-outline.svg"); /* SVG as background */
}

.container-project .contributions li{
    list-style: disc;
    list-style-position: inside;
}

.container-project .contributions li{
    list-style: disc;
    list-style-position: inside;
}

.container-project .list li{
    list-style: disc;
    list-style-position: inside;
}


/*
.container-project .general-informations > li::marker {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='10' viewBox='0 0 50 50'%3E%3Cpath d='M46.4 16.2c-2.3-2.3-5.4-3.5-8.4-4.5-.5-.2-1.1-.3-1.6-.5-1.6-1.6-3.7-2.8-6.2-3.2-1-.2-1.9.1-2.5.6-.9-.3-1.8-.6-2.7-.8-3.2-1-6.4-1.8-9.5-.1-1 .5-1.9 1.2-2.7 2-6.4 1.4-11.7 5-12.4 12.7C0 27 1.9 31.5 4.9 34.9c.1.6.2 1.1.4 1.7 1 3.2 3.3 5.7 6.7 6.5 2.7.6 5.4-.2 7.9-1.2 3.3.4 6.7.3 9.9 0 6.5-.7 13.3-2.8 17.1-8.5 3.6-5.2 4-12.6-.5-17.2zm-17.3.9c2.1.4 4 1.7 4.7 3.8 0 .5-.1 1.1-.2 1.6-.3 1.4-.8 2.6-1.6 3.7-.7.2-1.5.1-2.3-.4-.8-.4-1.6-1-2.2-1.6-.4-.4-1.2-1.7-1.6-1.9 3.4 1.3 5.1-3 3.2-5.2zm-11.6 9.7c.2-1.9 1.1-3.9 2.3-5.5-.4 2.1.3 4.2 1.7 6 1.3 1.7 3.1 3.2 5 4.2-.2.1-.4.2-.6.4-.1 0-.1.1-.2.1-3.9.2-8.7-.8-8.2-5.2zm-6.4 3.1c.1.3.1.7.2 1 .2.6.4 1.2.7 1.8-.4-.2-.7-.5-1-.7.1-.8.1-1.4.1-2.1zm31.2-1.3c-.9 1.7-2.1 3.1-3.7 4.1 2-2.1 3.4-4.7 4-7.6.2-.7.3-1.4.3-2.1.6 1.5.5 3.3-.6 5.6z'/%3E%3C/svg%3E") ' ';
}

.container-project .general-informations > li:nth-child(3n)::marker {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='10' viewBox='0 0 50 50'%3E%3Cpath d='M46.5 12.5c-.4-1.1-1.3-1.8-2.2-2-4.2-4-11.6-4.3-17.1-4.1-6.9.3-13.9 2.1-19.4 6.5C2 17.5-2.4 25.7 2.5 32.6c2.2 3.2 5.5 4.9 9 5.5 3.3 1.7 6.7 3.3 10.2 4.4 7.8 2.3 17 1.6 23.2-4.3 7.3-7 4.8-17.3 1.6-25.7zm-20.2 2.7c.6 0 1.3 0 1.8.2 1.1.4 1.7 1.3 2 2.3-1-1.2-2.4-2.1-3.8-2.5zm-1.4 6.6c.9.9 1.3 2.2-.2 2.3-2 .2-1.1-1.9.2-2.3zm-11.8 9.8c-.6-.3-2.9-1.1-3.2-1.8-.2-.5 1.4-3.1 2.1-4.2.3.5.7 1 1.2 1.4 0 .3.1.6.2.8.5 1.9 1.5 3.1 2.9 4h-.2c-.8.1-1.6.1-2.5-.1-.2 0-.3 0-.5-.1zM24 36.4c1.6-.7 3-1.5 4.3-2.5.8.2 1.7.3 2.5.5 2.5.4 5.2.9 7.7.6-.9.6-2 1.1-3 1.4-3.9 1.3-7.7 1-11.5 0z'/%3E%3C/svg%3E") ' ';
}

.container-project .general-informations > li:nth-child(3n - 1)::marker {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='10' viewBox='0 0 50 50'%3E%3Cpath d='M48.3 23.7c-1-9.9-9.9-15.6-18.8-17.8-8.2-2.1-18.8-2.6-24.6 4.8C.6 16.2 1 23.6 4.3 29.3c-.5 1-.8 2-1 3-.6 4 2 7.6 5.1 10 5.9 4.4 14 4.2 19.6-.4 1.5 0 2.9-.2 4.4-.5 1.8 0 3.5 0 5.3-.1 2.3-.1 3.5-1.9 3.5-3.7 4.5-3.3 7.7-8.2 7.1-13.9zM9.1 17.8c1.1-4.1 4.9-5.8 8.8-6.1.9-.1 1.9-.1 2.9-.1-3.2 1.6-6.3 4.6-8 7.4-.1.1-.1.2-.2.3-1.1.9-2.1 1.9-3 2.9-.2.2-.4.4-.5.6-.4-1.7-.5-3.3 0-5z'/%3E%3C/svg%3E") ' ';
}
*/


.container-project .new-video-wrapper{
    display: flex;
    z-index: 2;
    flex-grow: 1;
    flex-direction: column;  /* Stacks items vertically */
    justify-content: left; /* Aligns items vertically in the container */
    align-items: left;
    position: relative;
}

.container-project .new-video-wrapper video {
    position: relative;
    height: calc(100% - 40px);
    max-height: calc(100% - 40px);
    width: auto;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
}

.container-project .wait-point{
    top: 150px;
    left: 1200px;
}

#ambilight {
    position: absolute;
    height: 100%;
    max-height: 100%;
    width: auto;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    pointer-events: none;     /* Make sure the canvas does not block interactions with the video */
    top: 50%;               /* Move canvas 50% down from the top */
    left: 50%;  
    transform: translate(-50%, -50%);  /* Offset by -50% to center the canvas */
}

#video{
}


.fake{
    background-color: blue;
    height: 100%;
    max-height: 100%;
    width: auto;
    max-width: 100%;
    aspect-ratio: 16/9;
}



.swipe-section {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: visible;
}

.swipe-section .panel {
    position: absolute;
}

.vh-200 {
    height: 500vh !important;
}

/*----------------------*/
/*--- VERTICAL TEXT ----*/
/*----------------------*/

.vertical-text-container{
    z-index: 333;
    align-items: center;
    align-content:flex-start;
    writing-mode: vertical-lr;
    height: 100vh;
    position: absolute;
    background-color: var(--bg-color);
    left: 0;
    transform: translateX(-50%) translateY(100vh);
    will-change: transform;
}

.vertical-text-container::after{
    z-index: 9999;
}


.vertical-text-container .first{
    width: 90px;
    margin-left: -90px;
}

.vertical-text-container .second{
    width: 60px;
    margin-left: -60px;

}

.vertical-text-container .third{
    width: 30px;
    margin-left: -30px;
}


.vertical-text-container .text{
    z-index: 300;
    background-color: var(--bg-color);
    position: relative;
    font-size: 3em;
    font-weight: 400;
    border-style: solid;
    border-left-width: 1px;
    border-color: var(--text-color);
    line-height: 90%;
    margin-top: 80px;
    font-family: "Bricolage Grotesque", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:"wdth" 100;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.vertical-text-container .top-arrow{
    z-index: 301;
    position: absolute;
    width: 30px;
    height: 30px;
    left: 0;
    transform: rotate(90deg);
    transition: transform 0.3s ease-in-out;
    stroke-width: 200px; /* Adjust as needed */
}

.vertical-text-container .bottom-arrow{
    z-index: 301;
    position: absolute;
    width: 30px;
    height: 30px;
    left: 0;
    bottom: 0;
    transform: rotate(-90deg);
    transition: transform 0.3s ease-in-out;
}


.text:hover{
    transform: translateX(-10px);
    box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.05); /* Soft shadow on the left */
}

.vertical-text-container .text:hover .top-arrow{
    transform: translateY(var(--translate-value)) rotate(45deg);/* ;*/
}

.vertical-text-container .text:hover .bottom-arrow{
    transform: translateY(calc(-1 * var(--translate-value))) rotate(-45deg) /*translateX(var(--translate-value));*/
}


.vertical-text-container .text.first{
    /*margin-left:-125px;*/
    /*margin-left:-18Opx;*/

}

.vertical-text-container .text.second{
    /*margin-left:-75px;*/
    /*margin-left:-120px;*/

}

.vertical-text-container .text.third{
    /*margin-left:-25px;*/
   /* margin-left:-60px;*/

}

@keyframes slideFromBottom {
    0% {
      transform: translateX(-50%) translateY(100vh); /* Start below the viewport */
    }
    100% {
      transform: translateX(-50%) translateY(0); /* End at its original position */
    }
  }


/*----------------------*/
/*--- Infinite bar  ----*/
/*----------------------*/

.infinite-bar-flex-wrapper{
    flex-grow: 1;
    align-items: center;
    align-content: center;
    padding-bottom: 100px;
}

.infinite-bar-wrapper{
    z-index: 1;
    position: relative;
    margin-top: 25px;
    width: 100%;
    overflow: hidden;
    padding: 20px 0px 20px 0px;
    border-style: solid;
    border-color: var(--text-color);
    border-top-width: 1px;
    border-bottom-width: 1px;
    /*transform: rotate(-1deg);*/
    /*-webkit-backface-visibility: hidden;*/
    /*box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.2),
    0 -10px 30px rgba(0, 0, 0, 0.1),
    0 10px 10px rgba(0, 0, 0, 0.1);*/
    transition: box-shadow 0.3s ease;
    align-content: center;
    align-items: center;
    overflow: visible;

}

.infinite-bar-wrapper .left-border-text{
    z-index: 10;
    position: absolute;
    height: 100%;
    width: 150px;
    background-color: var(--bg-color);
    border-style: solid;
    border-color: var(--text-color);
    border-right-width: 0px;
    margin: -20px 0;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: space-evenly;
    transition: background-color 0.3s, color 0.3s;
}

.infinite-bar-wrapper .left-border-text::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    height: 80%;
    width: 1px;
    background-color: var(--text-color);
    transform: translateY(-50%);
  }

.infinite-bar-wrapper .right-border{
    z-index: 20;
    position: absolute;
    right: 0;
    height: 110%;
    width: 100px;
    background-color: var(--bg-color);
    margin: -25px 0;
    transition: background-color 0.3s, color 0.3s;
}

.infinite-bar-wrapper .left-border{
    z-index: 20;
    position: absolute;
    left: 0;
    height: 110%;
    width: 100px;
    background-color: var(--bg-color);
    margin: -25px 0 -25px -100px;
    transition: background-color 0.3s, color 0.3s;
}


.infinite-bar-wrapper .animated-text{
    position: relative;
    font-size: 3em;
    font-weight: bold;
    align-self: center;
}


.infinite-bar{
    display: flex;
    width: 200vw;
    height: 50px;
    animation: scrollLeft 120s linear infinite;
}


.infinite-bar-wrapper .content-wrapper{
    align-items: center;
    align-content: center;
    justify-content: space-evenly;
    gap: 20px;
    display: flex;
    min-width: 100%;
}

.infinite-bar-wrapper .element{
    height: 100%;
    width: auto;
    white-space: nowrap;
    object-fit: contain;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: space-evenly;
}

.infinite-bar-wrapper .tag{
    height: auto;
    width: auto;
    background-color: var(--text-color);
    border-radius: 3px;
    color: var(--bg-color);
    font-size: 2em;
    font-weight: bolder;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: space-evenly;
    padding: 2px 10px;
    min-width: 100px;
}

.infinite-bar-wrapper .tag span{
    padding: 2px 10px;

    min-width: 50px;

}

.infinite-bar-wrapper .tag span:first-child{
}

.infinite-bar-wrapper .tag span:last-child{
    border-radius: 3px;
    margin: -15px -8px -15px 0px;
    background-color: var(--bg-color);
    color: var(--text-color);
}

.infinite-bar-wrapper .element img{
    width: 100%;
    height: 100%;
}


.infinite-bar-wrapper:hover .infinite-bar{
    animation-play-state: paused;
}

/* Animation pour un scroll fluide et infini */
@keyframes scrollLeft {
    from {
      transform: translateX(0%);
    }
    to {
      transform: translateX(-100%);
    }
}

.flex-column-wrapper {
    display: flex;
    flex-direction: column;
}


.site-notice {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  
  color: #1B1B1B;
  font-size: 14px;
  text-align: center;
  padding-top: 20px;
  opacity: 0.9;
  border-radius: 0 0 6px 6px;
}

.site-notice-2 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  
  color: #1B1B1B;
  font-size: 14px;
  text-align: center;
  padding-top: 40px;
  opacity: 0.9;
  border-radius: 0 0 6px 6px;
}


.langue{
    font-weight: lighter;
}

.link-linkedin{
    font-weight: lighter;
}

.link-linkedin:hover{
    font-weight: lighter;
    text-decoration: underline;
}

.video-timecode:hover{
    text-decoration: underline;
}

.card-link:hover{
    text-decoration: underline;
}


/* Par défaut : on affiche le français */
.lang-fr { display: inline; }
.lang-en { display: none; }

/* Quand le body a .show-en, on inverse */
body.show-en .lang-fr { display: none; }
body.show-en .lang-en { display: inline; }