:root {
  --margin: 5rem;
}

body {
  margin-right: var(--margin);
  margin-left: var(--margin);
}


html * {
      font-family: Courier;
      /*font-weight: bolder;*/
    }
footer {
      /*padding: 10px 20px;*/
      padding: 2vw 2vw;
      background: springgreen;
      color: black;
      bottom : 0px;
      right : 0px;
      left:0px;
}

element{
      padding: 4vw 2vw;
      position: fixed;
      right: 0px;
      left : 500 px;
      top: 0px;
      height: 15px;
      background: springgreen;
      color:black;
      font-size: large ;
      font-weight: bold;
      z-index: 1;
    }
p{
  width: 500px;
    }
/*Parametres de mobile*/
@media screen and (max-width: 580px){
  body {
    margin: 1rem;
    margin-left: 1rem;
    /*margin-right: 1 rem;*/
  }
  element{
      left:0px;
      background: #5cffad;
      padding: 4vw 2vw;
      height: 4vw;
    }
  footer{
      background: #5cffad;
  }
  p{
    width: auto;
    }
}


address,a{
      font-style: normal;
      text-decoration: none;
      color:black;
    }

figcaption{
      padding: 2px;
      font-size: small;
    }

img { display: block; max-width: 100%; }

/* every .grid is a grid */
.gridlines,
header,
.grid {
  display: grid;
  gap: 0.5em;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 6em;
}

/* every .grid contains figures that are flex */
figure { 
  margin: 0; 
  display: flex; 
  align-items: flex-start;
}

/* avoid scrollable images */
img { max-height: 80vh; }

/* default size : 1 col */
figure {  grid-column-end: span 1;  }
/* sizes */
/*span : combien de collone ca prend*/
.size-huge { grid-column-end: span 3; margin-inline: calc( var(--margin) * -1); }
.size-big { grid-column-end: span 3; }
.size-medium { grid-column-end: span 2; }
.size-small { grid-column-end: span 1; }

/* alignments (vertical position in the container) */
.align-start { align-self: self-start; }
.align-center { align-self: center; }
.align-end { align-self: self-end; }

/* justification (horizontal position in the container) */
.justify-start { justify-self: self-start; justify-content: start;}
.justify-center { justify-self: center; justify-content: center;}
.justify-end { justify-self: self-end; justify-content: end;}

/* images sizes */
/* defaults to 100% */
/* size of the image within the container (that can be small medium big etc) */
.imgsize-medium img { width: 75%; }
.imgsize-medsmall img { width: 50%; }
.imgsize-small img { width: 33%; }

/* images adjustment */
/*.cover img { width: 100%; height: 100%; object-fit: cover;}*/
/*cover : Preserves the aspect ratio, and the image fills the container. Cuts overflowing content if needed.*/
.cover img { width: 100%; height: 100%; object-fit: cover;}
/*contain : Preserves the aspect ratio, and fits the image inside the container, without cutting - leaves empty space if needed.*/
.contain img { width: 100%; height: 100%; object-fit: contain;}   


.title {
  font-size: small;
  background-color: #FF0080;
  /*background-color: blue;*/
  color:black;
  font-weight: bolder;
  position: absolute;
  opacity: 0;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  padding: 10px 10px;;
}

figure:hover .title{opacity: 1};

/*Transparence des images*/
/*img { mix-blend-mode: multiply;}*/
/*

@media (max-width: 500px) {
    .element {
      position: fixed;
      right: 0px;
      top: 0px;
      background: pink;
      color:black;
      font-size: large ;
      font-weight: bold;
      z-index: 1;
    }
}
*/