* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* background-color: #bbb67c;  */
}

html,
body {
  height: 100%;
  overflow-y: hidden;
}

main {
  display: flex;
  flex-direction: row;
  height: 100vh;
  overflow-x: auto;
  color: rgb(124, 124, 124);
  /* background: linear-gradient(135deg, #bab691 0%, #75818c 100%, #808483 100%); */
}

/* .preface-text p:nth-child(2) {
  margin-left: 100vw;
}

.preface-text p:nth-child(3) {
  margin-left: 200vw;
} */

.textes {
  flex: 0 0 auto;
  height: 100vh;
  display: flex;
  color: #4f5d3a;
  display: inline-block;
  /* text-shadow: 1px 0 10px #817954; */
}

.textes .zone {
  display: flex;
  flex-direction: row;
  width: max-content;
}

.textes p {
  transform: translateX(calc(var(--i) * 50vw));
  font-size: 1.8rem;
  max-width: 60vw;
  font-family: "gensco";
  text-align: justify;
  text-justify: inter-character;
}

.textes p:nth-child(even) {
  transform: translateX(calc(var(--i) * 50vw)) translateY(35vh);
  /* border: 2px solid orange; */
}

.textes p:nth-child(odd):not(:first-child) {
  transform: translateX(calc(var(--i) * 50vw)) translateY(10vh);
}

.textes p:nth-child(1) {
  margin-top: 50px;
  margin-left: 30vw;
  /* transform: translateX(0); */
}

/* p:nth-last-child(-n + 1){
  border: 2px solid orange;
  margin-left: 30vw;
} */

/* .textes p:nth-child(4n) {
  color: red;
} */

.titres {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  /* justify-content: center;  */
  /* font-size: 10rem; */
  text-transform: uppercase;
}


.titrea {
  font-family: "HNT";
  /* font-family: "germen"; */
  font-size: 10rem;
  width: 100vw;
  /* letter-spacing: -8rem; */
  /* line-height: 1; */
  /* margin: 10% 0 0 10%; */
  /* color: #bbb67c; */
  letter-spacing: -2.5rem;
  filter: url(#filtre-un);
  color: white;
  text-shadow: 6px 6px 8px #817954;
}

/* .titrea span {
  align-items: center;
  display: flex;
} */

.titreb {
  font-family: "HNT";
  filter: url(#filtre-deux);
  font-size: 12rem;
  width: 100vw;
  letter-spacing: -2.2rem;
  /* margin: 10% 0 0 10%; */
  color: #bbb67c3b;
  /* font-family: "semilla"; */
  /* letter-spacing: -8rem; */
  /* line-height: 1; */
  /* color: white;  */
  text-shadow: 4px 1px 4px #817954b6;
}

@font-face {
  font-family: "germen";
  src: url(FlorDeRuina-Germen.woff2);
}

@font-face {
  font-family: "semilla";
  src: url(FlorDeRuina-Semilla.woff2);
}

@font-face {
  font-family: "gensco";
  src: url(GENSCO.woff2);
}

@font-face {
  font-family: "HNT";
  src: url(Hershey-Noailles-Times-Triplex-Regular.woff2);
}