:root{
  --base-blue:#10bbe5;
  --highlight:#c5e8ee;
  --shadow: ;
}


html,body{
  background:black;
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}

.container{
  width: 200px;
  height: 200px;
  position: relative;
}

.waterfall-border{
  border: 10px solid rgba(0,0,0,0);
  width: 200px;
  height: 200px;
  overflow: hidden;
  position: relative;
  border-radius: 50%;
  z-index:10;
}

.waterfall-border:before{
  content:'';
  position:absolute;
  width:90%;
  height:90%;
  background:black;
  border-radius:50%;
  left:5%;
  top:5%;
  z-index:10;
}

.waterfall-load{
  width: 200px;
  height:0px;
  background:linear-gradient(#2f89ae,turquoise,#2f89ae,#115672);
  animation: increase 4s infinite;
  transform-origin: top;
  transform: rotatex(180deg);
  position:absolute;
  top:100%;
}

.waterfall{
  background: linear-gradient(navy,var(--base-blue));
  height: 100%;
  width: 40%;
  z-index: 20;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
}

.waterfall:before{
  content:'';
  top:0;
  position:absolute;
  width:100%;
  height:100%;  
  background:linear-gradient(transparent 20%, #d4f4fa, 60%, transparent 80%),url(https://github.com/gabrielajohnson/Codepen-Assets/blob/master/waterfall_texture.jpg?raw=true);
  animation: flowdown 0.5s infinite;
  transition: top linear;
  animation-timing-function: linear;
}

.waterfall:after{
  content:'';
  top:-100%;
  position:absolute;
  width:100%;
  height:100%; 
  background:linear-gradient(transparent 20%, #d4f4fa, 60%, transparent 80%),url(https://github.com/gabrielajohnson/Codepen-Assets/blob/master/waterfall_texture.jpg?raw=true);
  animation: flowdownafter 0.5s infinite;
  transition: top;
  animation-timing-function: linear;
}

.waterfall-foam{
  background: radial-gradient(rgba(255,255,255,0.9) 30%, rgba(255,255,255,0.7) 50%, transparent 70%);
  width: 70%;
  height: 50px;
  z-index: 45;
  position: absolute;
  bottom: -20px;
  border-radius:50%;
  margin:auto;
  left:20px;
  right:0;
}

.waterfall-foam:before{
  content:'';
  background: radial-gradient(rgba(255,255,255,0.9) 30%, rgba(255,255,255,0.7) 50%, transparent 70%);
  width: 50%;
  height: 40px;
  z-index: 45;
  position: absolute;
  bottom: 20px;
  border-radius:50%;
  margin:auto;
  left:-25px;
  right:0;
}

.waterfall-foam:after{
  content:'';
  background: radial-gradient(rgba(255,255,255,0.9) 30%, rgba(255,255,255,0.7) 50%, transparent 70%);
  width: 60%;
  height: 40px;
  z-index: 45;
  position: absolute;
  bottom: 0px;
  border-radius:50%;
  margin:auto;
  left:20px;
  right:0;
}

@keyframes increase{
  100%{
    height:200px;
  }
}

@keyframes flowdown{
  100%{
      top:100%;
  }
}

@keyframes flowdownafter{
  100%{
      top:0;
  }
}