@import url('https://fonts.googleapis.com/css?family=Overpass+Mono');

body{
background-color: white;
background-image: url("visuels/card_good.svg");
background-size: contain;
}
#container1
{
  margin-top: 0vw;
  margin-left: 0vw;
  margin-right: 0vw;
}
#conteneur1
{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    height: 0vh;
    margin-top: 3vw;
    margin-left: 0vw;
    margin-right: 0vw;
    color: black;
    font-size: 0.4vw;
    font-family: 'Overpass Mono', monospace;
    text-align: left;
    line-height: 0.2;
    width: 90%;
}

.credit1, .droits1, .legende-image1, .groupe1 {
  width: 25%;
  padding-right: 10px;
  font-size: 0.8vw;
  line-height: 1;
}

span {
  font-weight: bolder;
  font-size: 0.8vw;
  text-decoration: underline;
}

.row1{
  display: flex;
  margin-top: 11vw;
  margin-left: 12%;
  margin-right: 12%;
  /* margin: 15vw; */
  margin-block-end: 10%;
}


.keypunch1{
  width: 22vw;
  margin-left: 8vw;
}

h1{
  position: absolute;
  top: 0vh;
  right: 29vw;
  font-size: 1vw;
  font-style: normal;
  font-family: 'Overpass Mono', monospace;
  color: black;
  text-align: left;
  margin: 0;
}

h2 {
  position: absolute;
  top: 0vh;
  right: 3vw;
  font-size: 1vw;
  font-style: normal;
  font-family: 'Overpass Mono', monospace;
  color: black;
  text-align: left;
  margin: 0;
}

.paragraphe1{
  color: black;
  font-size: 1vw;
  font-family: 'Overpass Mono', monospace;
  text-align: left;
  line-height: 1.5;
  width: 58%;
  margin-top: 0vh;
}

#container2
  {
    margin-top: 42vw;
    margin-left: 0vw;
    margin-right: 0vw
  }
  #conteneur2
  {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-around;
      height: 0vh;
      margin-top: -26vw;
      margin-left: 0vw;
      margin-right: 0vw;
      color: black;
      font-size: 0.8vw;
      font-family: 'Overpass Mono', monospace;
      text-align: left;
      line-height: 1;
      width: 90%;
  }

  .credit2, .droits2, .legende-image2, .groupe2 {
    width: 25%;
    padding-right: 10px;
    font-size: 0.8vw;
    line-height: 1;
  }

  span {
    font-weight: bolder;
    font-size: 0.8vw;
    text-decoration: underline;
  }

  .row2 {
    display: flex;
    margin-top: 72vw;
    margin-left: 12%;
    margin-right: 12%;
    /* margin: 15vw; */
    margin-block-end: 29%;
}


  h3{
    position: absolute;
    top: 44vw;
    right: 29vw;
    /* text-align: left; */
    font-size: 1vw;
    font-style: normal;
    font-family: 'Overpass Mono', monospace;
    color: black;
    text-align: left;
    margin: 0;
  }

  h4 {

    position: absolute;
    top: 44vw;
    right: 3vw;
    font-size: 1vw;
    font-style: normal;
    font-family: 'Overpass Mono', monospace;
    color: black;
    text-align: left;
    margin: 0;
  }

  .paragraphe2 {
    color: black;
    font-size: 1vw;
    font-family: 'Overpass Mono', monospace;
    text-align: left;
    line-height: 1.5;
    width: 68%;
    margin-top: -62vw;
}


