@font-face {
    font-family: "Diabolik-Regular-VF";
    src: url(Variable-TT/Diabolik-Regular-VF.ttf) format(truetype);
}

html, body {
	padding: 0;
	margin: 0;
	background-color: black;
  overflow-x: hidden;
}

.page1{
  background-color: #f24005;
  padding: 0.5vh;
  z-index: 1;
}

.nav1{
	text-align: center;
	font-size: 3vh;
	font-family: "Diabolik-Regular-VF";
  color: black;
  border-bottom: 2px solid black;
  margin: 2vh 10vh 3vh 10vh;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 22vh;
}

.titre {
  font-size: 35vh;
  font-family: "Diabolik-Regular-VF";
  color: black;
  text-align: center;
  margin-top: 54vh;
  animation: 2.5s infinite alternate linear mouvTitre;
  }

@keyframes mouvTitre {
  from {
    font-variation-settings: 'wght' 400, 'CNTR' 0; 
  }

  to {
    font-variation-settings: 'wght' 900, 'CNTR' 0;
  }
}

.nav2{
	text-align: center;
	font-size: 3vh;
	font-family: "Diabolik-Regular-VF";
  color: whitesmoke;
  border-bottom: 2px solid whitesmoke;
  margin: 3vh 10vh 3vh 10vh;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 22vh;
}
span{
  padding-bottom: 0.8vh;
}
.description{
  color:#f24005;
}
.hover-title{
  font-size: 7vh;
	font-family: "Diabolik-Regular-VF";
  font-variation-settings: 'wght' 400, 'CNTR' 100;
  color: whitesmoke;
  margin-left: 55vh;
  padding-bottom: 2vh;
  width: 140vh;
}
.hover-title2{
  font-size: 7vh;
	font-family: "Diabolik-Regular-VF";
  font-variation-settings: 'wght' 400, 'CNTR' 100;
  color: whitesmoke;
  margin-left: 55vh;
  padding-bottom: 15vh;
  width: 140vh;
}
.hover-title3{
  font-size: 7vh;
	font-family: "Diabolik-Regular-VF";
  font-variation-settings: 'wght' 400, 'CNTR' 100;
  color: whitesmoke;
  margin-left: 55vh;
  padding-top: 10vh;
  width: 140vh;
}

.hover-image {
  display: none;
}

body:not(.mobile) .hover-title:hover+.hover-image{
  display: flex;
}
body:not(.mobile) .hover-title2:hover+.hover-image{
  display: flex;
}
body:not(.mobile) .hover-title3:hover+.hover-image{
  display: flex;
}

.hover-image {
  position: fixed;
  top: 50%;
  left: 15%;
  transform: translate(-50%, -50%);
  z-index: 0;
  flex-direction: column;
  /* Change width and height to scale images */
  width: 20%;
  height: auto;
}




.nav3{
	text-align: center;
	font-size: 3vh;
	font-family: "Diabolik-Regular-VF";
  color: whitesmoke;
  border-bottom: 2px solid whitesmoke;
  margin: 3vh 10vh 3vh 10vh;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 22vh;
}

.graisse{
  font-size: 25vh;
  text-align: center;
	font-family: "Diabolik-Regular-VF";
  color: whitesmoke;
  margin-top: 25vh;
}

#G{
  font-variation-settings: 'wght' 400, 'CNTR' 0;
}
#r{
  font-variation-settings: 'wght' 485, 'CNTR' 0;
}
#a{
  font-variation-settings: 'wght' 570, 'CNTR' 0;
}
#i{
  font-variation-settings: 'wght' 655, 'CNTR' 0;
}
#s{
  font-variation-settings: 'wght' 740, 'CNTR' 0;
}
#s2{
  font-variation-settings: 'wght' 825, 'CNTR' 0;
}
#e{
  font-variation-settings: 'wght' 900, 'CNTR' 0;
}

.valeur1{
  font-size: 3vh;
  text-align: center;
	font-family: "Diabolik-Regular-VF";
  color: #f24005;
  margin-top: -3.5vh;
  margin-left: 7vh;
}

#val{
  padding-right: 4.5vh;
}

.variable{
  font-size: 25vh;
  text-align: center;
	font-family: "Diabolik-Regular-VF";
  color: whitesmoke;

}

#V{
  font-variation-settings: 'wght' 900, 'CNTR' 100;
}
#a2{
  font-variation-settings: 'wght' 820, 'CNTR' 100;
}
#r2{
  font-variation-settings: 'wght' 750, 'CNTR' 100;
}
#i2{
  font-variation-settings: 'wght' 680, 'CNTR' 100;
}
#a3{
  font-variation-settings: 'wght' 610, 'CNTR' 100;
}
#b{
  font-variation-settings: 'wght' 540, 'CNTR' 100;
}
#l{
  font-variation-settings: 'wght' 470, 'CNTR' 100;
}
#e2{
  font-variation-settings: 'wght' 400, 'CNTR' 100;
}

