.stain {
  display: block;
  border-radius: 50%;
  filter: drop-shadow(0px 1px 1px rgba(100,100,100,0.2));
}

/*
.stain .decor {
  width: 98%;
  height: 98%;
  background: #f0f;
  mask:
  position: absolute;
  margin: 1%;
  border-radius: 50%;
  background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0) 50%, rgba(255,255,255,0));
}
*/

#stainsFrame {
  top: 0;
  left: 0;
  position: absolute;
  overflow: hidden;
  height: 100%;
  width: 100%;
  z-index: 0;
}

.bleu{background-color: #474AFF;}
.ciel{background-color: #47E1FF;}
.rouge{ background-color: #FF180D;}
.jaune{ background-color: #FFFB51;}
.moutarde{ background-color: #FFC93A;}
.pourpre{ background-color: #5E2F8F;}
.violet{ background-color: #BF13A9;}
.orange { background-color: #FF9127;}
.rose{ background-color: #E82F74;}
.vert {background-color: #90FF1A;}
.turquoise {background-color: #13A6BF;}

@keyframes dripOff {
  from {
    transform: rotateX(90deg);
  }

  to {
    transform: rotateX(0);
  }
}

.drip {
  transform-origin: 0 0;
  animation-duration: 2s;
  animation-name: dripOff;
  position: absolute;
  display: block;
  top: 50%;
  border-radius: 5px;
}