/*------------------------------ FOR ALL -----------------------------*/

@font-face {
    font-family: Denim-Regular;
    src: url(import/Denim-Regular.otf);
  }

  h1, h2, h3, h4, p {
    font-family: Denim-Regular;
    letter-spacing: -.02em;
    line-height: 107.8%;
  }

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

  /*a:hover {
    cursor: pointer;
  }*/

  body {
    height: 100vh;
    overflow: hidden;
  }
  
  header {
    min-height: 50px;

    z-index: 1;
    margin-inline: 1.15vw;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid black;
  }

  .header_links {
    display: flex;
    flex-direction: row;
  }

  .header_links h3 {
    padding-left: 1.15vw;
  }



  footer {
    min-height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .footerLines {
    width: 22%;
    margin: auto;
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
  }

  .line {
    height: 6px;
    width: 33%;
    border-radius: 6px;
    background-color: rgb(200,200,200);
  }

  .lineActive {
    height: 6px;
    width: 33%;
    border-radius: 6px;

    background-color: black;

  }

  hr {
    color:rgba(0,0,0,0.6) ;
  }

  h1 {
    font-size: 96px;
    z-index: 1;
  }

  h2 {
    font-size: 32px;
  }

  h3 /*crédits*/ {
    font-size: 20px;
  }

  h4 {
    font-size: 48px;
  }

  p, #gptText {
    font-size: 36px;
    font-family: Denim-Regular;
  }














/*------------------------------ LANDING PAGE (PART 1) -----------------------------*/


  main {
    padding-inline : 15px;
    height: calc(100% - 125px);
    display: flex;
    flex-direction: column;
  }

  .mainTitle {
    padding-block: 10px;
  }
  article {
    width: 90%;
    height: 30%;

    margin: auto;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    
  }

  #startButton {
    color: rgb(100,100,100);
    border: .05em solid rgb(100,100,100);
    background-color: rgba(255,255,255,0.5);

    padding-inline: 20px;
    padding-block: 10px;

    transition: 0.2s ease;
  }

  #startButton:hover {
    color: black;
    border: .05em solid black;
    transition: 0.2s ease;
  }








/*------------------------------ POP UP (PART 2) -----------------------------*/

   #popUp {
    width: 90vw;
    height: 86vh;

    position: absolute; 
    left: 0; 
    right: 0;
    top: 0;
    bottom: 0;
    margin-inline: auto;
    margin-block: auto;

    background-color: white;
    border: 0.08em solid black;

    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;

    -webkit-box-shadow: 0px 0px 40px 30px rgba(0,0,0,0.07);
    -moz-box-shadow: 0px 0px 40px 30px rgba(0,0,0,0.07);
    box-shadow: 0px 0px 40px 30px rgba(0,0,0,0.07);

    display: flex;
    flex-direction: column;
   }

   #popUpClickZone1 {
    width: 70vw;
    height: 86vh;

    background-color: red;

    position: absolute; 
    left: 0; 
    right: 0;
    top: 0;
    bottom: 0;
    margin-inline: auto;
    margin-block: auto;

    pointer-events: none;
    z-index: 45;
   }

   #popUpClickZone2 {
    width: 90vw;
    height: 73vh;

    background-color: red;

    position: absolute; 
    left: 0; 
    right: 0;
    top: -12vh;
    bottom: 0;
    margin-inline: auto;

    pointer-events: none;
    z-index: 45;
   }

   #popUpHeader {
    width: 98%;
    height: 12%;
    margin-inline: auto;
    border-bottom: 0.08em solid black;

    display: flex;
    justify-content: center;
    align-items: center;
   }

   #popUpMain {
    display: flex;
    height: 78%;
    margin: 3%;
  }

  #popUpVisual {
    height: 100%;
    aspect-ratio: 1/1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-row-gap: 2%;
    grid-column-gap: 6%;
    }

  .popUpGrid {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 0.7fr;
    grid-gap: 3%;

  }

  .popUpGrid > h3 {
    grid-area: 4 / 1 / 4 / 4;
    justify-self: center;
    align-items: center;
  }

  .popUpGrid > img {
    width: 90%;
    margin: auto;
  }

  #popUpText {
    margin-left: 5%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  #popUpCloseButton {
    align-self: flex-end;

    cursor: pointer;
    text-decoration: underline;
    text-decoration-thickness: .08em;
    text-underline-offset: .15em;
   }











