/* defaults */

:root {
  --pointer: pointer;

  --color2: #21cf81;

  --trans: 1s;
}

@font-face {
  font-family: myFont;
  src: url("Suisse\ BP\ Int'l\ Medium.wof.otf");
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  /* background-color: black; */
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-family: myFont;
  overflow: hidden;
  /* position: absolute; */
}

::selection {
  background-color: rgba(0, 0, 0, 0.25);
  color: white;
}

::-moz-selection {
  background-color: rgba(0, 0, 0, 0.25);
  color: white;
}

ol,
ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: black;
}

/* a :hover {
  z-index: 10000000;
} */

.hidden {
  display: none;
}
.container {
  width: 100vw;
  height: 100vh;
  position: absolute;
  background-image: url(./Images/Background/Fond.avif);
  background-size: cover;
  font-size: 1.5rem;
  font-family: myFont;

  background-position: center;
}


.texts {
  margin-left: 2vw;
  display: flex;
  flex-direction: column;
  color: black;
  /* background-blend-mode: difference; */
  z-index: 2;
  position: fixed;
}

.text {
  position: absolute;
  bottom: 2vw; /* Distance from the bottom */
  width: 45vw;
  background-color: transparent;
  pointer-events: none;
  font-size: 1rem;
  padding-left: 2vw;
  text-align: left;
}

.upp {
  width: 100vw;
  margin-top: 2.3vh;
  position: fixed;
  display: flex;
  flex-direction: row;
  text-align: justify;
  z-index: 2;
}

.right {
  width: 95vw;
  margin-top: 2.3vh;
  position: absolute;
  text-align: end;
  z-index: 2;
}

.down {
  margin-top: 95.3vh;
  position: fixed;
  display: flex;
  text-align: justify;

  z-index: 2;
}

#contact {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
}

.contact {
  display: flex;
  flex-wrap: nowrap;
}
.off {
  display: none;
}

.menu-project {
  position: fixed;
  width: 100vw;
  left: 0;
  height: 100vh;
  display: flex;
  pointer-events: none;

}

.button-left {
  z-index: 1;
  width: 50vw;
  height: 100vh;
  background-color: transparent;
  cursor: url("Images/Background/cursor_left_03.png") 0 0, auto;
}

.button-right {
  z-index: 1;
  width: 50vw;
  height: 100vh;
  background-color: transparent;
  cursor: url("Images/Background/cursor_right_03.png") 0 0, auto;
}

.hide-arrow-cursor {
  cursor: auto;
}

.back {
  margin-top: 3vh;
  width: 100vw;
  position: absolute;
  text-align: start;
  display: none;
  z-index: 10;
  cursor: pointer;
  font-size: 2rem;
  text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.5);
  
}
.back.show {
  z-index: 999;
  position: absolute;
}

.show {
  display: block;
}

.back:hover {
  filter: opacity(50%);
}

.projects {
  max-height: 100vh;
  max-width: 100vw;
  display: flex;
  position: absolute;
}

.project {
  height: 15vw;
  width: 15vw;
  background-color: black;
  cursor: pointer;
}

.proj-0 {
  background: url(./Images/Project-0/Proj-0_object.avif);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation-iteration-count: infinite;
  position: fixed;
  left: 250px;
  top: 120px;
}

.proj-1 {
  background: url(./Images/Project-1/Proj_1_object.avif);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation-iteration-count: infinite;
  position: fixed;
  left: 900px;
  top: 90px;
}

.proj-2 {
  background: url(./Images/Project-2/Proj-2_object.avif);
  background-size: cover;
  background-position: center;
  position: fixed;
  left: 350px;
  top: 600px;
  animation-iteration-count: infinite;
}

.proj-3 {
  background: url(./Images/Project-3/Proj-3_object.avif);
  background-size: cover;
  background-position: center;
  position: fixed;
  left: 450px;
  top: 200px;
  animation-iteration-count: infinite;
}

