@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
/* For PC version */
@media (  min-width: 600px) {
  
  

html {
  touch-action: none;
  cursor: none;
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: hidden;
}


* {
  margin: 0;
  cursor: none;
}

svg {
  position: fixed;
  top: 0;
  left: 0;

  z-index: 1500;
  height: 100%;
  width: 100%;
  pointer-events: none;

  line {
    stroke-width: 60;
    stroke-linecap: round;
  }


}

body {
  background: #000000;
  --gap: 5em;
  --line: 1px;
  --color: rgba(255, 255, 255, 0.2);

  background-image: linear-gradient(-90deg,
      transparent calc(var(--gap) - var(--line)),
      var(--color) calc(var(--gap) - var(--line) + 1px),
      var(--color) var(--gap)),
    linear-gradient(0deg,
      transparent calc(var(--gap) - var(--line)),
      var(--color) calc(var(--gap) - var(--line) + 1px),
      var(--color) var(--gap));
  background-size: var(--gap) var(--gap);

}

body::-webkit-scrollbar {
  width: 0.5vw;
}

body::-webkit-scrollbar-track {
  background: rgb(0, 0, 0, 0);
}

body::-webkit-scrollbar-thumb {
  background-color: #fff;
  border-radius: 20px;
  border: 1px solid rgb(255, 255, 255);
}

nav {
  font-family: 'Oswald', sans-serif;
  background-color: rgb(73, 73, 73, 0.4);
  width: 100%;
  height: 7vw;
  position: fixed;
  top: 0;
  z-index: 150;
}



.elem-nav a {
  color: white;
  font-size: 1.7vw;
  z-index: 150;
  margin-right: 3vw;
}

.list-nav {
  color: #ffffff;
  list-style-type: none;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 7vw;
}

.name-nav {
  font-size: 3vw;
  color: rgb(122, 122, 122);
  text-decoration: none;
}

.elmt {
  display: flex;
}

/* Hide burger menu on desktop */
.burger {
  display: none;
}




.pres {
  color: #ffffff;
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0;
  width: 100%;
  height: 53.7vw;
}

h1.ayxxos {
  font-size: 3vw;
  font-weight: 200;
  margin: 0.4em 0;
  color: #ffffff;
  font-family: 'Oswald', sans-serif;
}

h1 {
  font-size: 3.5em;
}



/* About and skills */

#Me {
  color: #ffffff;
  background-color: rgb(19, 19, 25);
  height: 40vw;
  display: flex;
  align-items: center;
  margin-bottom: 5vw 0;
  font-family: "Lato", sans-serif;
}

.about {
  margin-left: 5vw;
  margin-top: 1vw;
  width: 50%;
}

.about h1 {
  color: #ffffff;
  margin-bottom: 3vw;
  font-size: 2vw;
  text-align: center;
}

.about p {
  color: #ffffff;
  font-size: 1.4vw;
  margin-left: 1.5vw;
  width: 70%;
  text-align: center;
}

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

.skills {
  color: #ffffff;
  margin-top: 1vw;
  width: 50%;
  margin-right: 5vw;
  display: flex;
  flex-direction: column;
  align-items: center;

}

.skills h1 {
  color: #ffffff;
  margin-bottom: 2vw;
  font-size: 2vw;
}

.skillBox {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1vw;
}

.skillsTop {
  display: flex;
  gap: 1vw;
}

.skillBox a {
  text-decoration: none;
}

.cardSkill {
  width: 12vw;
  height: 14vw;
  color: #ffffff;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px); 
  -webkit-backdrop-filter: blur(12px); 
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 1vw;
  overflow: hidden; 
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  display: flex;
  flex-direction: column;
}

.cardSkill:hover {
  transform: translateY(-5px) scale(1.03);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.topSkill {
  flex: 1; /* Prend l'espace disponible */
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.03); /* Légère différence de teinte */
}

.imgSkill img {
  width: 6vw; /* Légèrement réduit pour respirer */
  height: auto;
  filter: drop-shadow(0 5px 15px rgba(0,0,0,0.2)); /* Ombre sur l'icône */
}

.bottomSkill {
  height: 30%;
  background: rgba(0, 0, 0, 0.2); /* Un peu plus sombre pour le contraste du texte */
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.bottomSkill h2 {
  font-size: 1.2vw;
  font-weight: 500;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
}

/* Button cards*/
.btn {
  background-color: #ffffff;
  color: #000;
  padding: 0.5vw 1vw;
  border-radius: 0.5vw;
  font-size: 1vw;
  text-decoration: none;
  transition: 0.3s ease-in;
  border: 0.2vw solid #000;
}

.btn:hover {
  background-color: #000;
  color: #ffffff;
}

.card1,
.card2,
.card6 {
  background-color: rgb(255, 255, 255);
  border-radius: 0.5vw;
  width: 15vw;
  height: 23vw;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-evenly;
  font-family: "Lato", sans-serif;
}

.projectsImgs {
  width: 12vw;
  height: auto;
}

.desc {
  color: #000;
  font-size: 1vw;
  padding: 0 1.2vw;
  text-align: center;
}

.line {
  color: #000;
  width: 10vw;
  height: 0.1vw;
  background-color: #000;
}

#Projects {
  margin: 10vw 0;
  justify-content: space-evenly;
  display: flex;
}

