body {
    margin: 0;
    padding: 0;
    background: #262626;
}

.kart {
    position: absolute;
    top: 85%;
    left: 30px;
    right: 30px;
    transform-origin: top center;
    animation-direction: alternate;
}
.fishbowl {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border: 4px solid #fff;
    transform-origin: bottom center;
    animation: animateBowl 12s linear infinite;
}

.fishbowl:before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    height: 30px;
    background: #333;
    border: 4px solid #fff;
    border-radius: 50%;
}

.fishbowl:after {
    content: '';
    position: absolute;
    top: 33%;
    left: 35%;
    transform: translate(-50%, -50%);
    width: 140px;
    height: 110px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 50%;
}

.water {
    position: absolute;
    top: 50%;
    left: 5px;
    right: 5px;
    bottom: 5px;
    background: rgba(59, 189, 249, 0.5);
    border-bottom-right-radius: 150px;
    border-bottom-left-radius: 150px;
    transform-origin: top center;
    animation: animateWater 12s linear infinite;
}

.water:before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 20px;
    border-radius: 50%;
    background: #25a5e1;
}

.bowlShadow {
    position: absolute;
    top: calc(50% + 155px);
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
    height: 30px;
    background: rgba(0,0,0,0.2);
    z-index: -1;
    border-radius: 50%;
}

img.shark {
    position: absolute;
    top: 15px;
    width: 100px;
    animation: animateShark 8s linear infinite;
}
@keyframes animateShark {
    0% {
        transform: translate(0,0) rotateY(180deg);
    }
    50% {
        transform: translate(100px,0) rotateY(180deg);
    }
    51% {
        transform: translate(100px,0) rotateY(0deg);
    }
    100% {
        transform: translate(0,0) rotateY(0deg);
    }
}

img.shark2 {
    position: absolute;
    top: 55%;
    width: 50px;
    animation: animateShark2 6s linear infinite;
}

@keyframes animateShark2 {
    0% {
        transform: translate(20px,0) rotateY(180deg);
    }
    50% {
        transform: translate(175px,0) rotateY(180deg);
    }
    51% {
        transform: translate(175px,0) rotateY(0deg);
    }
    100% {
        transform: translate(20px,0) rotateY(0deg);
    }
}


.pot{
   bottom:15%;
   position:absolute;
   -webkit-animation:linear infinite;
   -webkit-animation-name:run;
   -webkit-animation-duration:8s;
}

@-webkit-keyframes run  {
   0% {
      left:0;
      -webkit-transform:rotateY(0deg);
   }
   
   50% {
      left:82%;
      -webkit-transform:rotateY(0deg);
   }
   
   51% {
      -webkit-transform:rotateY(180deg);
   }
   
   99% {
      left:0;
      -webkit-transform:rotateY(180deg);
   }
   
   100% {
      left:0;
      -webkit-transform:rotateY(0deg);
   }

}

@keyframes animateWater {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-20deg);
    }
    50% {
        transform: rotate(0deg);
    }
    75% {
        transform: rotate(20deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes animateBowl {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    25% {
        transform: translate(-50%, -50%) rotate(15deg);
    }
    50% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    75% {
        transform: translate(-50%, -50%) rotate(-15deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
}