.proj-4 {
  position: fixed;
  background: url(./Images/Project-4/Proj-4_object.avif);
  background-size: cover;
  background-position: center;
  left: 550px;
  top: 300px;
  animation-iteration-count: infinite;
}
.proj-5 {
  position: fixed;
  background: url(./Images/Project-5/Proj-5_object.avif);
  background-size: cover;
  background-position: center;
  left: 650px;
  top: 250px;
  animation-iteration-count: infinite;
}
.proj-6 {
  position: fixed;
  background: url(./Images/Project-6/Proj-6_object.avif);
  background-size: cover;
  background-position: center;
  left: 750px;
  top: 200px;
  animation-iteration-count: infinite;
}
.proj-7 {
  position: fixed;
  background: url(./Images/Project-7/Proj-7_object.avif);
  background-size: cover;
  background-position: center;
  left: 850px;
  top: 500px;
  animation-iteration-count: infinite;
}
.proj-8 {
  position: fixed;
  background: url(./Images/Project-8/Proj-8_object_01.avif);
  background-size: cover;
  background-position: center;
  left: 950px;
  top: 500px;
  animation-iteration-count: infinite;
}
.proj-9 {
  position: fixed;
  background: url(./Images/Project-9/Proj-9_object_01.avif);
  background-size: cover;
  background-position: center;
  left: 100px;
  top: 400px;
  animation-iteration-count: infinite;
}
.proj-10 {
  position: fixed;
  background: url(./Images/Project-10/Proj-10_object_02.avif);
  background-size: cover;
  background-position: center;
  left: 850px;
  top: 200px;
  animation-iteration-count: infinite;
}

.proj-11 {
  position: fixed;
  background: url(./Images/Project-11/Proj-11_object_02.avif);
  background-size: cover;
  background-position: center;
  left: 700px;
  top: 600px;
  animation-iteration-count: infinite;
}

.proj-12 {
  position: fixed;
  background: url(./Images/Project-12/Proj-12_object.avif);
  background-size: cover;
  background-position: center;
  left: 300px;
  top: 400px;
  animation-iteration-count: infinite;
}

.proj-13 {
  position: fixed;
  background: url(./Images/Project-13/Proj-13_object_01.avif);
  background-size: cover;
  background-position: center;
  left: 400px;
  top: 250px;
  animation-iteration-count: infinite;
}

.proj-14 {
  position: fixed;
  background: url(./Images/Project-14/Project-14_object.avif);
  background-size: cover;
  background-position: center;
  left: 400px;
  top: 250px;
  animation-iteration-count: infinite;
}
.proj-15 {
  position: fixed;
  background: url(./Images/Project-15/Project-15_object.avif);
  background-size: cover;
  background-position: center;
  left: 100px;
  top: 550px;
  animation-iteration-count: infinite;
}
	
.proj-16 {
  position: fixed;
  background: url(./Images/Project-16/Project-16_object.avif);
  background-size: cover;
  background-position: center;
  left: 980px;
  top: 250px;
  animation-iteration-count: infinite;
}
	
.proj-17 {
  position: fixed;
  background: url(./Images/Project-17/Proj-17_object.avif);
  background-size: cover;
  background-position: center;
  left: 800px;
  top: 400px;
  animation-iteration-count: infinite;
}


.project:hover {
  transform: scale(1.3);
  transition-duration: 0.2s;
  transition: ease-in-out;
}

.containerProject {
  position: absolute;
  display: none;
  overflow: hidden;
  opacity: 0;
  /* scroll-behavior: smooth;
 pointer-events: none;
 transition-duration: 0.2s; */
}

.slides {
  position: fixed;
  height: 100vh;
  width: 100vw;
  display: flex;

  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  overflow-x: scroll;
  overflow-y: hidden;

  /* background-color: rgba(0, 0, 0, 0.5); */
   -webkit-backdrop-filter: blur(50px);
	backdrop-filter: blur(50px);
  transition-duration: 1.5s;
}

.slides::-webkit-scrollbar {
  display: none;
}

.slide {
  /* width: 50vw;
height: 100vh; */
  flex: 1 0 100%;
  overflow: hidden;
  display: flex;
}

.slide:has(p) {
  /* flex:1 0 50%; */
  flex: 1 0 100%;
}

 

.slide img {
  object-fit: contain;
  background-size: cover;
  top: 0;
  width: 100vw;
  height: 100vh;
  /* position: fixed; */
  background-color: transparent;
  pointer-events: none;
}

.opup {
  /* opacity: 1;
  transition-duration: 2s; */
  pointer-events: all;
}
.containerProject.opup {
  display: flex;
  transition-duration: 2s;
  opacity: 100%;

}

.change-0 {
  background-image: url(./Images/Project-0/Proj-0_back.avif);
  background-size: cover;
}

.change-1 {
  background-image: url(./Images/Project-1/proj-1_back.avif);
  background-size: cover;
}


.change-2 {
  background-image: url(./Images/Project-2/Proj-2_back.avif);
  background-size: cover;
}
.change-3 {
  background-image: url(./Images/Project-3/Proj-3_back.avif);
  background-size: cover;
}