.valeur2{
  font-size: 3vh;
  text-align: center;
	font-family: "Diabolik-Regular-VF";
  color: #f24005;
  margin-top: -3.5vh;
  margin-left: 7vh;
  margin-bottom: 20vh;
}

.page4{
  background-color: whitesmoke;
  padding: 0.5vh;
  z-index: 1;
}

.nav4{
	text-align: center;
	font-size: 3vh;
	font-family: "Diabolik-Regular-VF";
  color: black;
  border-bottom: 2px solid black;
  margin: 3vh 10vh 3vh 10vh;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 22vh;
}

.set1{
  font-size: 12vh;
	font-family: "Diabolik-Regular-VF";
  color: black;
  margin: -15vh 10vh 5vh 40vh;
  border-bottom: 3px solid black;
  font-variation-settings: 'wght' 400, 'CNTR' 0;
  transition: font-variation-settings 1s ease-out;
}
.set1:hover{
  font-variation-settings: 'wght' 400, 'CNTR' 100;
  transition: font-variation-settings 1s ease-in;
}
.indic1{
  font-size: 2vh;
	font-family: "Diabolik-Regular-VF";
  color: black;
  margin-left: 15vh;
  margin-top: 15vh;
}
#titre-indic{
  font-size: 3vh;
  color: #f24005;
}

.indic2{
  font-size: 2vh;
	font-family: "Diabolik-Regular-VF";
  color: black;
  margin-left: 15vh;
  margin-top: 15vh;
}
.set2{
  font-size: 12vh;
	font-family: "Diabolik-Regular-VF";
  color: black;
  margin: -15vh 10vh 7vh 40vh;
  padding-bottom: 3vh;
  border-bottom: 3px solid black;
  font-variation-settings: 'wght' 400, 'CNTR' 0;
  transition: font-variation-settings 1s ease-out;
}
.set2:hover{
  font-variation-settings: 'wght' 400, 'CNTR' 100;
  transition: font-variation-settings 1s ease-in;
}

.indic3{
  font-size: 2vh;
	font-family: "Diabolik-Regular-VF";
  color: black;
  margin-left: 15vh;
  margin-top: 0vh;
}
.set3{
  font-size: 12vh;
	font-family: "Diabolik-Regular-VF";
  color: black;
  margin: -8vh 10vh 2vh 40vh;
  font-variation-settings: 'wght' 400, 'CNTR' 0;
  transition: font-variation-settings 1s ease-out;
}
.set3:hover{
  font-variation-settings: 'wght' 400, 'CNTR' 100;
  transition: font-variation-settings 1s ease-in;
}

.indic4{
  font-size: 2vh;
	font-family: "Diabolik-Regular-VF";
  color: black;
  margin-left: 15vh;
  margin-top: 15vh;
}
.set4{
  font-size: 12vh;
	font-family: "Diabolik-Regular-VF";
  color: black;
  margin: -15vh 10vh 5vh 40vh;
  border-bottom: 3px solid black;
  font-variation-settings: 'wght' 700, 'CNTR' 0;
  transition: font-variation-settings 1s ease-out;
}
.set4:hover{
  font-variation-settings: 'wght' 700, 'CNTR' 100;
  transition: font-variation-settings 1s ease-in;
}

.indic5{
  font-size: 2vh;
	font-family: "Diabolik-Regular-VF";
  color: black;
  margin-left: 15vh;
  margin-top: 15vh;
}
.set5{
  font-size: 12vh;
	font-family: "Diabolik-Regular-VF";
  color: black;
  margin: -15vh 10vh 7vh 40vh;
  padding-bottom: 3vh;
  border-bottom: 3px solid black;
  font-variation-settings: 'wght' 700, 'CNTR' 0;
  transition: font-variation-settings 1s ease-out;
}
.set5:hover{
  font-variation-settings: 'wght' 700, 'CNTR' 100;
  transition: font-variation-settings 1s ease-in;
}

.indic6{
  font-size: 2vh;
	font-family: "Diabolik-Regular-VF";
  color: black;
  margin-left: 15vh;
  margin-top: 0vh;
}
.set6{
  font-size: 12vh;
	font-family: "Diabolik-Regular-VF";
  color: black;
  margin: -8vh 10vh 2vh 40vh;
  font-variation-settings: 'wght' 700, 'CNTR' 0;
  transition: font-variation-settings 1s ease-out;
}
.set6:hover{
  font-variation-settings: 'wght' 700, 'CNTR' 100;
  transition: font-variation-settings 1s ease-in;
}

