@font-face {
  font-family: 'dincond';
  src: url(fonts/DINCond-Bold\ Regular.otf)
}
@font-face {
  font-family: 'dincondblack';
  src: url(fonts/DINCond-Black\ Regular.otf)
}

/* FOR BIG SCREENS (ECRAN DE LAPTOP) */

html {
  scroll-behavior: smooth;
  size: 20%;
}

body {
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  overflow: auto;


}

/* Header Things */
.header {
  display: flex;
  top: 0;
  text-align: center;
  background-color: white;
  /* box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; */
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
    rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  padding-bottom: 10px;
  padding-top: 10px;
  z-index: 1;
  position: sticky;
}

.headerlogo {
  /* width: 20vh; */
  width: 9rem;
  margin-bottom: 0;
  padding-top: 0px;
  padding-bottom: 0px;
}

.troubleshootingTitle {
  font-family: "dincond", "Helvetica", "Arial";

  font-size: 1.3rem;

  text-align: center;
  color: rgb(12, 188, 65);

  margin: 0px;
  text-decoration: none;

  padding-left: 0px;
  padding-right: 0px;
  margin-left: auto;
  margin-right: auto;
}

.noDecoration {
  text-decoration: none;
}
.headerdiv {
  flex: 1;
  font-family: "Roboto","Helvetica","Arial";
  font-size: 0.9rem;
  margin: auto;
}
.backToMain {
  display: inline-block;
  text-decoration: none;

  color: grey;
  transition: 0.3s;
  margin-top: 0px;
  margin-bottom: 0px;
}
.backToMain:hover {
  color: rgb(37, 37, 39);
}

.backtomaintext {
  margin: 0vw;
  display: inline-block;
}

.invisible {
  opacity: 0%;
}

/* Main Page Section things */
.page {
  min-height: 100vh;
  /* background: linear-gradient(
    0deg,
    rgb(13, 230, 78) 0%,
    rgb(22, 143, 17) 50%,
    rgb(17, 223, 17) 100%
  ); */

  /* background-image: linear-gradient(-60deg, #36a016 0%, #4eb30c 100%); */

  background-image: linear-gradient(
    90deg,
    rgb(16, 185, 129),
    rgb(126, 199, 24)
  );

  

  /* Pour enlever le bug du extra space du footer */
/* min-height: 75vh; */
  /* background-image: url(/images/gabriel03.JPG); */
}
.question {
  padding-bottom: 0rem;
  color: white;
  font-size: 2.5rem;
  text-shadow: 0px 5px 15px rgba(0, 0, 0, 0.623);
  padding-top: 3rem;
  
  margin-top: 0;

  text-align: center;
  font-family: "dincond","Helvetica","Arial";

  animation-name: slideToLeft;
  animation-duration: 0.3s;
}

.divGuideLettre{text-align: center;
margin-top: 0rem;
margin-bottom: 1rem;}

.imgGuideLettre{
  width: 25rem;
  height: auto;

  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.479);
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  border: 5px solid #ffffff;
  animation-name: slideUp;
  animation-duration: 0.5s;
 margin-bottom: 2rem;
}

/* Rappetisser le scale des petites /images de mauvaise qualite venant du pdf */
.imgGuideLettre2{
  width: 15rem;
  height: auto;

  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.479);

  margin-bottom: 1rem;
  border: 5px solid #ffffff;
  animation-name: slideUp;
  animation-duration: 0.5s;

}

/* Plus gros */
.imgGuideLettre3{
  width: 40rem;
  height: auto;

  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.479);

  margin-bottom: 1rem;
  border: 5px solid #ffffff;
  animation-name: slideUp;
  animation-duration: 0.5s;

}

.explanationLink {
  display:inline-block;
  color: white;
  font-size: 1.3rem;
  text-shadow: rgba(0, 0, 0, 0.479) 0px 3px 8px;
  margin-left: 10vw;
  margin-right: 10vw;
  text-align: center;
  font-family: "Roboto","Helvetica","Arial";
  /* temporaire avant de mettre un lien */
  text-decoration: underline;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  transition: 0.3s;
  animation-name: slideToRight;
  animation-duration: 0.3s;
}



.explanationLink:hover {
  color: rgb(37, 37, 39);
}

/* Sections Options (Cartes) V2 */

