/* LESS Vars */
@ClrPacMan: #00a108; // Adjust this value to change the color
@ClrTag: #00ff0d; // Adjust this value to change the color
@pacman-zise: 70px;

.pac-man {
  border-radius: 50%;
  margin: 0 auto;
  margin-left: calc((100% - 300px) / 2);
  margin-top: 20px;
  margin-bottom: 40px;
  border-radius: 100em 100em 0 0;
  background: #f00;
  transform-origin: bottom;
  animation: eating-top .5s infinite;
  
  &, &::after {
    width: @pacman-zise;
    height: calc(@pacman-zise/2);
    background: @ClrPacMan;
  }
  
  &::after {
    content: '';
    display: block;
    margin-top: calc(@pacman-zise/2);
    position: absolute;
    transform-origin: top;
    border-radius: 0 0 100em 100em;
    transform: rotate(80deg);
    animation: eating-bottom .5s infinite;
  }
  
  &::before {
    position: absolute;
    border-radius: 100em;
    content: '';
    display: block;
    height: 20px;
    width: 20px;
    margin-top: calc((@pacman-zise / 2) - 10px);
    margin-left: calc((@pacman-zise / 2) - 10px);
    transform-origin: center;
    animation: 
      center .5s infinite,
      ball .5s -.33s infinite linear;
  }
}

@keyframes eating-top{
  0%{ transform: rotate(-40deg); }
  50% { transform: rotate(0deg); }
  100%{ transform: rotate(-40deg); }
}

@keyframes eating-bottom{
  0%{ transform: rotate(80deg); }
  50% { transform: rotate(0deg); }
  100%{ transform: rotate(80deg); }
}

@keyframes center{
  0%{ transform: rotate(40deg); }
  50% { transform: rotate(0deg); }
  100%{ transform: rotate(40deg); }
}

@keyframes ball{
  0%{ 
    opacity: .7;
    box-shadow: 
      60px 0 0 0 @ClrTag,
      100px 0 0 0 @ClrTag,
      140px 0 0 0 @ClrTag,
      180px 0 0 0 @ClrTag,
      220px 0 0 0 @ClrTag,
      260px 0 0 0 @ClrTag
    ;
  }
  100% { 
    box-shadow: 
      20px 0 0 0 @ClrTag,
      60px 0 0 0 @ClrTag,
      100px 0 0 0 @ClrTag,
      140px 0 0 0 @ClrTag,
      180px 0 0 0 @ClrTag,
      220px 0 0 0 @ClrTag
    ;
  }  
}