@font-face {
  font-family: Amatic;
  src: url(/font/AmaticSC-Bold.ttf);
}
@font-face {
  font-family: Quatrocento;
  src: url(/font/QuattrocentoSans-Regular.ttf);
}
@font-face {
  font-family: QuatrocentoItalic;
  src: url(/font/QuattrocentoSans-Italic.ttf);
}
@font-face {
  font-family: breakSemiBold;
  src: url(font/Break-SemiBold.ttf);
}

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
}

body {
  background-color: #181822;
  font-family: Quatrocento;
}
.titre {
  margin-top: 3%;
  background-image: url(titreFondKraft.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 35vh;
  display: flex;
}
.titre p {
  font-family: breakSemiBold;
  text-decoration: underline;
  text-decoration-style: dashed;
  margin: auto;
  text-align: center;
  font-size: 5em;
  color: #941b80;
}
h1 {
  color: orangered;
  margin: 3%;
  font-family: Amatic;
  font-size: 3em;
}
.quoi p,
.qui p {
  font-size: 1.5em;
}

.quoi,
.blablaQui {
  color: whitesmoke;
}

.quoi p,
.blablaQui p {
  padding: 1%;
}

.blablaQuesaco,
.blablaQui {
  max-width: 66vw;
}
#quoi {
  margin-left: 9%;
}
.quoi {
  margin: 5% auto;
  max-width: 75vw;
}
.enbrefQuoi h2 {
  font-family: QuatrocentoItalic;
  padding-bottom: 2%;
}
.enbrefQuoi {
  text-align: center;
  padding-bottom: 2%;
}

.blablaQuoi {
  max-width: 80vw;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  text-align: center;
}
.sectionQuoi {
  margin: 0 2vw;
  padding: 5%;
  border-radius: 15px;
  background-image: url(FondKraft.png);
  background-size: cover;
}

#bloc1 {
  transform: rotate(-5deg);
  border: solid 5px orangered;
}
#bloc2 {
  transform: rotate(1deg);
  border: rgb(26, 177, 223) solid 5px;
}
#bloc3 {
  transform: rotate(5deg);
  border: #941b80 solid 5px;
}

.sectionQuoi h3 {
  margin-bottom: 2vh;
}
.sectionQuoi p {
padding-bottom: 2%;
}
#qui {
  text-align: justify;
  margin-left: 10%;
}
.qui {
  position: relative;
  max-width: 50%;
  margin: auto;
}
.blablaQui {
  text-align: justify;
}