.optionsV2 {
  margin-top: 5rem;
  /* margin-left: 25vw;
  margin-right: 25vw; */
  padding-bottom: 5rem;

  margin-left: 3vw;
  margin-right: 3vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

}
.uneCarte {
  /* background-color: white;
  border-radius: 20px; */
  /* margin-left: 25vw;
  margin-right: 25vw; */
  /* padding-top: 1rem;
  padding-bottom: 1rem; */
  /* box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.479); */
  /* transition: 0.3s;
  animation-name: slideUp;
  animation-duration: 0.5s; */
}

/* .uneCarte:hover {
  transform: translateY(-20px) scale(1.05);

  filter: brightness(1.05);
} */
.lienCarte {
  text-decoration: none;
  display: inline-block;
  background-color: white;
  border-radius: 20px;
  /*Changerlewidthprfairefitterplusdecartesoupas*/width: 25vw;
  padding-top: 1rem;
  padding-bottom: 1rem;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.479);
  transition: 0.3s;
  animation-name: slideUp;
  animation-duration: 0.5s;
  margin-left: 2vw;
  margin-right: 2vw;
  margin-bottom: 3vw;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
}

/* Pour faire fitter plus de carte en une ligne horizontale */

.lienCarte2 {
  text-decoration: none;
  display: inline-block;
  background-color: white;
  border-radius: 20px;
  /* Changer le width pr faire fitter plus de cartes ou pas */
width: 19vw;
  padding-top: 1rem;
  padding-bottom: 1rem;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.479);
  transition: 0.3s;
  animation-name: slideUp;
  animation-duration: 0.5s;

  margin-left: 2vw;
  margin-right: 2vw;
  margin-bottom: 3vw;
}

.lienCarte:hover {
  transform: translateY(-20px) scale(1.05);

}

.lienCarte2:hover {
  transform: translateY(-20px) scale(1.05);

  filter: brightness(1.05);
}

.contenuCarte {
  text-align: center;
  margin-left: 10%;
  margin-right: 10%;
  font-family: "dincond","Helvetica","Arial";
  font-size: 2rem;
}
.texteCarte {
  font-family: "dincond","Helvetica","Arial";
  font-size: 1.8rem;
  color: rgb(37, 37, 39);
}
.imageCarte {
  max-width: 100%;
  max-height: 100%;
  margin-bottom: 1rem;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
}

.espaceEntreCartes {
  padding-top: 10vh;
}

.emptySpace{font-size: 20vh; opacity: 0%; padding: 0; margin: 0;}

/* Section Options (Cartes) V1 */

/* .sectionOptions {
  margin-top: 3vh;
  margin-bottom: 20vh;

  transition: 0.3s;
}

.optionstext {
  text-align: center;

   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

  font-family: "dincond";
  font-size: 2.5rem;
  color: rgb(37, 37, 39);
}
.options {
  margin-bottom: 10vh;
  padding-top: 2vh;
  padding-bottom: 2vh;
  margin-left: 15vw;
  margin-right: 15vw;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 20px;
  transition: 0.3s;
  display: flex;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  animation-name: slideUp;
  animation-duration: 0.5s;
}
.options:hover {
  transform: translateY(-20px);
  transform: scale(1.05);
  filter: brightness(1.1);
}

.carte {
  display: flexbox;
  margin-left: auto;
  margin-right: auto;
}
.contenuDeCarte {
  flex: 1;
  margin-left: auto;
  margin-right: auto;
}

.photoOuVideo {
  margin-right: auto;
  padding-left: auto;
}  */

/* Footer Things */

.footer {
  display: flex;
  text-align: center;
  margin-top: 4vh;
  margin-bottom: 3vh;
  margin-left: 3vw;
  margin-right: 3vw;

  background-color: white;
  /* box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; */

  bottom: 0;

}

.subfoot {
  flex: 1;
}

.icons {
  height: 1.8rem;
  /* margin-top: 2vh; */
}

.icons:hover {
  filter: opacity(0.6);
}

.end {
  margin-top: 1.5vh;
  margin-bottom: 1.5vh;
  margin-left: 3vw;
  margin-right: 3vw;

  display: flex;
  text-align: center;
  font-family: "Roboto","Helvetica","Arial";
  color: rgb(37, 37, 39);
}