.indic7{
  font-size: 2vh;
	font-family: "Diabolik-Regular-VF";
  color: black;
  margin-left: 15vh;
  margin-top: 15vh;
}
.set7{
  font-size: 12vh;
	font-family: "Diabolik-Regular-VF";
  color: black;
  margin: -15vh 10vh 5vh 40vh;
  padding-bottom: 2vh;
  border-bottom: 3px solid black;
  font-variation-settings: 'wght' 900, 'CNTR' 0;
  transition: font-variation-settings 1s ease-out;
}
.set7:hover{
  font-variation-settings: 'wght' 900, 'CNTR' 100;
  transition: font-variation-settings 1s ease-in;
}

.indic8{
  font-size: 2vh;
	font-family: "Diabolik-Regular-VF";
  color: black;
  margin-left: 15vh;
  margin-top: 15vh;
}
.set8{
  font-size: 12vh;
	font-family: "Diabolik-Regular-VF";
  color: black;
  margin: -15vh 10vh 7vh 40vh;
  padding-bottom: 3vh;
  border-bottom: 3px solid black;
  font-variation-settings: 'wght' 900, 'CNTR' 0;
  transition: font-variation-settings 1s ease-out;
}
.set8:hover{
  font-variation-settings: 'wght' 900, 'CNTR' 100;
  transition: font-variation-settings 1s ease-in;
}

.indic9{
  font-size: 2vh;
	font-family: "Diabolik-Regular-VF";
  color: black;
  margin-left: 15vh;
  margin-top: 0vh;
}
.set9{
  font-size: 12vh;
	font-family: "Diabolik-Regular-VF";
  color: black;
  margin: -8vh 10vh 8vh 40vh;
  font-variation-settings: 'wght' 900, 'CNTR' 0;
  transition: font-variation-settings 1s ease-out;
}
.set9:hover{
  font-variation-settings: 'wght' 900, 'CNTR' 100;
  transition: font-variation-settings 1s ease-in;
}

.page7{
  background-color: #f24005;
  padding: 0.5vh;
  z-index: 1;
}

.nav7{
	text-align: center;
	font-size: 3vh;
	font-family: "Diabolik-Regular-VF";
  color: black;
  border-bottom: 2px solid black;
  margin: 3vh 10vh 3vh 10vh;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 22vh;
}
.detail{
  color: whitesmoke;
}

.n{
  text-align: center;
	font-size: 45vh;
	font-family: "Diabolik-Regular-VF";
  color: black;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin: 8vh 15vh 5vh 10vh;
  line-height: 1;
}
.n1{
  font-variation-settings: 'wght' 400, 'CNTR' 0;
}
.n2{
  font-variation-settings: 'wght' 700, 'CNTR' 0;
}
.n3{
  font-variation-settings: 'wght' 900, 'CNTR' 0;
}
.n4{
  font-variation-settings: 'wght' 400, 'CNTR' 100;
}
.n5{
  font-variation-settings: 'wght' 700, 'CNTR' 100;
}
.n6{
  font-variation-settings: 'wght' 900, 'CNTR' 100;
}

.epreuve{
  text-align: left;
	font-size: 2.2vh;
	font-family: "Diabolik-Regular-VF";
  margin: 5vh 15vh 5vh 70vh;
  font-variation-settings: 'wght' 400, 'CNTR' 0;
  transition: font-variation-settings 1s ease-out;
}
.epreuve:hover{
  font-variation-settings: 'wght' 400, 'CNTR' 100;
  transition: font-variation-settings 1s ease-in;
}
.epreuve2{
  text-align: left;
	font-size: 3vh;
	font-family: "Diabolik-Regular-VF";
  margin: 5vh 15vh 5vh 70vh;
  font-variation-settings: 'wght' 400, 'CNTR' 0;
  transition: font-variation-settings 1s ease-out;
}
.epreuve2:hover{
  font-variation-settings: 'wght' 400, 'CNTR' 100;
  transition: font-variation-settings 1s ease-in;
}

.epreuve3{
  text-align: left;
	font-size: 3vh;
	font-family: "Diabolik-Regular-VF";
  margin: 5vh 15vh 5vh 70vh;
  font-variation-settings: 'wght' 700, 'CNTR' 0;
  transition: font-variation-settings 1s ease-out;
}
.epreuve3:hover{
  font-variation-settings: 'wght' 700, 'CNTR' 100;
  transition: font-variation-settings 1s ease-in;
}

.text-smooth1{
  margin-top: 25vh;
	font-size: 16vh;
	font-family: "Diabolik-Regular-VF";
  color: black;
  font-variation-settings: 'wght' 400, 'CNTR' 100;
  text-align: center;
  display: flex;
}
.text-smooth2{
	font-size: 16vh;
	font-family: "Diabolik-Regular-VF";
  color: black;
  font-variation-settings: 'wght' 700, 'CNTR' 100;
  text-align: center;
}
.text-smooth3{
  margin-bottom: 15vh;
	font-size: 15vh;
	font-family: "Diabolik-Regular-VF";
  color: black;
  font-variation-settings: 'wght' 900, 'CNTR' 100;
  text-align: center;
  display: flex;
}
.var{
  color: whitesmoke;
}