@font-face {
  font-family: "Afronik";
  src: url("font/Afronik.ttf") format("truetype");
}

@font-face {
  font-family: "Spline";
  src: url("font/SplineSansMono-VariableFont_wght.ttf") format("truetype");
}

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


@font-face {
  font-family: "Prince";
  src: url("font/PrinceValiant.ttf") format("truetype");
}

@font-face {
  font-family: "Conf";
  src: url("font/conf_46-70.otf") format("opentype");
}



body {
  background-image: url(Gradient.png);
}

.title__margin {
  margin-top: 300px;
}

.grid-content {
  font-family: "Spline", sans-serif;
  font-size: 24px;
  font-weight: medium;
}

.grid__content1 {
  font-weight: bold;
}


.sommet {
  font-family: "Afronik", sans-serif;
  font-size: 40px;
}

.elle {
  font-family: "Telma", sans-serif;
}

.nouveau {
  text-decoration: underline;
}

.verite {
  font-size: 32px;
}

.chefOeuvre {
  font-family: "Telma", sans-serif;
}

.men {
  font-size: 36px;
}

.women {
  font-family: "Telma", sans-serif;
  font-size: 36px;
}

.genial {
  font-size: 32px;
  text-decoration: underline;
}

.rien {
  color: red;
}

.personne {
  font-size: 20px;
}

.corps1 {
  font-family: "Telma", sans-serif;
}

.grid__content27 {
  font-size: 32px;
}

.grid__content28 {
  font-size: 32px;
}

.grid__content29 {
  font-size: 48px;
}

.title {
  font-size: 36px;
  margin: 0;
}

.title__container {
  display: block;
  overflow: hidden;
  width: 100%;
}

.title__span {
  display: inline-block;
  font-family: "Spline", sans-serif;
  font-size: 36px;
  font-weight: medium;
}

.title__span1 {
  margin-left: 6.5em;
}

.title__span2 {
  margin-left: 5.5em;
}

.title__span3 {
  margin-left: 8em;
}

.title__span4 {
  margin-left: 6.5em;
}

.title__sous-titre1 {
  font-size: 36px;
  margin-top: 300px;
  margin-left: 6.5em;
}

.title__sous-titre2 {
  font-size: 36px;
  margin-top: 20px;
  margin-left: 8em;
}

.title__sous-titre3 {
  font-size: 24px;
  margin-top: 20px;
  margin-left: 4em;
}

.title__sous-titre4 {
  font-size: 24px;
  margin-top: 20px;
  margin-left: 4em;
}

section {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  column-gap: 20px;
}

.title-text2 {
  margin-top: 400px;
}

.grid-content2 {
  font-weight: medium;
  font-family: "Spline", sans-serif;
  font-size: 24px;
}

.grid__content-text2__2 {
  letter-spacing: -7%;
}

.nom {
  font-size: 16px;
}

.fauxNom {
  text-decoration: line-through;
}

.histoires {
  text-decoration: line-through;
}

.forcees {
  color: red;
}

.parler {
  opacity: 50%;
}

.mentent {
  font-size: 40px;
}

.honte1 {
  font-size: 54px;
  font-weight: bold;
}

.honte2 {
  font-size: 36px;
  font-weight: bold;
}

.grid__content-text2__21 {
  font-size: 16px;
}

.dixMille {
  letter-spacing: 20px;
}

.grid__content-text2__26 {
  font-size: 16px;
}

.liquideNoir {
  font-weight: bold;
}

.miroir {
  opacity: 50%;
}

.etale {
  letter-spacing: 6px;
}

.oceans {
  color: #0A0976;
}

.grid__content-text2__30 {
  font-size: 36px;
  font-weight: bold;
}

.grid__content-text2__31 {
  font-size: 36px;
  font-weight: bold;
}

.grid__content-text2__32 {
  font-size: 36px;
  font-weight: bold;
}

.grid__content-text2__33 {
  font-size: 54px;
  font-weight: bold;
}

.grid__content-text2__34 {
  font-size: 81px;
  font-weight: bold;
}

