body {
    background-color: #7e36b5; 
  }



  .cerceve {
    height: 500px;
    width: 500px;
    position: fixed; 
    transform: translate(-50%, -50%);
    left: 70%;
    top: 70%;
  }
  .kapsul{
    position: relative;
    height: 240px;
    width: 160px;
    border-radius: 180px 180px 0 0;
    background-color: whitesmoke;
 
animation:  float 4s infinite;

  }
  @keyframes float {
    0% {top: 0px;}

    50%{top: 200px;}
100%{top: 0;}
  }

 


  .kapsul::before{
    
    content: "";
    position: absolute;
    width: 160px;
    height: 30px;
    background-color: yellow;
    bottom: -0px;


  }

  .kapsul::after{

    content: "";
    position: absolute;
    width: 160px;
    height: 90px;
    background-color: rgb(235, 154, 34);
    bottom: -90px;
    border-radius: 0 0 90px 90px;
    z-index: 1;


  }
  

  .yuz{

   position: absolute;
   height: 160px;
   width: 120px;
   background-color: #3fbf5e;
   bottom: 30px;
   border-radius: 140px 140px 0 0;
   left: 21px;
   z-index: 1;
   

  }


  .mond{


    position: absolute;
    background-color: rgb(27, 42, 31);
    width: 50px;
    height: 30px;
    border-radius: 0 0 20px 20px;
    bottom: 20px;
    left: 38px;
  }



  .mond::after{

    content: "";
    position: absolute;
    background-color: white;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    top: -92px;
    left: -12px;



  }

  
  .mond::before{
    position: absolute;
  content: "";
  height: 20px;
  width: 40px;
  border: 6px solid #000000;
  border-bottom: transparent;
  border-radius: 30px 30px 0 0;
  left:-2px;
  top: -80px;
  z-index: 1;
    

  }


  .alien:after {
    position: absolute;
    content: "";
    height: 20px;
    width: 40px;
    border: 8px solid #000000;
    border-bottom: transparent;
    border-radius: 60px 60px 0 0;
    left: 40px;
    top: 50px;
    z-index: 1;
  }



.detay{

position: relative;
width: 39px;
height:20px;
border-radius: 50px 50px 0 0 ;
border: 6px  solid #3fbf5e;
transform: rotate(-310deg);
z-index: 0;
border-bottom:none ;
top: -18px;
left: 9px;

    }

    .detay::after{
        content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  background-color: #3fbf5e;
  border-radius: 50%;
  bottom: -18px;
  left: -15px;
 
            }
        

.detay2{

    position: relative;
    width: 39px;
    height:20px;
    border-radius: 50px 50px 0 0 ;
    border: 6px  solid #3fbf5e;
    transform: rotate(-35deg);
    z-index: 0;
    border-bottom:none ;
    top: -42px;
    left: 65px;

}


.detay2::after{

    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    background-color: #3fbf5e;
    border-radius: 50%;
    top: 10px;
    left: 33px;
    z-index: 1;

}


.ayak{

   position: absolute;
   height: 20px;
   width: 120px;
   border: 10px solid rgb(235, 154, 34);
   border-radius: 120px 120px  0 0;
   border-bottom: none;
   top: 250px;
   left: -10px;
   

}