.snow {
  position: absolute;
  z-index: -1;
  top: 0;
  width: 100%;
  height: 53.7vw;
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 50 50' style='enable-background:new 0 0 50 50%3B' xml:space='preserve'%3E%3Cstyle type='text/css'%3E.st1%7Bopacity:0.3%3Bfill:%23FFFFFF%3B%7D.st3%7Bopacity:0.1%3Bfill:%23FFFFFF%3B%7D%3C/style%3E%3Ccircle class='st1' cx='5' cy='8' r='1'/%3E%3Ccircle class='st1' cx='38' cy='3' r='1'/%3E%3Ccircle class='st1' cx='12' cy='4' r='1'/%3E%3Ccircle class='st1' cx='16' cy='16' r='1'/%3E%3Ccircle class='st1' cx='47' cy='46' r='1'/%3E%3Ccircle class='st1' cx='32' cy='10' r='1'/%3E%3Ccircle class='st1' cx='3' cy='46' r='1'/%3E%3Ccircle class='st1' cx='45' cy='13' r='1'/%3E%3Ccircle class='st1' cx='10' cy='28' r='1'/%3E%3Ccircle class='st1' cx='22' cy='35' r='1'/%3E%3Ccircle class='st1' cx='3' cy='21' r='1'/%3E%3Ccircle class='st1' cx='26' cy='20' r='1'/%3E%3Ccircle class='st1' cx='30' cy='45' r='1'/%3E%3Ccircle class='st1' cx='15' cy='45' r='1'/%3E%3Ccircle class='st1' cx='34' cy='36' r='1'/%3E%3Ccircle class='st1' cx='41' cy='32' r='1'/%3E%3C/svg%3E");

  animation: animatedBackground 10s linear infinite;
}

.snow div {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 53.7vw;
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 50 50' style='enable-background:new 0 0 50 50%3B' xml:space='preserve'%3E%3Cstyle type='text/css'%3E.st1%7Bopacity:0.7%3Bfill:%23FFFFFF%3B%7D.st3%7Bopacity:0.1%3Bfill:%23FFFFFF%3B%7D%3C/style%3E%3Ccircle class='st3' cx='4' cy='14' r='1'/%3E%3Ccircle class='st3' cx='43' cy='3' r='1'/%3E%3Ccircle class='st3' cx='31' cy='30' r='2'/%3E%3Ccircle class='st3' cx='19' cy='23' r='1'/%3E%3Ccircle class='st3' cx='37' cy='22' r='1'/%3E%3Ccircle class='st3' cx='43' cy='16' r='1'/%3E%3Ccircle class='st3' cx='8' cy='45' r='1'/%3E%3Ccircle class='st3' cx='29' cy='39' r='1'/%3E%3Ccircle class='st3' cx='13' cy='37' r='1'/%3E%3Ccircle class='st3' cx='47' cy='32' r='1'/%3E%3Ccircle class='st3' cx='15' cy='4' r='2'/%3E%3Ccircle class='st3' cx='9' cy='27' r='1'/%3E%3Ccircle class='st3' cx='30' cy='9' r='1'/%3E%3Ccircle class='st3' cx='25' cy='15' r='1'/%3E%3Ccircle class='st3' cx='21' cy='45' r='2'/%3E%3Ccircle class='st3' cx='42' cy='45' r='1'/%3E%3C/svg%3E");
  animation: animatedBackground 15s linear infinite;
}

@keyframes animatedBackground {
  0% {
    background-position: 0 0;
  }

  50% {
    background-position: 0px 10vw;
  }

  100% {
    background-position: 0 0;
  }
}


/* Glitch effect*/

@keyframes bg-noise {
  100% {
    background-position: 50% 0, 60% 50%
  }
}

.glitch a{
  color: #ffffff;
}

.glitch {
  color: #ffffff;
  position: relative;

  &::after,
  &::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    color: #fff;
    background: transparent;
  }
}



@keyframes noise-anim {
  0% {
    clip: rect(44px, 9999px, 32px, 0);
    opacity: 1;
  }

  5% {
    clip: rect(70px, 9999px, 10px, 0);
  }

  10% {
    clip: rect(81px, 9999px, 10px, 0);
  }

  15% {
    clip: rect(77px, 9999px, 64px, 0);
  }

  20% {
    clip: rect(24px, 9999px, 87px, 0);
  }

  25% {
    clip: rect(40px, 9999px, 65px, 0);
  }

  30% {
    clip: rect(87px, 9999px, 90px, 0);
  }

  35% {
    clip: rect(50px, 9999px, 14px, 0);
  }

  40% {
    clip: rect(100px, 9999px, 19px, 0);
  }

  45% {
    clip: rect(16px, 9999px, 7px, 0);
  }

  50% {
    clip: rect(17px, 9999px, 91px, 0);
    opacity: .2;
  }

  55% {
    clip: rect(84px, 9999px, 2px, 0);
  }

  60% {
    clip: rect(36px, 9999px, 9px, 0);
  }

  65% {
    clip: rect(66px, 9999px, 3px, 0);
  }

  70% {
    clip: rect(25px, 9999px, 69px, 0);
  }

  75% {
    clip: rect(72px, 9999px, 67px, 0);
  }

  80% {
    clip: rect(28px, 9999px, 40px, 0);
  }

  85% {
    clip: rect(6px, 9999px, 80px, 0);
  }

  90% {
    clip: rect(58px, 9999px, 42px, 0);
  }

  95% {
    clip: rect(22px, 9999px, 87px, 0);
  }

  100% {
    clip: rect(97px, 9999px, 58px, 0);
    opacity: 1;
  }
}