.grid__content-text2__35 {
  font-size: 81px;
  font-family: "Prince", sans-serif;
}

.corps2 {
  font-family: "Telma", sans-serif;
}

.casse {
  font-family: "Conf", sans-serif;
}

.title2__sous-titre1 {
  font-size: 36px;
}

.title2__sous-titre2 {
  font-size: 36px;
}

.title2__sous-titre3 {
  font-size: 36px;
}

.title2__sous-titre4 {
  font-size: 24px;
  margin-bottom: 400px;
}

footer {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
  font-family: "Spline", sans-serif;
  font-size: 16px;
  font-weight: medium;
}

/* Text numéro 1 */
.grid__content1,
.grid__content2,
.grid__content3,
.grid__content4,
.grid__content5,
.grid__content6,
.grid__content7,
.grid__content8,
.grid__content9,
.grid__content10,
.grid__content11,
.grid__content12,
.grid__content13,
.grid__content14,
.grid__content15,
.grid__content16,
.grid__content17,
.grid__content18,
.grid__content19,
.grid__content20,
.grid__content21,
.grid__content22,
.grid__content23,
.grid__content24,
.grid__content25,
.grid__content26,
.grid__content27,
.grid__content28,
.grid__content29 {
  margin-top: 1em;
  grid-column: 4/24;
  /* Setting grid column */
}

/* Text numéro 2 */
.grid__content-text2__1,
.grid__content-text2__2,
.grid__content-text2__3,
.grid__content-text2__4,
.grid__content-text2__5,
.grid__content-text2__6,
.grid__content-text2__7,
.grid__content-text2__8,
.grid__content-text2__9,
.grid__content-text2__10,
.grid__content-text2__11,
.grid__content-text2__12,
.grid__content-text2__13,
.grid__content-text2__14,
.grid__content-text2__15,
.grid__content-text2__16,
.grid__content-text2__17,
.grid__content-text2__18,
.grid__content-text2__19,
.grid__content-text2__20,
.grid__content-text2__21,
.grid__content-text2__22,
.grid__content-text2__23,
.grid__content-text2__24,
.grid__content-text2__25,
.grid__content-text2__26,
.grid__content-text2__27,
.grid__content-text2__28,
.grid__content-text2__29,
.grid__content-text2__30,
.grid__content-text2__31,
.grid__content-text2__32,
.grid__content-text2__33,
.grid__content-text2__34,
.grid__content-text2__35 {
  margin-top: 1em;
  grid-column: 4/24;
  /* Setting grid column */
}

.menu-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  z-index: 1001;
  background-color: transparent;
  border: none;
  padding: 0;
}

.burger {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: black;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: background-color 0.3s ease;
}

body.no-scroll {
  overflow: hidden;
}

.menu-toggle.active .burger {
  background-color: white;
}

.nav {
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000000;
  transform: scale(0);
  transform-origin: top right;
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0;
}

.nav.active {
  transform: scale(1);
  opacity: 1;
}

.nav__list {
  list-style: none;
  padding: 0;
  margin: 0px;
  margin-left: 50px;
  margin-right: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  height: 100%;
}

.menu-toggle.active .burger::before,
.menu-toggle.active .burger::after {
  display: none;
}

.nav__item {
  padding: 2rem;
}

.nav__link {
  color: #F5F5F5;
  text-decoration: none;
  font-weight: medium;
  font-family: "Spline", sans-serif;
  font-size: clamp(24px, 5vw, 60px);
}

.afronik {
  font-family: "Afronik", system-ui;
  font-optical-sizing: auto;
  font-style: normal;
  animation: afronikAnimation 9s infinite ease;
  font-variation-settings: "wght" 900;
}

@keyframes afronikAnimation {
  0% {
    font-variation-settings: "wght" 900;
  }

  50% {
    font-variation-settings: "wght" 100;
  }

  100% {
    font-variation-settings: "wght" 900;
  }
}

.telma {
  font-family: "Telma", system-ui;
  font-optical-sizing: auto;
  font-style: normal;
  animation: telmaAnimation 9s infinite ease;
  font-variation-settings: "wght" 900;
}

