@import url("./reset.css");

/* VARIABLES */
:root{
  --main-col: rgb(67, 62, 73);
  --font-text: 'sans-serif-regular', Verdana, sans-serif;
  --font-h1: 'serif-regular', Georgia, serif;
  --font-h2: 'serif-italic', Georgia, serif;
}

/*Import Fonts*/
@font-face {
  font-family: 'serif-regular';
  src: url(fonts/SortsMillGoudy-Regular.ttf);
}

@font-face {
  font-family: 'serif-italic';
  src: url(fonts/SortsMillGoudy-Italic.ttf);
}

@font-face {
  font-family: 'sans-serif-regular';
  src: url(fonts/SourceSansPro-Regular.ttf);
}

h1{
  font-size: 3rem;
  font-weight: normal;
  font-family: var(--font-h1);
}

h2{
  font-size: 2rem;
  font-weight: normal;
  font-family: var(--font-h2);
}

.centre{
  margin: auto;
  text-align: center;
}

.titre{
  margin: auto;
  width: 80%;
  padding: 10px 0;
}
.bottom-space{
  padding-bottom: 100px;
}
.temoignage{
  font-family: var(--font-text);
  font-size: 1.1rem;
  margin: auto;
  width: 60%;
  text-align: justify;
}

.message{
  text-align: right;
}

.portrait{
  max-width: 25%;
  padding: 2rem;
}

.display-text{
  display: none;
}

.texte-de:hover{
  cursor: pointer;
}

.flèche{
  float: right;
  color: rgb(143, 143, 143);

}

/*------ Mini Masonry ------*/
.wall{
  padding-top: 3rem;
  margin: auto;
  width: 70%;
  position: relative;
  /* border: solid 1px black; */
}

.wall img{
  max-width: 100%;
  position: absolute;
  overflow: hidden;
}


/*----------------------------*/

@media all and (max-width: 1200px){
  .portrait{
    max-width: 50%;
  }
  .wall{
    width: 90%;
  }
  .temoignage{
    width: 70%;
  }
}

@media all and (max-width: 590px){
  .portrait{
    max-width: 100%;
  }
  .wall{
    width: 100%;
  }
  .temoignage{
    width: 80%;
  }
  .titre{
    width: 100%;
  }
}