#container3
  {
    margin-top: 62vw;
    margin-left: 0vw;
    margin-right: 0vw
  }
  #conteneur3 {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    height: 0vw;
    margin-top: -90vw;
    margin-left: 0vw;
    margin-right: 0vw;
    color: black;
    font-size: 0.8vw;
    font-family: 'Overpass Mono', monospace;
    text-align: left;
    line-height: 1;
    width: 90%;
}

  .credit3, .droits3, .legende-image3, .groupe3 {
    width: 25%;
    padding-right: 10px;
    font-size: 0.8vw;
    line-height: 1;
  }

  span {
    font-weight: bolder;
    font-size: 0.8vw;
    text-decoration: underline;
  }

  .row3 {
      display: flex;
      margin-top: 71vw;
      margin-left: 12%;
      margin-right: 12%;
      /* margin: 15vw; */
      margin-block-end: 29%;
  }


  h5{
    position: absolute;
    top: 88vw;
    right: 29vw;
    /* text-align: left; */
    font-size: 1vw;
    font-style: normal;
    font-family: 'Overpass Mono', monospace;
    color: black;
    text-align: left;
    margin: 0;
  }

  h6 {

    position: absolute;
    top: 88vw;
    right: 3vw;
    font-size: 1vw;
    font-style: normal;
    font-family: 'Overpass Mono', monospace;
    color: black;
    text-align: left;
    margin: 0;
  }

  .paragraphe3 {
    color: black;
    font-size: 1vw;
    font-family: 'Overpass Mono', monospace;
    text-align: left;
    line-height: 1.5;
    width: 68%;
    margin-top: -61vw;
}

#container4
  {
    margin-top: 62vw;
    margin-left: 0vw;
    margin-right: 0vw
  }
  #conteneur4 {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    height: 0vw;
    margin-top: -91vw;
    margin-left: 0vw;
    margin-right: 0vw;
    color: black;
    font-size: 0.8vw;
    font-family: 'Overpass Mono', monospace;
    text-align: left;
    line-height: 1;
    width: 90%;
}

  .credit4, .droits4, .legende-image4, .groupe4 {
    width: 25%;
    padding-right: 10px;
    font-size: 0.8vw;
    line-height: 1;
  }

  span {
    font-weight: bolder;
    font-size: 0.8vw;
    text-decoration: underline;
  }

  .row4 {
      display: flex;
      margin-top: 72vw;
      margin-left: 12%;
      margin-right: 12%;
      /* margin: 15vw; */
      margin-block-end: 29%;
  }


  h7{
    position: absolute;
    top: 132vw;
    right: 29vw;
    /* text-align: left; */
    font-size: 1vw;
    font-style: normal;
    font-family: 'Overpass Mono', monospace;
    color: black;
    text-align: left;
    margin: 0;
  }

  h8 {

    position: absolute;
    top: 132vw;
    right: 3vw;
    font-size: 1vw;
    font-style: normal;
    font-family: 'Overpass Mono', monospace;
    color: black;
    text-align: left;
    margin: 0;
  }

  .paragraphe4 {
    color: black;
    font-size: 1vw;
    font-family: 'Overpass Mono', monospace;
    text-align: left;
    line-height: 1.5;
    width: 68%;
    margin-top: -61vw;
}

.demoiselles{
  width: 21vw;
  margin-left: 52vw;
  margin-top: -23vw;
}


#container5
  {
    margin-top: 72vw;
    margin-left: 0vw;
    margin-right: 0vw
  }
  #conteneur5 {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    height: 0vw;
    margin-top: -100vw;
    margin-left: 0vw;
    margin-right: 0vw;
    color: black;
    font-size: 0.8vw;
    font-family: 'Overpass Mono', monospace;
    text-align: left;
    line-height: 1;
    width: 90%;
}

  .credit5, .droits5, .legende-image5, .groupe5 {
    width: 25%;
    padding-right: 10px;
    font-size: 0.8vw;
    line-height: 1;
  }

  span {
    font-weight: bolder;
    font-size: 0.8vw;
    text-decoration: underline;
  }

  .row5 {
      display: flex;
      margin-top: 72vw;
      margin-left: 12%;
      margin-right: 12%;
      /* margin: 15vw; */
      margin-block-end: 29%;
  }


  h9{
    position: absolute;
    top: 175vw;
    right: 29vw;
    /* text-align: left; */
    font-size: 1vw;
    font-style: normal;
    font-family: 'Overpass Mono', monospace;
    color: black;
    text-align: left;
    margin: 0;
  }

  h10 {

    position: absolute;
    top: 175vw;
    right: 3vw;
    font-size: 1vw;
    font-style: normal;
    font-family: 'Overpass Mono', monospace;
    color: black;
    text-align: left;
    margin: 0;
  }

  .paragraphe5 {
    color: black;
    font-size: 1vw;
    font-family: 'Overpass Mono', monospace;
    text-align: left;
    line-height: 1.5;
    width: 68%;
    margin-top: -61vw;
}