.change-4 {
  background-image: url(./Images/Project-4/Proj-4_back.avif);
  background-size: cover;
}
.change-5 {
  background-image: url(./Images/Project-5/Proj-5_back.avif);
  background-size: cover;
}
.change-6 {
  background-image: url(./Images/Project-6/Proj-6_back.avif);
  background-size: cover;
}
.change-7 {
  background-image: url(./Images/Project-7/Proj-7_back.avif);
  background-size: cover;
}
.change-8 {
  background-image: url(./Images/Project-8/Proj-8_back_02.avif);
  background-size: cover;
}
.change-9 {
  background-image: url(./Images/Project-9/Proj-9_back_01.avif);
  background-size: cover;
}
.change-10 {
  background-image: url(./Images/Project-10/Proj-10_back_01.avif);
  background-size: cover;
}

.change-11 {
  background-image: url(./Images/Project-11/Proj-11_back_01.avif);
  background-size: cover;
}

.change-12 {
  background-image: url(./Images/Project-12/Proj-12_back_01.avif);
  background-size: cover;
}
.change-13 {
  background-image: url(./Images/Project-13/Proj-13_back.gif);
  background-size: cover;
}

.change-14 {
  background-image: url(./Images/Project-14/Project-14_back.avif);
  background-size: cover;
}

.change-15 {
  background-image: url(./Images/Project-15/Project-15_back.avif);
  background-size: cover;
}
	
.change-16 {
  background-image: url(./Images/Project-16/Project-16_back.avif);
  background-size: cover;
}

.change-17 {
  background-image: url(./Images/Project-17/Proj-17_back.avif);
  background-size: cover;
}

.hide {
  opacity: 0%;
  pointer-events: none;
  transition-duration: 0.8s;
}

.container {
  transition: var(--trans) ease-in-out;
}


video {
  transform: scale(0.9); /* Optional: adjust the scale as needed */
  position: fixed;
  right: 0; /* Position the video on the right side of the screen */
  top: 15%; /* Optional: adjust as needed */
  max-width: 50%; /* Ensure the video remains responsive */
  height: auto; 
  pointer-events: all;
}


iframe {
  transform: scale(0.9); /* Optional: adjust the scale as needed */
  position: fixed;
  right: 0; /* Position the video on the right side of the screen */
  top: 10vw; /* Optional: adjust as needed */
  width: 50vw; /* Adjust the width as needed */
  height: calc(50vw * 9 / 16); /* Calculate the height to maintain a 16:9 aspect ratio */
  pointer-events: all;
}

#video-container{
  z-index: 1;

}

@media (orientation: portrait) {
  .project {
    height: 30vw;
    width: 30vw;
  }

    .controls{
        display: none;
    }

    li{
        flex:1 0 196%;
        
    }
    li:has(p){
        flex:1 0 96%;
    }

    .text{
      font-size: .9rem;
      width: 90vw;
    }
    .texts{
      font-size: 1.2rem;
      width: 90vw;
    }
    .hide-controls::-webkit-media-controls {
      display: none !important;
    }
    .containerProject .slides .slide:first-child img {
      /* Adjust the left margin to move the first image closer to the left */
      margin-left: -38vw; /* Adjust this value as needed */
      transform: scale(1.5);
      margin-top: -15vw;
    }

    .containerProject .slides .slide img{
      transform: scale(1.5);
      margin-top: -15vw;
    }

    .containerProject .slides .slide iframe{
      transform: scale(0.5); /* Adjust the scale as needed */
      width: 90vw; /* Adjust the width as needed */
      height: 50vw;
      max-width: 100%; /* Ensure responsiveness */
      position: absolute; /* Position the video */
      left: 50%; /* Move the video to the center horizontally */
      top: 35%; /* Move the video to the center vertically */
      transform: translate(-50%, -50%); /* Center the video */
    }
    .projects {
      max-height: 100vh;
      max-width: 100vw;
      display: flex;
      position: absolute;
    }
  
   .projects {
      max-height: 100vh;
      max-width: 100vw;
      display: flex;
      position: absolute;
    }
  
   .project {
      margin-left: -5vw;
      height: 40vw;
      width: 40vw;
    }

    .change-0
    .change-1
    .change-2
    .change-3
    .change-4
    .change-5
    .change-6
    .change-7
    .change-8
    .change-9
    .change-10
    .change-11
    .change-12
    .change-13
    .change-14
    .change-15{
      display: none;
    }

}

/* .text {
  position: absolute;
  bottom: 2vw; 
  width: 45vw;
  background-color: transparent;
  pointer-events: none;
  font-size: 1rem;
  padding-left: 2vw;
  text-align: left;
} */