<main class="container">
  <div class="water">
    <div class="H H1"></div>
    <div class="O"></div>
    <div class="H H2"></div>
  </div>
</main>

$divFactor: 3;
$diameterH: (2*120px)/$divFactor;
$diameterO: (2*155px)/$divFactor;
$vdistanceH: $diameterO*.03;
@mixin element($diameter, $color) {
  width: $diameter;
  height: $diameter;
  position: absolute;
  border-radius: 50%; 
  background-color: $color;
  -webkit-filter: blur(20px);
  filter: blur(20px);
}

/* General settings, for blob effect 
via https://css-tricks.com/shape-blobbing-css/
*/
body, html {
  background-color: black; 
}
.container {
  width: 100%;
  padding: 100px 0;
  overflow: hidden;
  background-color: black; 
  -webkit-filter: contrast(20);
  filter: contrast(20);
}

/* Water molecule */
.water {
  position: relative;
  width: ($diameterO + 2*$diameterH);
  height: ($diameterO + 2*$diameterH);
  margin: 0 auto;
  animation: spin 10s linear infinite both;
  
  .O {
    @include element($diameterO, #ED1B24);
    animation: bobUpDownO 2s ease-in-out infinite alternate both;
  }
  .H {
    @include element($diameterH, white);
    top: -$vdistanceH;
    animation: bobUpDown 2s ease-in-out infinite alternate both;
  }
  .H1 {
    left: -$diameterO + ($diameterO - $diameterH);
    //animation: bobLeftRight 0.5s ease-in-out infinite alternate both;
  }
  .H2 {
    left: $diameterO;
  }
}

/* Animations */
@keyframes bobUpDown {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY($vdistanceH*2 + ($diameterO - $diameterH));
  }
}
@keyframes bobUpDownO {
  from {
    transform: translateY($diameterO/3);
  }
  to {
    transform: translateY(-$diameterO/3);
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}