*{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}
 section{
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
     background: #121212;
}
 .bowl{
     position: relative;
     width: 300px;
     height: 300px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 50%;
     border: 8px solide transparent;
     animation: animate 5s linear infinite;
     transform-origin: bottom center;
     animation-play-state: run;
}
 @keyframes animate {
     0%{
         transform: rotate(0deg);
    }
     25%{
         transform: rotate(22deg);
    }
     50%{
         transform: rotate(0deg);
    }
     75%{
         transform: rotate(-22deg);
    }
     100%{
         filter: hue-rotate(360deg);
    }
}
 .bowl : : before{
     content: ' ' ;
     position: absolute;
     top: -15px;
     left: 50%;
     transform: translateX(-50%);
     width: 40%;
     height: 30px;
     border: 15px solid #444;
     border-radius: 50%;
     box-shadow: 0 10px #222;
}
 .bowl : : after{
     content: ' ' ;
     position: absolute;
     top: 35px;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 150%;
     height: 60px;
     background: rgba(255, 255, 255, 0.05);
     transform-origin: center;
     animation: animatebowlshadow 5s linear infinite;
     border-radius: 50%;
     animation-play-state: running;
}
 @keyframes animatebowlshadow {
     0%{
         left: 50%;
         width: 150px;
         height: 60px;
    }
     25%{
         left: 55%;
         width: 140px;
         height: 65px;
    }
     50%{
         left: 50%;
         width: 150px;
         height: 60px;
    }
     75%{
         left: 45%;
         width: 140px;
         height: 65px;
    }
     100%{
         left: 50%;
         width: 150px;
         height: 60px;
    }
}
 .liquid{
     position: absolute;
     top: 50%;
     left: 5px;
     right: 5px;
     bottom: 5px;
     background: #1ae907;
     border-bottom-left-radius: 150px;
     border-bottom-right-radius: 150px;
     filter: drop-shadow(0 0 80px #1ae907);
     transform-origin: top center;
     animation: animateliquid 5s linear infinite;
     animation-play-state: running;
}
 @keyframes animateliquid {
     0%{
         transform: rotate(0deg);
    }
     25%{
         transform: rotate(-22deg);
    }
     30%{
         transform: rotate(-23deg);
    }
     50%{
         transform: rotate(0deg);
    }
     75%{
         transform: rotate(22deg);
    }
     100%{
         transform: rotate(0deg);
    }
}
 .liquid::before{
     content: ' ';
     position: absolute;
     top: -10px;
     width: 100%;
     height: 20px;
     background: #15be05;
     border-radius: 50%;
     filter: drop-shadow(0 0 80px #15be05);
}
 .shadow{
     position: absolute;
     top: calc(50% + 150px);
     width: 250px;
     height: 40px;
     left: 50%;
     transform: translate(-50%, -50%);
     background: rgba(0, 0, 0, 0.5);
     border-radius: 50%;
     animation: animateshadow 5s linear infinite;
     animation-play-state: running;
}
 @keyframes animateshadow {
     0%{
         left: 50%;
         width: 260px;
         height: 40px;
         top: calc(50% + 150px);
    }
     25%{
         left: 55%;
         width: 265px;
         height: 30px;
         top: calc(50% + 130px);
    }
     75%{
         left: 50%;
         width: 260px;
         height: 40px;
         top: calc(50% + 150px);
    }
     75%{
         left: 45%;
         width: 265px;
         height: 30px;
         top: calc(50% + 130px);
    }
     100%{
    }
}