@keyframes telmaAnimation {
  0% {
    font-variation-settings: "wght" 900;
  }

  50% {
    font-variation-settings: "wght" 300;
  }

  100% {
    font-variation-settings: "wght" 900;
  }
}

.prince {
  font-family: "Prince", system-ui;
  font-optical-sizing: auto;
  font-style: normal;
  animation: princeAnimation 9s infinite ease;
  font-variation-settings: "wght" 300;
}

@keyframes princeAnimation {
  0% {
    font-variation-settings: "wght" 300;
  }

  50% {
    font-variation-settings: "wght" 700;
  }

  100% {
    font-variation-settings: "wght" 300;
  }
}

.conf {
  font-family: "Conf", system-ui;
  font-optical-sizing: auto;
  font-style: normal;
  animation: confAnimation 9s infinite ease;
  font-variation-settings: "wght" 900;
}

@keyframes confAnimation {
  0% {
    font-variation-settings: "wght" 900;
  }

  50% {
    font-variation-settings: "wght" 100;
  }

  100% {
    font-variation-settings: "wght" 900;
  }
}

@media (min-width: 800px) {
  .grid__content1 {
    grid-column: 4/24;
    grid-row: 1;
  }

  .grid__content2 {
    grid-column: 6/24;
    grid-row: 3;
  }

  .grid__content3 {
    grid-column: 8/24;
    grid-row: 4;
  }

  .grid__content4 {
    grid-column: 11/24;
    grid-row: 5;
  }

  .grid__content5 {
    grid-column: 4/24;
    grid-row: 6;
  }

  .grid__content6 {
    grid-column: 3/24;
    grid-row: 7;
  }

  .grid__content7 {
    grid-column: 2/24;
    grid-row: 8;
  }

  .grid__content8 {
    grid-column: 7/24;
    grid-row: 9;
  }

  .grid__content9 {
    grid-column: 16/24;
    grid-row: 10;
  }

  .grid__content10 {
    grid-column: 3/24;
    grid-row: 11;
  }

  .grid__content11 {
    grid-column: 4/24;
    grid-row: 12;
  }

  .grid__content12 {
    grid-column: 6/24;
    grid-row: 13;
  }

  .grid__content13 {
    grid-column: 7/24;
    grid-row: 14;
  }

  .grid__content14 {
    grid-column: 5/24;
    grid-row: 15;
  }

  .grid__content15 {
    grid-column: 4/24;
    grid-row: 16;
  }

  .grid__content16 {
    grid-column: 3/24;
    grid-row: 17;
  }

  .grid__content17 {
    grid-column: 6/24;
    grid-row: 18;
  }

  .grid__content18 {
    grid-column: 4/24;
    grid-row: 19;
  }

  .grid__content19 {
    grid-column: 14/24;
    grid-row: 20;
  }

  .grid__content20 {
    grid-column: 16/24;
    grid-row: 21;
  }

  .grid__content21 {
    grid-column: 3/24;
    grid-row: 22;
  }

  .grid__content22 {
    grid-column: 7/24;
    grid-row: 23;
  }

  .grid__content23 {
    grid-column: 6/24;
    grid-row: 24;
  }

  .grid__content24 {
    grid-column: 13/24;
    grid-row: 25;
  }

  .grid__content25 {
    grid-column: 7/24;
    grid-row: 26;
  }

  .grid__content26 {
    grid-column: 9/24;
    grid-row: 27;
  }

  .grid__content27 {
    grid-column: 15/24;
    grid-row: 28;
  }

  .grid__content28 {
    grid-column: 13/24;
    grid-row: 29;
  }

  .grid__content29 {
    grid-column: 3/24;
    grid-row: 30;
  }

  .grid__content29 {
    margin-top: 1em;
    grid-column: 4/24;
    /* Setting grid column */
  }


  .title__span--text-2 {
    margin-left: 5em;
  }

  .title__span--text-2-2 {
    margin-left: 4em;
  }

  .section__text2 {
    margin-top: 160px;
  }

  .grid__content-text2__1 {
    grid-column: 9/24;
    grid-row: 1;
  }

  .grid__content-text2__2 {
    grid-column: 8/24;
    grid-row: 2;
  }

  .grid__content-text2__3 {
    grid-column: 11/24;
    grid-row: 3;
    margin-top: 120px;
  }

  .grid__content-text2__4 {
    grid-column: 7/24;
    grid-row: 4;
    margin-top: 80px;
  }

  .grid__content-text2__5 {
    grid-column: 15/24;
    grid-row: 5;
    margin-top: 150px;
  }

  .grid__content-text2__6 {
    grid-column: 7/24;
    grid-row: 6;
    margin-top: 50px;
  }

  .grid__content-text2__7 {
    grid-column: 8/24;
    grid-row: 7;
  }

  .grid__content-text2__8 {
    grid-column: 11/24;
    grid-row: 8;
  }

  .grid__content-text2__9 {
    grid-column: 7/24;
    grid-row: 9;

  }

  .grid__content-text2__10 {
    grid-column: 5/24;
    grid-row: 10;
    margin-top: 85px;
  }

  .grid__content-text2__11 {
    grid-column: 10/24;
    grid-row: 11;
  }

  .grid__content-text2__12 {
    grid-column: 5/24;
    grid-row: 12;
    margin-top: 85px;
  }

  .grid__content-text2__13 {
    grid-column: 8/24;
    grid-row: 13;
  }

  .grid__content-text2__14 {
    grid-column: 8/24;
    grid-row: 14;
  }

  .grid__content-text2__15 {
    grid-column: 10/24;
    grid-row: 15;
    margin-top: 60px;
  }

  .grid__content-text2__16 {
    grid-column: 8/24;
    grid-row: 16;
    margin-top: 75px;
  }

  .grid__content-text2__17 {
    grid-column: 6/24;
    grid-row: 17;
  }

  .grid__content-text2__18 {
    grid-column: 9/24;
    grid-row: 18;
    margin-top: 75px;
  }

  .grid__content-text2__19 {
    grid-column: 9/24;
    grid-row: 19;
    margin-top: 190px;
  }

  .grid__content-text2__20 {
    grid-column: 7/24;
    grid-row: 20;
    margin-top: 190px;
  }

  .grid__content-text2__21 {
    grid-column: 12/24;
    grid-row: 21;
  }

  .grid__content-text2__22 {
    grid-column: 5/24;
    grid-row: 22;
    margin-top: 150px;
  }

  .grid__content-text2__23 {
    grid-column: 5/24;
    grid-row: 23;
    margin-top: 180px;
  }

  .grid__content-text2__24 {
    grid-column: 5/24;
    grid-row: 24;
  }

  .grid__content-text2__25 {
    grid-column: 3/24;
    grid-row: 25;
    margin-top: 180px;
  }

  .grid__content-text2__26 {
    grid-column: 4/24;
    grid-row: 26;
  }

  .grid__content-text2__27 {
    grid-column: 2/24;
    grid-row: 27;
    margin-top: 60px;
  }

  .grid__content-text2__28 {
    grid-column: 2/24;
    grid-row: 28;
  }

  .grid__content-text2__29 {
    grid-column: 2/24;
    grid-row: 29;
  }

  .grid__content-text2__30 {
    grid-column: 1/24;
    grid-row: 30;
    margin-top: 60px;
  }

  .grid__content-text2__31 {
    grid-column: 1/24;
    grid-row: 31;
  }

  .grid__content-text2__32 {
    grid-column: 1/24;
    grid-row: 32;
  }

  .grid__content-text2__33 {
    grid-column: 1/24;
    grid-row: 33;
    margin-top: 90px;
  }

  .grid__content-text2__34 {
    grid-column: 1/24;
    grid-row: 34;
  }

  .grid__content-text2__35 {
    grid-column: 1/24;
    grid-row: 35;
  }

  .title__sous-titre-texte {
    margin-left: 25em;
  }

  .title__sous-titre-texte2 {
    margin-left: 6.5em;
  }
}