ply;
  image-rendering: pixelated;
}

.bottom {
  ...
  background-position: -200px 0px;

  &.r {
    background-position: -100px 0px;
  }

  &.g {
    background-position: -299px 0px;
  }

  &.w {
    background-position: -100px -100px;
    animation-name: ANIMATE-WATER;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
}

.top {
  ...
  background-position: 0px -200px;
}

@keyframes ANIMATE-WATER {
  from {
    background-position-x: -100px;
 