.letter-o
  .counter
  

$background: #fffcf4
body 
  display: flex
  justify-content: center
  align-items: center
  height: 100vh
  background-color: $background
  
.letter-o
  background-color: black
  border-radius: 50%
  display: flex
  justify-content: center
  align-items: center
  box-shadow: 2vw 2vw 0 1px rgba(0, 0, 0, .2)
  +size(30vw)
  
.counter
  background-color: $background
  border-radius: 50%
  box-shadow: inset 2vw 2vw 0 1px rgba(0, 0, 0, .2)
  transform: translate3d(0, 0, 0) rotate(0deg)
  +size(20vw)
  +animator(counter, (duration: 6s, iteration-count: infinite, timing-function: cubic-bezier(.75,-1.21,.59,1.89)))
    12%, 25%
      +size(20vw 27vw)
    37%, 50%
      +size(15vw 27vw)
      transform: translate3d(0, 0, 0) rotate(8deg)
    63%, 75% 
      +size(23vw)
    87%
      +size(20vw)