/*#tampon {
  width: 100px;
  /*height: 150px;*
  background-color: #93c5e7;
  border-radius: 30px 30px 0px 0px;
  border: 2px solid #000;
  position: relative;
  overflow: hidden;
}*/

#animated-square {
  width: 100%;
  height: 10%;
  background: #a40e0e;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 15px 15px 0 0; /* Adjust the border-radius values for the rounded top edges */
  transition: height 0.1s ease; /* Smooth transition for the height change */
  --mask:
  radial-gradient(44.72px at 50% calc(100% - 60.00px),#000 99%,#0000 101%) calc(50% - 40px) 0/80px 100%,
  radial-gradient(44.72px at 50% calc(100% + 40.00px),#0000 99%,#000 101%) 50% calc(100% - 20px)/80px 100% repeat-x;
-webkit-mask: var(--mask);
        mask: var(--mask);
}



/* New code */
#pad, #tampon {
  height: 300px;
  width: 200px;
  cursor: grab;
}

#pad {
  background-image: url('images/pad.png');
  background-size: cover;
  background-repeat: no-repeat;
}

#tampon {
  background-image: url(images/tampon.png);
  background-size: cover;
  width: 100px;
  background-repeat: no-repeat; /* background-size: 93px auto; */
}

#tampon-blood {
  background: radial-gradient(circle at center, #a40e0e, #f86464);
  transition: height 0.15s ease-in;
}

#pad-blood-container {
  clip-path: url(#padClip);
  -webkit-clip-path: url(#padClip);
}

#pad-blood {
  margin-left: 12px; /* correct for image misalignment */
  clip-path: ellipse(farthest-side closest-side);
  background: radial-gradient(circle at center, #a40e0e, #f86464);
}