.littleText {
  flex: 1;
  font-size: 0.8rem;

  font-family: "Roboto","Helvetica","Arial";
  color: grey;
  text-decoration: none;
}
.credits {
  text-decoration: none;
  font-family: "Roboto","Helvetica","Arial";
  color: grey;
}
.iconlink {
  text-decoration: none;
}

.footertext {
  font-family: "dincond","Helvetica","Arial";;
  font-size: 1.3rem;
  text-align: center;
  color: rgb(12, 188, 65);
  padding: 0;
  padding: 0;
  margin: 0px;
}
/* Copyright Greensolv */
.copyText {
  font-family: "Roboto","Helvetica","Arial";
  color: rgb(12, 188, 65);
}
/* Text back to last page */
.linkbacktolast {
  display: inline-block;
  margin-top: 3vh;
  margin-bottom: 0px;
  margin-left: 4vw;

  font-size: 1.5rem;
  font-family: "dincond","Helvetica","Arial";;
  text-decoration: underline;
  color: white;
  text-shadow: rgba(0, 0, 0, 0.479) 0px 3px 8px;
  transition: 0.3s;
}
.linkbacktolast:hover {
  color: rgb(37, 37, 39);
}

.textbacktolast {
  margin-top: 0;
  margin-bottom: 0;
}

.explicationTitle {
  font-family: "dincond", "Helvetica", "Arial";
  font-size: 2rem;
  color: rgb(12, 188, 65);
  padding: 0;
  margin: 0;
  text-align: center;
  margin-bottom: 3rem;
}
.explication {
  color: white;
  background-color: rgb(37, 37, 39);
  font-size: 1.3rem;
  text-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  padding-left: 2vw;
  text-align:left;
  font-family: "Roboto","Helvetica","Arial";
  padding-bottom: 15vh;
  padding-top: 15vh;
  padding-left: 20vw;
  padding-right: 20vw;
}

/* Texte centrée */
.explication2 {
  color: white;
  background-color: rgb(37, 37, 39);
  font-size: 1.3rem;
  text-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  padding-left: 2vw;
  text-align:center;
  font-family: "Roboto","Helvetica","Arial";
  padding-bottom: 15vh;
  padding-top: 15vh;
  padding-left: 20vw;
  padding-right: 20vw;
}

.photosExplications {
  margin-top: 5vh;
  margin-bottom: 0vh;
}
.classePhoto {
  flex: 1;
  margin-left: 10vw;
  margin-right: 10vw;
  align-items: center;
}

.photoEnBas {
  width: 100%;
  height: auto;
}

/* Trucs pour video youtube */



.iframe-container{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
}
.iframe-container iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;

  
}

/* Youtube Video Container (Contains the iFrame)( */
/* Ce qui permet a la video youtube de pas prendre toute la largeur de l'espace */
.youtubeVid{
  /* margin-left: 20vw;
  margin-right: 20vw; */
  margin-top: 3rem;
  margin-bottom: 3rem;
}
/* Youtube vid at the end */
.youtubeVid2{margin-top: 3rem;
  margin-bottom: rem;
margin-left: 25vw;
margin-right: 25vw;
border: 5px solid #ffffff;
}




/* Keyframes for animations, goDown, gotop*/

@keyframes slideUp {
  from {
    transform: translateY(50%);
    opacity: 0%;
  }

  to {
    transform: translateY(0%);
    opacity: 100%;
  }
}

@keyframes slideToLeft {
  from {
    transform: translatex(10%);
    opacity: 0%;
  }

  to {
    transform: translateX(0%);
    opacity: 100%;
  }
}

@keyframes slideToRight {
  from {
    transform: translatex(-10%);
    opacity: 0%;
  }

  to {
    transform: translateX(0%);
    opacity: 100%;
  }
}

#linkDown {
  scroll-margin-top: 7.5rem;
  text-align: center;
}

.arrow {
  display: inline-block;

  position: fixed;
  bottom: 0vw;
  right: 4vw;
  font-family: "Noto Emoji";
  font-size: 3rem;
  text-decoration: none;  color: rgb(12, 188, 65);
  -webkit-text-stroke: 0.15rem white;
  text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1),
    0px 18px 23px rgba(0, 0, 0, 0.1);
  transition: 0.1s;
}
.arrow:hover {
  color: rgb(7, 126, 43);
  transform: translateY(-5px);
}

/* Start Page Things */

