body {
  overflow: hidden;
  background-color: black;
  color: white;
  font-family: sprat;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
  background-image: url(../meduses/fond_algues.png);
}


p{
  justify-items: flex-end;
  font-size: 1.3em;
  margin-top: 1em;
  padding-left: 5em;

  /*display: flex;
  font-size: 1.3em;
  padding-bottom: 42vw;
  flex-direction: column;
  padding-left: 1em;*/


}





h1 {
  text-transform: uppercase;
  font-weight: normal;
  max-width: 1em;
  padding-left: 1em;
  line-height: 1.2em;
  text-align:justify;
  /*display: flex;
  text-transform: uppercase;
  font-weight: normal;
  flex-direction: column;
  max-width: 1em;
  margin-top: -2em;
  line-height: 1.2em;
  margin-left: 1em;*/

  
}

img {
  position: absolute;
  opacity: 0.5;
  pointer-events: auto;

  animation: move 12s infinite ease-in-out,
   rotate 20s infinite linear;
}


img:hover {
  opacity: 1;
  filter: brightness(110%) saturate(130%);
}


@keyframes move {
  0%   { transform: translate(0vw, 0vh); }
  25%  { transform: translate(30vw, 20vh); }
  50%  { transform: translate(60vw, -20vh); }
  75%  { transform: translate(-20vw, 30vh); }
  100% { transform: translate(0vw, 0vh); }
}


@keyframes rotate {
  from { rotate: 0deg; }
  to   { rotate: 360deg; }
}




.algue:nth-child(1) { top: 26%; left: 75%; animation-duration: 18s; }
.algue:nth-child(2) { top: 10%;  left: 5%; animation-duration: 9s; }
.algue:nth-child(3) { top: 90%; left: 50%; animation-duration: 13s; }
.algue:nth-child(4) { top: 23%; left: 56%; animation-duration: 11s; }
.algue:nth-child(5) { top: 10%; left: 60%; animation-duration: 10s; }
.algue:nth-child(6) { top: 60%; left: 75%; animation-duration: 11s; }
.algue:nth-child(7) { top: 2%; left: 75%; animation-duration: 18s; }
.algue:nth-child(8) { top: 10%; left: 25%; animation-duration: 10s; }
.algue:nth-child(9) { top: 30%; left: 80%; animation-duration: 9s; }
.algue:nth-child(10) { top: 36%; left: 50%; animation-duration: 12s; }
.algue:nth-child(11) { top: 26%; left: 75%; animation-duration: 18s; }
.algue:nth-child(12) { top: 10%;  left: 5%; animation-duration: 9s; }
.algue:nth-child(13) { top: 90%; left: 5%; animation-duration: 13s; }
.algue:nth-child(14) { top: 80%; left: 56%; animation-duration: 11s; }
.algue:nth-child(15) { top: 22%; left: 40%; animation-duration: 10s; }
.algue:nth-child(16) { top: 55%; left: 75%; animation-duration: 18s; }
.algue:nth-child(17) { top: 46%; left: 23%; animation-duration: 15s; }

.coquillage:nth-child(1)  { top: 20%; left: 20%; animation-duration: 13s; }
.coquillage:nth-child(2)  { top: 50%; left: 10%; animation-duration: 11s; }
.coquillage:nth-child(3)  { top: 70%; left: 60%; animation-duration: 15s; }
.coquillage:nth-child(4)  { top: 15%; left: 50%; animation-duration: 12s; }
.coquillage:nth-child(5)  { top: 85%; left: 35%; animation-duration: 8s; }
.coquillage:nth-child(6) { top: 40%; left: 80%; animation-duration: 14s; }
.coquillage:nth-child(7) { top: 25%; left: 25%; animation-duration: 10s; }

.meduse2:nth-child(1)  { top: 50%; left: 5%;  animation-duration: 14s; }
.meduse2:nth-child(2)  { top: 80%; left: 20%; animation-duration: 10s; }
.meduse2:nth-child(3)  { top: 30%; left: 70%; animation-duration: 16s; }
.meduse2:nth-child(4)  { top: 60%; left: 40%; animation-duration: 9s; }
.meduse2:nth-child(5)  { top: 20%; left: 90%; animation-duration: 13s; }
.meduse2:nth-child(6)  { top: 50%; left: 10%; animation-duration: 11s; }

/* Variations de direction */
.algue:nth-child(even) {
  animation-direction: reverse;
}


.perle{
  height: 70px;
  opacity: 100%;
  position: absolute;
  top: 90%;
  left: 60%;
  filter: blur(110%);
}

.perle:hover{
  filter: brightness(200%);
}

@font-face {
  font-family: sprat;
  src: url(../font/sprat-main/sprat-main/fonts/Sprat-CondensedLight.woff2);
}

img:active{
    opacity: 1;
    filter: brightness(110%) saturate(130%);

 
}