.sourit{
  width: 14vw;
  margin-top: -6vw;
  margin-left: 57vw;
}


#container6
  {
    margin-top: 92vw;
    margin-left: 0vw;
    margin-right: 0vw
  }
  #conteneur6 {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    height: 0vw;
    margin-top: -120vw;
    margin-left: 0vw;
    margin-right: 0vw;
    color: black;
    font-size: 0.8vw;
    font-family: 'Overpass Mono', monospace;
    text-align: left;
    line-height: 1;
    width: 90%;
}

  .credit6, .droits6, .legende-image6, .groupe6 {
    width: 25%;
    padding-right: 10px;
    font-size: 0.8vw;
    line-height: 1;
  }

  span {
    font-weight: bolder;
    font-size: 0.8vw;
    text-decoration: underline;
  }

  .row6 {
      display: flex;
      margin-top: 72vw;
      margin-left: 12%;
      margin-right: 12%;
      /* margin: 15vw; */
      margin-block-end: 29%;
  }


  h11{
    position: absolute;
    top: 219vw;
    right: 29vw;
    /* text-align: left; */
    font-size: 1vw;
    font-style: normal;
    font-family: 'Overpass Mono', monospace;
    color: black;
    text-align: left;
    margin: 0;
  }

  h12 {

    position: absolute;
    top: 219vw;
    right: 3vw;
    font-size: 1vw;
    font-style: normal;
    font-family: 'Overpass Mono', monospace;
    color: black;
    text-align: left;
    margin: 0;
  }

  .paragraphe6 {
    color: black;
    font-size: 1vw;
    font-family: 'Overpass Mono', monospace;
    text-align: left;
    line-height: 1.5;
    width: 68%;
    margin-top: -61vw;
}


#container7
  {
    margin-top: 102vw;
    margin-left: 0vw;
    margin-right: 0vw
  }
  #conteneur7 {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    height: 0vw;
    margin-top: -130vw;
    margin-left: 0vw;
    margin-right: 0vw;
    color: black;
    font-size: 0.8vw;
    font-family: 'Overpass Mono', monospace;
    text-align: left;
    line-height: 1;
    width: 90%;
}

  .credit7, .droits7, .legende-image7, .groupe7 {
    width: 25%;
    padding-right: 10px;
    font-size: 0.8vw;
    line-height: 1;
  }

  span {
    font-weight: bolder;
    font-size: 0.8vw;
    text-decoration: underline;
  }

  .row7 {
      display: flex;
      margin-top: 72vw;
      margin-left: 12%;
      margin-right: 12%;
      /* margin: 15vw; */
      margin-block-end: 29%;
  }


  h13{
    position: absolute;
    top: 263vw;
    right: 29vw;
    /* text-align: left; */
    font-size: 1vw;
    font-style: normal;
    font-family: 'Overpass Mono', monospace;
    color: black;
    text-align: left;
    margin: 0;
  }

  h14 {

    position: absolute;
    top: 263vw;
    right: 3vw;
    font-size: 1vw;
    font-style: normal;
    font-family: 'Overpass Mono', monospace;
    color: black;
    text-align: left;
    margin: 0;
  }

  .paragraphe7 {
    color: black;
    font-size: 1vw;
    font-family: 'Overpass Mono', monospace;
    text-align: left;
    line-height: 1.5;
    width: 68%;
    margin-top: -61vw;
}