html, body {

  box-sizing: border-box;
}


body {
  font-family: 'Raleway', sans-serif;
  padding: 0px;
  margin:0px;

  color:white; /* couleur du texte */
  background-color: black;

  display: flex;
  flex-direction: column;

}



.thumbnail {
  position: relative;
  overflow: hidden;

  border-radius: 2vw 2vw;
}
.thumbnail img {
  /* contain so every picture is shown in full inside the square thumbnail,
     regardless of orientation. Letterboxing on the short axis is preferred
     over silent cropping. */
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}

/* Opt-in per-project: crop images to fill the square thumbnail
   (driven by mImageFitCover in ProjectPublicationSettings). */
body.img-fit-cover .thumbnail img {
  object-fit: cover;
}

/* Big image on card view: the image dictates its own aspect ratio. The
   container shrink-wraps it, so portrait stays portrait and landscape stays
   landscape instead of being centered inside a fixed square (which produced
   visible empty bands on either side).
   Overrides the .thumbnail img absolute positioning above
   (specificity 0,2,1 > 0,1,1). */
.main_image img.main_image_source {
  position: static;
  transform: none;
  left: auto;
  top: auto;
  display: block;
  max-width: 50vw;
  max-height: 80vh;
  width: auto;
  height: auto;
}