body {
    padding: 0;
    margin: 0;
    background-color: rgb(91, 161, 214);
    overflow: hidden;
}



.circle {
    border: 1px solid #ffffff50;
    border-radius: 50%;
    background-color: transparent;
    position: fixed;
 }
 
 @keyframes fade-effect {
    to {
       transform:scale(15);
       opacity: 0.01;
    }
 }

 .big-wave {
    background-color: rgba(56, 133, 192, 0.607);
    position: absolute;
    bottom: -25%;
    width: 100%;
    height: 25%;
    filter: blur(20px);
 }

 @keyframes big-wave-anim {
    to{
        bottom: 100%;
    }
 }
 
 .fish {
    transform-origin: 50% 0%;
    background-color: transparent;
    position: absolute;
    filter: sepia(50%);
 }

 .shiny {
   filter: drop-shadow(0px 0px 5px #f9f8f8c2) sepia(0%) saturate(5); 
 }



 .leaf {
   width: 100px;
   height: auto;

 }

 #leaf-points-complex {
   width: 100px;
   height: 100px;
   position: fixed;
   top: 10px;
   left: 5px;
   z-index: 50;
   transform-origin: 50px 50px;
   animation-name: leaf-rotation;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-direction: alternate;
   animation-timing-function: ease-in-out;
 }

 @keyframes leaf-rotation {
   from {
      transform: rotate(25deg);
   }
   to {
      transform: rotate(0deg);
   }
   
 }



 #sun-spot {
   position: absolute;
   top: 100px;
   left: 100px;
   width: 200px;
   height: 200px;
   filter: blur(5px);
   opacity: 30%;

   animation-name: sun-spot-rotation;
   animation-duration: 10s;
   animation-iteration-count: infinite;

   animation-timing-function: linear;
 }

 @keyframes sun-spot-rotation {
   from {
      transform: rotate(0turn);
   }
   to {
      transform: rotate(1turn);
   }
   
 }

 #points-element {
   position: absolute;
   top: 15px;
   left: 20px;
   color: rgb(117, 228, 115);
 }