.zonepage {
  margin-top: 0;
  background-image: url(/images/gabriel03.JPG);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}
.startlink {
  font-family: "dincond","Helvetica","Arial";
  font-size: 3rem;


  color: rgb(12, 188, 65);
  background-color: white;
  text-decoration: none;
  display: inline-block;
  background-color: white;
  border-radius: 20px;
  padding-top: 2rem;
  padding-bottom: 2rem;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.69);
  transition: 0.3s;
  animation-name: slideUp;
  animation-duration: 0.5s;
}

.startlink:hover {
  transform: scale(1.05);
  filter: brightness(1.05);
  -webkit-filter: brightness(1.05);
}

.starttext {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 5vw;
  margin-right: 5vw;
}

.videTop {
  height: 30vh;
}

.videBot {
  height: 30vh;
}

.explicationVide {
  height: 10vh;
}

.divstart {
  text-align: center;
}

/* MEDIA QUERIES STUFF */

@media (max-width: 1500px){
  .lienCarte{width: 25vw;}
  .lienCarte2{width: 25vw;}
}

@media (max-width: 1000px) {
  .optionsV2 {
    margin-left: 5vw;
    margin-right: 5vw;

    
  }
.lienCarte{width: 30vw;}
.lienCarte2{width: 30vw;}

/* .page{padding-left: 5vw; padding-right: 5vw;} */
  .startlink{font-size: 1.8rem;}

  .question{padding-left: 5vw; padding-right: 5vw;}
  .explicationTitle{font-size: rem;}
.explication{
  padding-left: 5vw;
  padding-right: 5vw;
}
.explication2{
  padding-left: 5vw;
  padding-right: 5vw;
}
}

@media (max-width: 800px){
  .lienCarte{width: 100%;}
  .lienCarte2{width: 100%;}
}


@media (max-width: 600px) {
  .startlink {
    font-size: 1.2rem;
  }
  .headerdiv {
    font-size: 0.8rem;
  }
  .footertext {
    font-size: 1rem;
  }
  .icons {
    /* margin-top: 4vh; */
    height: 1.5rem;
  }
  .zonepage {
    margin-top: 0;
    background-image: url(/images/gabriel03.JPG);
    background-repeat: no-repeat;
    background-attachment: initial;
    background-size: cover;
    background-position: center;
  }
  .textbacktolast {
    font-size: 1.5rem;
  }

  .question {
    font-size: 2rem;
    

    flex: inline;
    flex-wrap: none;
  }

  .optionsV2 {
    margin-top: 7vh;
  }

  

  .texteCarte {
    font-size: 1.5rem;
  }
  .contenuCarte {
    margin-left: 5vw;
    margin-right: 5vw;
  }

  .espaceEntreCartes{
    padding-top: 5vh;
  }
  .explanationLink {
    font-size: 1.2rem;
  }
  .explication {
    font-size: 1.2rem;
  }
  .instructions {
    padding-left: 10vw;
    padding-right: 10vw;
  }
  .explicationTitle {
    font-size: 1.5rem;
    margin-left: 10vw;
    margin-right: 10vw;
  }
  .classePhoto {
    margin-left: 5vw;
    margin-right: 5vw;
  }
  .headerdiv {
    font-size: 0.8rem;
    margin: auto;
  }
  .backtomaintext {
    margin: 5vw;
    display: inline-block;
  }
}





@media (max-width: 300px) {
  .question {
    font-size: 1.5rem;
    margin-left: 5vw;
    margin-right: 5vw;
   }
  .startlink {
    font-size: 1rem;
  }
  .footertext{font-size: 1rem;}

  /* Changement de font pcq je suis oblige pour que le troubleshooting title change de size */
  .troubleshootingTitle{font-family:"Helvetica"; font-size: 1rem;}

}

@media (orientation : portrait){

  .arrow:hover{ transform: translateY(0px); color: rgb(12, 188, 65); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px);
}
.imgGuideLettre{
  width: 80%;
}
.imgGuideLettre3{
  width: 80%;
}

.youtubeVid{
  margin-left: 5vw;
  margin-right: 5vw;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.youtubeVid2{
  margin-left: 5vw;
  margin-right: 5vw;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}


.question{padding-bottom: 3rem;}

.explication{padding-top: 3rem; padding-bottom: 3rem;}
.explicationTitle{margin: 0;}

}