/*------------------------------ CUBE INTERACTION (PART 3) -----------------------------*/


  #part3 {
    width: 100%;
    height: calc(100% - 125px);
    display: grid;
    grid-template-columns: 1fr 1fr;

    pointer-events: none;
  }

  #p5script {
    margin-block: 2%;
    color: rgb(200,200,200);
  }

  #p5script a, #textPart a, #randomButton {
    margin-inline: 1.15vw;

    cursor: pointer;
    color: rgb(100,100,100);
    border: .05em solid rgb(100,100,100);
    padding-inline: 10px;
    padding-block: 5px;

    transition: 0.2s ease;
  }

  #p5script a:hover, #textPart a:hover, #randomButton:hover {
    color: black;
    border: .05em solid black;

    transition: 0.2s ease;
  }

  canvas {
    display: block;
    position: absolute;
    top: 55px;
    left: -50px;

    z-index: -10;
  }

  #textPart {
    /*border-left: .05em solid black;*/
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-block: 2%;
  }

  #textPart h3 {
    align-self: flex-end;
  }

   #facesQuestions {
    height: 90%;
    width: 100%;

    display: flex;
    justify-content: space-around;
    flex-direction: column;
   }

    #face1, #face2, #face2, #face3, #face4, #face5, #face6, #face7, #face8 {
      width: 70%;
      height: 50%;
      margin-inline: auto;
      display: none;
      flex-direction: column;
      text-align: center;
    }

    #face0 {
      width: 70%;
      height: 50%;
      margin-inline: auto;
      display: flex;
      flex-direction: column;
      text-align: center;
    }

    #question0, #question1, #question2, #question3, #question4, #question5, #question6, #question7, #question8 {
      width: 100%;
      height: 55%;
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }

    #questionsAnswers0, #questionsAnswers1, #questionsAnswers2, #questionsAnswers3, #questionsAnswers4, 
    #questionsAnswers5, #questionsAnswers6, #questionsAnswers7, #questionsAnswers8 {
      color: rgb(200,200,200);
      margin-top: 3%;
      padding-top: 2%;
      border-top: 1px solid black;
    }

    #face0Answer0, #face0Answer1, #face0Answer2, #face0Answer3, #face0Answer4, #face0Answer5, #face0Answer6, #face0Answer7, #face0Answer8,
    #face1Answer0, #face1Answer1, #face1Answer2, #face1Answer3, #face1Answer4, #face1Answer5, #face1Answer6, #face1Answer7, #face1Answer8,
    #face2Answer0, #face2Answer1, #face2Answer2, #face2Answer3, #face2Answer4, #face2Answer5, #face2Answer6, #face2Answer7, #face2Answer8,
    #face3Answer0, #face3Answer1, #face3Answer2, #face3Answer3, #face3Answer4, #face3Answer5, #face3Answer6, #face3Answer7, #face3Answer8,
    #face4Answer0, #face4Answer1, #face4Answer2, #face4Answer3, #face4Answer4, #face4Answer5, #face4Answer6, #face4Answer7, #face4Answer8,
    #face5Answer0, #face5Answer1, #face5Answer2, #face5Answer3, #face5Answer4, #face5Answer5, #face5Answer6, #face5Answer7, #face5Answer8,
    #face6Answer0, #face6Answer1, #face6Answer2, #face6Answer3, #face6Answer4, #face6Answer5, #face6Answer6, #face6Answer7, #face6Answer8,
    #face7Answer0, #face7Answer1, #face7Answer2, #face7Answer3, #face7Answer4, #face7Answer5, #face7Answer6, #face7Answer7, #face7Answer8,
    #face8Answer0, #face8Answer1, #face8Answer2, #face8Answer3, #face8Answer4, #face8Answer5, #face8Answer6, #face8Answer7, #face8Answer8 {
      display: none;
    }


    #answerValidation {
      display: block;

      width: auto;
      text-align: center;
      margin-inline: auto;

      color: rgb(200,200,200);

      text-decoration: underline;
      text-decoration-thickness: .2em;
      text-underline-offset: .35em;
    }

    #finalValidation {
      display: none;

      width: auto;
      text-align: center;
      margin-inline: auto;

      color: rgb(200,200,200);

      text-decoration: underline;
      text-decoration-thickness: .2em;
      text-underline-offset: .35em;
    }


   #questionsFooter {
    width: 60%;
    margin-inline: auto;
    display: flex;
    justify-self: flex-end;
   }

   #previousButton {
    width: 15%;
    display: flex;
    justify-content: flex-end;

    padding-bottom: 0.5%;

    color: rgb(200,200,200);
   }

   #nextButton {
    width: 15%;
    display: flex;
    justify-content: flex-start;
    cursor: default;

    padding-bottom: 0.5%;

    color: rgb(200,200,200);
   }

   #questionsBullets {
    width: 55%;
    margin: auto;
    display: flex;
    justify-content: space-between;
   }

   .squareUnselected {
    height: 15px;
    width: 16px;

    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;

    border: 0.07em solid rgb(180,180,180);
   }

   .squareActive {
    height: 15px;
    width: 16px;

    background-color: black;
   }

   .squareSelected {
    height: 15px;
    width: 16px;

    background-color: rgb(180,180,180);
   }












