body::-webkit-scrollbar {
    width: 8px;                
  }
  
  body::-webkit-scrollbar-track {
    background: white;       
  }

  
  body::-webkit-scrollbar-thumb {
    background-color: rgb(0, 0, 0);    
    cursor: pointer; 
      
   }  







   
   .wrap{
    flex-direction: row;
    justify-content: center;
    height: 60vh;
    display: flex;   
 }        
.circle{
   width: 22rem;
   height: 22rem;
   border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
   overflow: hidden;
   animation: morph 4s linear infinite;
   cursor: pointer;
}
.circle img{
    width:100%;
}
@keyframes morph{
    0%, 100%{
        border-radius:  40% 60% 70% 30% / 40% 40% 60% 50%;
    }
    34%{
        border-radius:  70% 30% 50% 50% / 30% 30% 70% 70%;
    }
    67%{
        border-radius:  100% 60% 60% 100% / 100% 100% 60% 60%;

    }}
 

 

@media screen and (max-width:800px){/*quando a tela estiver nesse tamanho essaes botoes aparecem*/
    *body{
        text-align: center;
        align-items: center;
        justify-content: center;
    }
.wrap{
     height: 60vh;
     display: block;
}
.circle{
   width: 19rem;
 
   height: 19rem;
}
    }