@keyframes noise-anim-2 {
  0% {
    clip: rect(66px, 9999px, 73px, 0);
    opacity: .2;
  }

  5% {
    clip: rect(31px, 9999px, 97px, 0);
  }

  10% {
    clip: rect(91px, 9999px, 84px, 0);
  }

  15% {
    clip: rect(51px, 9999px, 72px, 0);
  }

  20% {
    clip: rect(79px, 9999px, 33px, 0);
  }

  25% {
    clip: rect(81px, 9999px, 20px, 0);
  }

  30% {
    clip: rect(86px, 9999px, 64px, 0);
  }

  35% {
    clip: rect(88px, 9999px, 98px, 0);
  }

  40% {
    clip: rect(69px, 9999px, 6px, 0);
  }

  45% {
    clip: rect(24px, 9999px, 68px, 0);
  }

  50% {
    clip: rect(91px, 9999px, 79px, 0);
    opacity: 1;
  }

  55% {
    clip: rect(75px, 9999px, 79px, 0);
  }

  60% {
    clip: rect(84px, 9999px, 32px, 0);
  }

  65% {
    clip: rect(90px, 9999px, 2px, 0);
  }

  70% {
    clip: rect(42px, 9999px, 84px, 0);
  }

  75% {
    clip: rect(48px, 9999px, 14px, 0);
  }

  80% {
    clip: rect(79px, 9999px, 91px, 0);
  }

  85% {
    clip: rect(77px, 9999px, 6px, 0);
  }

  90% {
    clip: rect(99px, 9999px, 75px, 0);
  }

  95% {
    clip: rect(76px, 9999px, 60px, 0);
  }

  100% {
    clip: rect(4px, 9999px, 50px, 0);
    opacity: .2;
  }
}

.glitch:before {
  left: -5px;
  text-shadow: 0.2vw 0.1vw #00f;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim-2 3s infinite linear alternate-reverse;
}

.glitch:after {
  left: 3px;
  text-shadow: 0.2vw 0.1vw red;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim 2s infinite linear alternate-reverse;
}


#Contact {
  margin: 10vw 0;
  justify-content: space-evenly;
  display: flex;
  width: 100%;

}

.card3,
.card4,
.card5 {
  border-radius: 0.5vw;
  width: 30vw;
  height: 10vw;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.discordLogo {
  width: 6vw;
  height: auto;
}

.middleCard p {
  color: #000;
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  font-size: 1vw;
}

.lineCard {
  width: 0.1vw;
  height: 7vw;
  background-color: #000;
}

.show {
  display: none;
}

/* Skill Wheel Styles */
.skillWheel {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50vh;
  margin: 4vw 0;
  position: relative;
}

.wheelContainer {
  position: relative;
  width: 40vw;
  height: 40vw;
  min-width: 500px;
  min-height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wheelTitle {
  position: absolute;
  color: #ffffff;
  font-size: 2.5vw;
  margin: 0;
  z-index: 10;
  text-align: center;
  pointer-events: none;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.skillIcon {
  position: absolute;
  width: 6vw;
  height: 6vw;
  min-width: 60px;
  min-height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 2px solid rgba(255, 255, 255, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.skillIcon:hover {
  transform: scale(1.2);
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 12px 48px 0 rgba(255, 255, 255, 0.2);
}

.skillIcon.active {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
}

.skillIcon img {
  width: 3.5vw;
  height: 3.5vw;
  min-width: 35px;
  min-height: 35px;
  object-fit: contain;
  filter: drop-shadow(0 5px 15px rgba(0,0,0,0.3));
}

.skillCardsContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 3vw;
  min-height: 20vh;
  width: 100%;
  padding: 0 2vw;
  gap: 2vw;
}

.backToWheel {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 1vw 2vw;
  font-size: 1.2vw;
  border-radius: 2vw;
  transition: all 0.3s ease;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.backToWheel:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-3px);
  box-shadow: 0 12px 48px 0 rgba(255, 255, 255, 0.3);
}

.skillCards {
  display: none;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 1.5vw;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
  width: 100%;
  max-width: 90vw;
  padding: 1vw 0;
}

/* Selection de texte */
nav::selection,
.pres::selection,
#Me::selection {
  background: #ffffff;
  /* couleur de surlignage */
  color: #000;
  /* couleur du texte sélectionné */
}

#Projects::selection,
#Contact::selection {
  background: #1b1b1b;
  /* couleur de surlignage */
  color: #fff;
  /* couleur du texte sélectionné */
}

}