/*------------------------------ VALIDATION PAGE (PART 4) -----------------------------*/


  #part4 {
    width: 80%;
    height: calc(100% - 125px);
    margin-inline: auto;
    display: none;
    flex-direction: column;
    justify-content: center;
    text-align: center;

  }

  #validationButtons {
    width: auto;
    height: 13%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    margin-inline: auto;
    margin-top: 5%;
    display: flex;
  }

  #validationButtons > h3 {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-thickness: .08em;
    text-underline-offset: .15em;
  }

  #resultButton {
    padding-inline: 20px;
    padding-block: 10px;
  }

  .resultButtonValid {
    color: rgb(100,100,100);
    border: .05em solid rgb(100,100,100);
    cursor: pointer;

    transition: 0.5s ease;
  }

  .resultButtonValid:hover {
    color: black;
    border: .05em solid black;

    transition: 0.3s ease;
  }

  .resultButtonUnvalid {
    color: rgb(200,200,200);
    border: .05em solid rgb(200,200,200);
    cursor: default;

    transition: 0.3s ease;
  }


  #nameInput {
    width: auto;
    all: unset;

    margin-top: 0.5%;
    border-bottom: 2px solid black;

    font-family: Denim-Regular;
    letter-spacing: -.02em;
    line-height: 107.8%;
    font-size: 36px;
  }












/*------------------------------ RESULT PAGE (PART 5) -----------------------------*/

#part5 {
  height: calc(100% - 125px);
  width: 100%;

  display: grid;
  grid-template-columns: 1fr 1fr;
}

#visualResult {
  width: 35vw;
  height: 35vw;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 7%;
  margin-block: auto;
  margin-left: 15%;
  background-color: rgb(250,250,250);
}

img {
  width: 100%;
  height: auto;
  border: 1px solid black;
}

#textResult {
  height: 30vw;

  margin-block: auto;
  padding-inline: 10%;
}

#gptText {
  height: 80%;
  overflow: hidden;
}

#endingButtons {
  height: 20%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: end;
  justify-items: start;
  gap: 5%;
}

#endingButtons p {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .15em;
}

#invisibleFaces {
  display: none;
}