@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@100;300;400;700;800&display=swap');

  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;

      font-family: 'Be Vietnam Pro', sans-serif;
  }

  body {
      font-size: 110%;
      line-height: 105%;
      background-color: black;
  }

  /*  */

  ul,
  li {
      margin: 0;
      padding: 0;
      list-style: none;
  }

  .file-menu {
      display: none;
      width: auto;
      position: fixed;
      padding-top: 4px;

  }

  .menuGap {
      padding-top: 3.5vh;
  }

  .file-menu li a {
      color: black;
      text-decoration: none;
      padding: 8% 2% 4% 0px;
      font-weight: 300;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);

      display: block;
      transition: all 0.5s;
  }

  .file-menu li a:hover {
      /* padding: 3px 5px 4px 4px; */
      color: black;
      border-bottom: 1px solid black;
  }

  .trigger {
      cursor: ns-resize;
  }


  #custom-text-cursor {
      position: fixed;
      display: none;
      padding: 5px 10px;
      background-color: rgba(0, 0, 0, 0.8);
      color: white;
      border-radius: 5px;
      font-size: 14px;
      white-space: nowrap;
      z-index: 9999;
      pointer-events: none;
      transform: translate(-40px, -20px);
      transition: left 0.075s linear,
          /* Smooths horizontal movement */
          top 0.075s linear,
          /* Smooths vertical movement */
          opacity 0.2s ease-in-out,
          /* For fade in/out (see point 2) */
          background-color 0.2s ease-in-out;
  }



  .popup-overlay {
      /*Hides pop-up when there is no "active" class*/
      visibility: hidden;
      position: fixed;
      width: auto;
      height: auto;
      bottom: 5vh;
      z-index: 99;
  }

  .popup-overlay.active {
      /*displays pop-up when "active" class is present*/
      visibility: visible;
      color: white;
      background-color: rgba(0, 0, 0, 0.8);

      padding: 1.5%;
      font-weight: 200;
      transition: all 0.5s;
  }

  .popup-content {
      /*Hides pop-up content when there is no "active" class */
      visibility: hidden;
  }

  .popup-content.active {
      /*Shows pop-up content when "active" class is present */
      visibility: visible;

  }

  .popup-content a {
      cursor: pointer;

      color: white;
      display: block;
      margin-top: 4%;
      padding-bottom: 2%;
      font-size: 85%;
      border-bottom: solid 0.2px rgba(255, 255, 255, 0.262);
      transition: all 0.5s;
  }

  .popup-content a:hover {
      border-bottom: solid 0.2px rgba(255, 255, 255, 1);
  }

  .popup-content p {
      cursor: pointer;
      font-size: 75%;
      font-weight: 700;
      margin-bottom: 5%;
  }

  /*  */
  .whiteBG {
      background-color: white;
  }

  header {
      background-color: grey;

      grid-column: 1/1;
      padding-left: 2vw;

      font-size: 80%;
      font-weight: 800;
  }

  h1 {
      font-size: 200%;
      line-height: 120%;

      font-style: normal;
      font-weight: 700;
  }

  h2 {
      margin-bottom: 2%;

      font-size: 550%;
      line-height: 105%;
      font-weight: 700;
  }

  h3 {
      color: white;
      font-size: 90%;
      font-weight: 400;
      justify-self: end;
  }

  h4 {
      margin-bottom: 2%;
      font-size: 60%;
      font-weight: 600;
      color: black;
  }

  .caseH2 {
      font-weight: 200;
      font-size: 350%;
      grid-row: 3;
      grid-column: 1;
      align-self: end;
      color: black;
      padding: 2%;
  }

  .galleryYear,
  .galleryTitle,
  .galleryTag {
      color: white;
      filter: drop-shadow(2px 0 3px rgba(0, 0, 0, 0.7))
  }


  .galleryYear {
      justify-self: end;
      color: white;
      grid-row: 1;
      filter: drop-shadow(0 0 0 black)
  }

  .galleryTitle {
      font-weight: 700;
      font-size: 125%;

      grid-row: 2;
      color: white;
      align-self: end;
  }

  .galleryTag {
      font-weight: 300;
      font-size: 85%;
      color: white;
      grid-row: 3;
  }


  .yearGap {
      margin-top: 11vh;
      margin-right: 2%;
      z-index: 30;
  }

  /* homepage */

  /* */



  .homeText {
      color: white;

      grid-column: 2;
      grid-row: 2;

      font-size: 120%;
      line-height: 1.5em;

      font-weight: 200;
  }

  .email {
      grid-column: 1;

      font-size: 222%;
      line-height: 139%;

      color: white;
  }


  .homeH2 {
      grid-row: 2;
      grid-column: 1;

      font-size: 550%;
      line-height: 125%;
      font-weight: 700;
  }

  .homeH3 {
      color: black;
      font-size: 420%;
      font-weight: 700;
      justify-self: center;
      align-self: center;

      transition: all 0.2s;
  }

  .homeH3:hover {
      text-shadow: 2px 2px 2px rgb(196, 196, 196);
  }

  .homeList {
      grid-column: 1;
      grid-row: 2;
      align-self: end;
  }

  /* first section */

  .homeCover {
      position: absolute;
      z-index: 2;
      justify-self: end;
      align-self: center;
      border: white 1px solid;
  }

  .navL {
      grid-column: 1;
      z-index: 2;
      align-self: center;
  }

  .navM {
      align-self: center;
      justify-self: center;

      grid-column: 2/3;
      padding-left: 5vw;
      z-index: 1;
  }

  .navB {
      align-self: end;
      position: absolute;
      margin: 2vh;

  }

  .navB2 {
      font-weight: 300;
      font-size: 80%;
      grid-row: 3/3;
      grid-column: 2/3;
  }

  .bottomLine {
      border-bottom: rgba(255, 255, 255, 0.5) 1.5px solid;
      color: rgba(255, 255, 255, 0);
      transition: all 0.2s;
      width: 5vh;

      padding-bottom: 1%;
      font-weight: 100;
      font-size: 60%;
      cursor: pointer;

  }

  .bottomLine:hover {
      border-bottom: rgb(255, 255, 255, 0.9) 1.9px solid;
      width: 8vh;
      padding-bottom: 3%;
      color: white;
  }

  .navR {
      align-self: center;

      grid-column: 2;
      justify-self: right;

      z-index: 2;

  }

  .naviR {
      grid-column: 2;
  }

  .nav2 {
      align-self: end;
      font-size: 100%;
      z-index: 2;
  }



  /* Fading animation */
  .fade {
      animation-name: fade;
      animation-duration: 1.5s;
  }

  @keyframes fade {
      from {
          opacity: .4
      }

      to {
          opacity: 1
      }
  }

  .coverImage {
      font-size: 500%;
      padding-top: 20%;
      color: white;
  }

  .nav-container2 {
      width: 100vw;
      background-color: rgba(255, 255, 255, 0.8);
      border-bottom: white solid 1px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      padding: 1% 2%;

      position: fixed;

  }

  .nav-container {

      grid-row: 1;
      height: 28vh;
      margin: 1%;
      position: fixed;
      display: flex;
      flex-direction: column;
      row-gap: 10%;
      z-index: 25;
  }

  .nav-link {
      color: white;
      margin-right: 5px;

      font-weight: 100;
      font-size: 1em;
      line-height: 1.4em;

      transition: all 0.2s;
      cursor: pointer;
  }
  
  a {
      text-decoration: none;

  }

  a.active {
      font-weight: 700;
      cursor: default;

  }

  .navLogo:hover,
  .active:hover {
      filter: none;
  }

  .contact {
      justify-self: end;
      align-self: center;
      grid-column: 3/4;
      grid-row: 1;

      z-index: 3;
  }

  .ui-tooltip {
      color: white;
      z-index: 55;
  }


  .nav-linkB {
      color: black;

      margin-right: 5px;

      font-weight: 300;
      font-size: 1.2em;

      cursor: pointer;
      transition: all 0.2s;
  }

  .LnG {
      grid-column: 2;
  }


  .hoverLi {
      display: inline;
      float: left;

      margin-right: 9px;

      font-weight: 200;
      font-size: 1.2em;
  }

  .homeAG:hover {
      border-bottom: 0px solid rgba(0, 0, 0, 0);
      filter: drop-shadow(1px 1px 3px rgba(205, 205, 205, 0.887));
  }

  .nav-link:hover {
      filter: drop-shadow(2px 1px 5px white);
      /* border-bottom:0.1px white solid; */
  }

  .nav-linkB:hover,
  .arc:hover,
  .gal:hover {
      filter: drop-shadow(1px 1px 3px rgb(205, 205, 205));
  }

  .navLogo:hover,
  .active:hover {
      filter: none;
  }

  .detailGrid {
      color: white;
      font-size: 90%;
      line-height: 1.5em;
      font-weight: 200;


      position: fixed;
      margin-left: 55vw;
      margin-top: 63.5vh;

      display: flexbox;
      /* display: grid;
      grid-template-columns: 12% 40% 10% 1fr;
      grid-template-rows: 20% auto auto;
      row-gap: 2vh;
      column-gap: 1%; */
  }

  .projectName,
  #projectYear,
  #projectTag,
  #projectTools {
      font-weight: 500;
      display: inline;
  }

  /* .grouped{
    display: flexbox;
  } */
  .projectName {
      grid-column: 1;
      grid-row: 1;
  }

  #projectYear {
      grid-column: 3;
      grid-row: 1;
  }

  .itemYear {
      grid-column: 4;
      grid-row: 1;
  }

  #projectTag {
      grid-column: 1;
      grid-row: 2;
  }

  #projectTools {
      grid-column: 1;
      grid-row: 3;
  }

  .itemTools {
      grid-column: 2;
      grid-row: 3;
  }

  /* .descriptionListed {
      color: white;

      font-size: 110%;
      line-height: 1.5em;
      font-weight: 200;

      width: 48vw;
      height: 20vh;
      position: fixed;
      margin-left: 7%;
      padding-top: 25vh;

      z-index: 20;
  } */



  .imagePreview,
  .imageFilter {
      width: 55vw;
      height: 60vh;
      margin-left: 55vw;

      position: fixed;
      transition: all 0.2s;
  }

  .imagePreview {
      background-size: cover;

  }

  .imageFilter {
      z-index: 20;
      height: 100vh;
      opacity: 100%;

      background: black;
      transition: all 0.2s;

  }

  .year {
      color: aliceblue;
      background-color: black;
      width: 5vw;
      position: sticky;
      top: 60vh;
      margin-left: -5vw;

      margin-top: 10px;
      display: inline;
      float: left;
  }

  .imageLayerD {
      z-index: 1;
  }

  .imageLayerU {
      z-index: 5;
  }

  .projectPreview {
      grid-column: 2/4;
      grid-row: 2;

      height: auto;
  }

  .projectColor {
      background-color: none;

      display: grid;
      grid-template-rows: 10vw 90vw;

      grid-column: 1;
      grid-row: 2/4;

      padding: 2%;
      scroll-snap-align: end;
  }

  .projectDetail {
      color: white;

      grid-row: 3;
      grid-column: 2;
      padding: 7%;

      align-self: end;
  }

  .caseText {
      font-size: 70%;
      color: black;

      font-weight: 300;
      line-height: 1.4em;
  }

  .caseText2 {
      font-size: 95%;
      color: black;

      font-weight: 300;
      line-height: 1.5em;
      margin: 2vh 15vh 0 0;
  }

  .logogif {
      width: 10vw;
  }

  .imageCase {
      width: 50vw;
      height: 40%;
      object-fit: cover;
      margin-top: 2%;
  }

  .imageH {
      max-height: 40vh;
      height: auto;
  }

  .imageCaseCover {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  .projectBotNav h3 {
      margin-top: 10%;
      font-size: 280%;
  }

  .projectsEnd a {
      display: block;
      border-bottom: rgba(0, 0, 0, 0.2) 1.5px solid;
      font-weight: 200;
      margin-bottom: 2vh;
      padding-bottom: 1.5%;
      padding-left: 2;
      transition: all 0.5s;
  }

  .projectsEnd a:hover {
      border-bottom: black 1.5px solid;
      margin-left: 2vw;
  }

  .listSP {
      font-size: 90%;
      color: white;

      border-bottom: 1.5px white solid;

      padding: 2.5% 0% 2% 0%;
  }

  .projectDisplay1 {
      grid-row: 4;
      grid-column: 2/4;
      scroll-snap-align: start;
      padding-top: 10vh;
  }

  .projectDisplay2 {
      margin-top: 2%;
      grid-row: 5;
      grid-column: 2/4;
      width: 90%;
      scroll-snap-align: end;
  }

  .projectDisplay3 {
      margin-top: 15vh;
      grid-row: 6;
      grid-column: 2/4;
      scroll-snap-align: start;
  }


  .projectBotNav {
      grid-row: 7;
      grid-column: 1;
      margin-left: 2vw;
      align-self: end;
      padding-bottom: 5%;
  }


  .projectsEnd {
      grid-row: 7;
      grid-column: 2/4;
      align-self: center;
      scroll-snap-align: end;

  }

  .listedProjects {
      color: white;
      grid-column: 2;
      grid-row: 3;

      margin-right: 5%;
  }


  .listedTypes {
      align-self: center;
      grid-row: 2;
  }

  .titleText {
      font-weight: 500;
      font-size: 120%;
      border-bottom: white 1px solid;
      padding-bottom: 2%;
  }

  .inlineType {
      display: inline;
      float: right;
      color: rgb(78, 78, 78);

      font-weight: 300;
      font-size: 80%;
      margin-top: 2%;
      padding-right: 3%;
  }

  .listedText {
      font-size: 90%;
      color: white;

      border-bottom: 1px white solid;
      margin-right: 2%;
      padding: 2% 0% 2% 1%;

      scroll-snap-align: end;
  }


  .listedText:hover {
      border-bottom: 1px white solid;
      color: black;
      background-color: white;
      padding-left: 5px;

      transition: all 0.2s;
  }


  .listedType {
      font-size: 90%;
      color: black;
      border-bottom: 1.5px black solid;

      padding: 2.5% 0% 2% 0%;
      margin-right: 5%;
  }

  .greying {
      border-bottom: 1.5px rgb(56, 56, 56) solid;
      color: rgb(56, 56, 56);
  }


  .float {
      position: relative;
      color: white;
      z-index: 2;
  }

  .greyed {
      color: rgb(50, 50, 50);
  }

  .white {
      color: white;
  }

  .previewedProjects {
      grid-column: 3;
      grid-row: 1/3;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
  }


  .dimOff {
      opacity: 0%;
      pointer-events: none;
      background-color: black;
      grid-column: 3/4;
      grid-row: 1/3;
      filter: blur(20);

      z-index: 0;
  }

  .dim {
      opacity: 70%;
      z-index: 15;

  }

  .galleryLink {
      width: 33%;
      height: 49.8%;
  }

  .galleryImg1,
  .galleryImg2,
  .galleryImg3,
  .galleryImg4,
  .galleryImg5,
  .galleryImg6 {
      transition: all 0.4s;
      background-blend-mode: multiply;
      background-size: cover;
      background-position: center;

  }

  .galleryImg1 {
      background-image: url("ressources/casestudy/1_ml/ml4.png");
  }

  .galleryImg1:hover,
  .color1 {
      background-color: rgb(255, 179, 39);
  }

  .galleryImg2 {
      background-image: url("ressources/casestudy/2_chk/chk2.jpg");
  }

  .galleryImg2:hover,
  .color2 {
      background-color: rgb(204, 102, 255);
  }

  .galleryImg3 {
      background-image: url("ressources/archives/heya.png");
  }

  .galleryImg3:hover,
  .color3 {
      background-color: rgb(255, 77, 137);
  }

  .galleryImg4 {
      background-image: url("ressources/archives/orpheon.png");
  }

  .galleryImg4:hover,
  .color4 {
      background-color: rgb(178, 108, 94);
  }

  .galleryImg5 {
      background-image: url("ressources/casestudy/5_gdb/gdb4.jpeg");
  }

  .galleryImg5:hover,
  .color5 {
      background-color: rgb(255, 228, 0);
  }

  .galleryImg6 {
      background-image: url("ressources/GP_printemps.png");
  }

  .galleryImg6:hover,
  .color6 {
      background-color: rgb(119, 251, 37);
  }

  .galleryLink:hover {
      z-index: 25;
  }

  .galleryContainer {
      padding: 5%;

      opacity: 0;
      height: 100%;
      align-content: end;

      display: grid;
      grid-template-rows: 5% 55% 1fr 1fr;
      row-gap: 1.5%;

      z-index: 20;
      transition: all 0.45s;
      text-shadow: 2px 2px black;
  }

  .galleryContainer:hover {
      opacity: 100;
  }

  #grid-container {
      max-height: 100vh;
      display: grid;
      grid-template-rows: repeat(4, 100vh);
      position: relative;

      scroll-behavior: smooth;
      overflow: auto;
      scroll-snap-type: y mandatory;
  }

  .section {
      width: 100%;
      display: grid;
      grid-template-columns: 0.85fr 1fr;
      padding: 2.5%;
      scroll-snap-align: start;
      height: 100vh;

  }

  /*   
  .section1,
  .section2,
  .section3,
  .section4 {
  }
   */


  .section:nth-child(1) {
      grid-row: 1;
  }

  .section:nth-child(2) {
      grid-row: 2;
  }

  .section:nth-child(3) {
      background-color: white;
      grid-row: 3;
  }

  .section:nth-child(4) {
      background-color: white;
      grid-row: 4;
  }


  #grid-container2 {
      height: 100vh;
      display: grid;
      grid-template-columns: 7vw 45vw auto;
      grid-template-rows: 13vh 16vh auto;
  }

  .blockHide {
      background-color: black;
      width: 45vw;
      height: 8vh;
      position: fixed;
      margin-left: 7%;
      padding-top: 30vh;
      pointer-events: none;
  }

  #grid-container2G {
      height: 100vh;

      display: grid;
      grid-template-columns: 7vw 20vw 73vw;
      grid-template-rows: 10vh 90vh;
  }

  #grid-containerCase {
      height: 100vh;

      display: grid;
      grid-template-columns: 40vw 60vw;
      grid-template-rows: 10vh 60vh 30vh 100vh 90vh 80vh;
      position: relative;
      width: 100%;

      scroll-behavior: smooth;
      overflow: auto;
      scroll-snap-type: y mandatory;
  }

  .recent-news {
      width: 50%;
      grid-column: 1;
  }

  /* 1st section: left side */
  #main-section {
      width: 100vw;
      padding: 2%;

      display: grid;
      grid-template-columns: auto;
  }

  #main-article {
      border: black 3px solid;

      grid-column: 1/1;
      grid-row: 1/1;

      width: 100%;
      padding: 3%;

      display: grid;
      grid-template-columns: 40% 1fr;
      grid-template-rows: 9% 1fr;
      gap: 6%;
  }

  .main-title {
      grid-column: 1/3;
      grid-row: 1/1;
      justify-self: center;
  }

  #intro {
      grid-column: 1/2;
      grid-row: 2/2;
      align-self: flex-end;
  }

  .p2 {
      /* 2nd page: text size*/
      height: 45%;
      font-size: 75%;
  }

  /* static style */
  a {
      text-decoration: none;
      color: black;
  }

  .link {
      color: red;
  }


  /* interactive style */
  .hide {
      opacity: 0%;
      pointer-events: none;
      position: absolute;
  }

  .reveal {
      /* opacity: 0%; */
      opacity: 0%;
      z-index: 0;
      transition: all 0.2s;

  }

  /* text interactions */


  .fading {
      opacity: 0%;
  }

  .blur {
      color: white;
      filter: blur(4px);

      overflow: hidden;
      position: absolute;
  }


  /* text change hover interaction */
  .morph {
      display: inline;
  }

  .morph .afterM {
      display: none;
  }

  .morph:hover .beforeM {
      display: none;
  }

  .morph:hover .afterM {
      display: inline;
  }

  .textW {
      color: white;
  }

  .textB {
      color: black;
  }

  /* mouse interaction (archive) */



  /* + 1080px (more) */
  @media (min-width: 1080px) {
      body {
          font-size: 150%;
      }

      .imageCase {
          width: 44vw;
          height: 45vh;
          /* 
        object-fit: cover;
        margin-top: 2%; */
      }

      .imageCaseDouble {
          height: 35%;
      }

      .imageH {
          height: 90%;
      }

      .projectDisplay3 {
          margin-top: 25vh;
      }

      .nav-container {

          grid-template-columns: 4.5vw 1fr;
          padding: 1%;
      }

      h4,
      .casetext,
      .caseText2 {
          font-size: 125%;
      }

  }

  /* 800 to 1080px + */
  /* @media (max-width: 1080px) {

   
  } */

  /* < 1000px (less) */
  @media (max-width: 1000px) {

      .nav-container {

          grid-template-columns: 10.5vw 1fr;
      }

      h4,
      .caseText,
      .caseText2 {
          font-size: 170%;
      }

      .projectsEnd {
          font-size: 150%;
      }

      .imageCase {
          height: 30vh;
      }
  }

  /* < 600px (less) */
  @media (max-width: 600px) {

      /* index */

      #grid-container {
          grid-template-rows: repeat(3, 55vh) 40vh;
          scroll-snap-type: none;
      }

      .section {
          height: 100%;
      }

      .homeText {
          grid-column: 1/2;
          padding-top: 10vh;
          width: 90vw;
          font-size: 150%;
      }

      .homeH3 {
          font-size: 290%;
      }


      .navB2 {
          display: none;
      }

      .listedTypes {
          grid-column: 1/2;
          padding-top: 18vh;
          width: 90vw;
          font-size: 150%;
      }

      .navM {
          justify-self: center;
      }

      /* gallery */
      .nav-container {
          align-self: end;
          font-size: 350%;
          height: 20vh;
          grid-template-columns: 30% 1fr;
      }

      .LnG {
          grid-column: 2;
      }

      .navLogo {
          width: 50%;
      }


      #grid-container2G {
          height: 100vh;

          display: grid;
          grid-template-columns: 100vw;
          grid-template-rows: repeat(5, 6vh);
      }

      .previewedProjects {
          grid-column: 1;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-evenly;
      }

      .galleryLink {
          width: 100vw;
          height: 100%;
      }

      /* case studies */
      #grid-containerCase {
          grid-template-columns: 100vw;
          grid-template-rows: 7vh 60vh 30vh auto;
          scroll-snap-type: none;
      }

      .nav-container2 {
          padding: 2%;
      }

      .projectDisplay1,
      .projectDisplay2,
      .projectDisplay3,
      .projectPreview,
      .yearGap,
      .projectsEnd {
          grid-column: 1;

      }

      .projectPreview {
          grid-row: 2;
      }

      .projectColor,
      .yearGap {
          grid-row: 3;
          padding: 2%;
          margin: 0;
      }

      .projectDisplay1 {
          padding-top: 0;
          height: auto;
      }

      .projectDisplay2 {
          margin-top: 2%;
          height: 60vh;
          width: 100vw;
      }

      .projectDisplay3 {
          margin-top: 15vh;
      }

      .projectsEnd {
          grid-row: 8;
          padding: 5vh 1.5vh;
          margin-bottom: 15vh;
          font-size: 150%;
      }

      .projectBotNav {
          grid-row: 7;
      }

      .imageCase {
          width: 100vw;
          height: auto;
          margin-top: 0;
      }

      .caseText2 {
          margin-left: 8%;
          margin-bottom: 2%;
          font-size: 120%;
      }

      iframe {
          width: 100%;
          height: auto;
      }

      .homeText {
          font-size: 120%;
      }

      .homeh2 {
          font-size: 260%;
          padding-top: 14%;
          z-index: 1;
      }

      .homeH3 {
          font-size: 200%;
      }
  }