Softly moving divs

I have this two blurred circles.

In the 1st step I would like to float around the screen randomly in a soft manner. There are a lot of examples with linear movements but I am imagining something more organic, think underwater. I don't really know how to go about it.

In the 2nd step I would like the mouse position to slightly influence those movements.

Hope someone can help me. Thanks a lot :)

 #c1{ 
  position: fixed;
  height: 150px;
  width: 150px;
  background: rgba(135,125,121,.8);
  border-radius: 50%;
  filter: blur(50px);
  transform: translate(20%, 20%);

   
   }
   
  #c2{ 
  position: fixed;
  height: 200px;
  width: 200px;
  background: rgba(135,125,21,.8);
  border-radius: 50%;
  filter: blur(50px);
  transform: translate(100%, 20%);
   
   }

<div id="c1"></div>
<div id="c2"></div>