@import url('https://api.fontshare.com/v2/css?f[]=zodiak@100,101,300,301,400,401,700,701&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=switzer@100,101,200,201,300,301,400,401,500,501,600,601&display=swap');


/**************************LEGENDE**************************/
.legende {
  font-family: 'Zodiak', serif;
  font-weight: 300;
  font-size: 0.95em;
  letter-spacing: 0.04rem;
  color: white;
  position: fixed;
  width: 100%;
  top: 0.8vh;
  text-align: center;
  mix-blend-mode: difference;
  z-index: 100;
}

.legende-i {
  font-style: italic;
  display: inline-block;
}


/**************************LISTE PROJETS**************************/
/* -------- SECTION PROJETS -------- */
#section {
  width: 100vw;
  margin: 18vh 0 0 0;
  padding-bottom: 18vh;
  text-align: center;
}

.project {
  margin: 3.2vh 1.2vw 3.6vh 0;
}

.center01 {
  margin-right: 9vw;
}

.center02 {
  margin-right: 4vw;
}

.project a,
.project .top,
.project .categorie,
.project .client,
.project .task {
  display: inline-block;
  z-index: 10;
}


/*******************CATÉGORIE & CLIENT***********************/
.top {
  font-size: 0.85em;
  color: black;
  vertical-align: top;
  margin-top: 0.42vh;
}

.categorie {
  font-family: 'Zodiak', serif;
  font-weight: 500;
  font-style: italic;
}

.client {
  font-family: 'Switzer', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
}


/************************TITRE DU PROJET**************************/
.project a {
  font-family: 'Zodiak', serif;
  font-weight: 500;
  font-size: 5.3em;
  letter-spacing: -0.04vw;
  text-transform: uppercase;
  text-decoration: none;
  color: black;
  margin-right: 0.3vw;
  -webkit-text-stroke: 0.015em black;
}


/****************************TÂCHES*******************************/
.task p {
  font-family: 'Switzer';
  font-weight: 400;
  font-size: 0.83em;
  color: black;
  margin: 0 0 -0.2vh 0;
  text-align: left;
}



/****************** HOVER : ANIMATION DES TEXTES ******************/

/*--------STYLE DE BASE---------*/
a.hover_animation {
  display: inline-block;
  text-decoration: none;
  font-style: normal;
  line-height: 1.2;
  color: black;
  opacity: 1;
  transition:
    color 0.8s ease,
    transform 0.3s ease,
    opacity 0.3s ease;
}

#section:has(a.hover_animation:hover) a.hover_animation {
  color: transparent;
  opacity: 0.7;
}

#section:has(a.hover_animation:hover) .top,
#section:has(a.hover_animation:hover) .task p {
  opacity: 0.7;
  color: black;
}

/*-------HOVER------------*/
#section .project:has(a.hover_animation:hover) .top,
#section .project:has(a.hover_animation:hover) .task p,
#section .project:has(a.hover_animation:hover) .client {
  opacity: 1;
  color: white;
  mix-blend-mode: difference;
  font-style: italic; 
  transition: font-style 0.1s ease; 
  font-weight: 300;
}

#section .project:has(a.hover_animation:hover) a.hover_animation:hover {
  opacity: 1;
  color: white;
  -webkit-text-stroke: white;
  mix-blend-mode: difference;
  transform: skewX(-10deg);
}


/******************ANIMATION IMAGES PROJETS**********************/
canvas{
    position: fixed;
    top: 0;
    left: 0;
    z-index: -50;
    opacity: 0.9;
}


/*///////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////*/

/*********************SMALL-DESKTOP********************/
@media (max-width: 1480px) {
  .top {
    font-size: 0.82em;
  }

  .project a {
    font-size: 4.6em;
  }
}

/*********************TABLETTE********************/
@media (max-width: 1280px) {

/*------LEGENDE-------*/
  .legende {
    top: 0.55vh;
    left: -2.4vw;
  }

/*------NONE-------*/
  .project .task {
      display: none;
  }

/*------INLINE----------*/
  .project .top p {
    display: inline-block;
  }

  .project a,
  .project .client {
    display: block;
  }

.categorie, .client {
  font-size: 1.25em;
    font-weight: 400;
}

  .center01 {
    margin-right: 0;
  }

  .center02 {
    margin-right: 0;
  }

/*------TOP-------*/
  .top {
    font-size: 0.9em;
  }

  .top p {
    margin: 0 0 0 0;
  }
}

/*********************MOBILE********************/
@media (max-width: 770px) {
    
#section {
  margin: 10vh 0 15vh;
  padding-bottom: 0;
}

/*------NONE-------*/
  .legende {
  display: none;
  }

/*------PROJET-------*/
.project {
  margin: 2.5vh 4vw 4.5vh 4vw;
}

.project a{
    font-size: 2.6em;
    line-height: 115%;
}

.categorie, .client {
  font-size: 1em;
}    
}