How to make 2 overlap circles with commen part?

I want to make this image( [1]: https://i.stack.imgur.com/avuBI.png) with css but my problem is middle part help me with that part

This is my code:

body{
  background:#09042A;
}
#left-circle,#middle,#right-circle{
  position:absolute;
}
#left-circle{
  top:75px;
  left:75px;
  height:150px;
  width:150px;
  border-radius:50%;
  background:#7B3F61;
  z-index:1;
}
#right-circle{
  top:75px;
  right:75px;
  height:150px;
  width:150px;
  border-radius:50%;
  background:#E78481;
  z-index:1;
}
#middle{
  top:95px;
  left:175px;
  height:110px;
  width:50px;
  border-radius:50%;
  background:#09042A;
  z-index:2;
}

<div id="left-circle"></div>
<div id="left-circle"></div>
<div id="middle"></div>
<div id="right-circle"></div>

My current situation is like this picture:https://i.stack.imgur.com/uXo1j.png

I appreciate your help