body {
  margin: 0;
}

.water {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 25vh;
  background: rgb(0,155,255);
  
  ul {
    list-style: none;
    padding: 0;
    
    li {
      width: 100px;
      height: 100px;
      margin: 0 auto;
      border-radius: 50%;
      background-color: rgba(0,0,0,0);
      transform: translate3d(0,-50px,0);
      animation: ripple 1.5s ease infinite;
    }
    
    &:after {
      content:"";
      position: absolute;
      top: 0px;
      left: 0;
      right: 0;
      z-index: 1;
      width: 100px;
      height: 100px;
      margin: 0 auto;
      border-radius: 50%;
      background: rgb(0,155,255);
      animation: bob 1.5s ease infinite;
    }
  }
}

@keyframes bob {
  0% {
    transform: translate3d(0,-50px,0);
  }
  50% {
    transform: translate3d(0,0px,0);
  }
  100% {
    transform: translate3d(0,-50px,0);
  }
}

@keyframes ripple {
  0% {
    box-shadow: 0px 0px 0 rgb(0,155,255), 0px 0px 0 rgb(0,155,255);
  }
  100% {
    box-shadow: -200px 40px 0 rgb(0,155,255), 200px 40px 0 rgb(0,155,255);
  }
}