.red i {
  color: #ff4500;
}

.beer {
  transition: background-color 0.3s;
  background-color: #999;
  border-radius: 50%;
  width: 1em;
  height: 1em;
}
.beer:hover {
  background-color: #ff7f50;
}
.beer:hover i {
  animation: shake 1s;
  animation-iteration-count: infinite;
}
.beer i {
  z-index: 1;
  color: #fff;
}

@keyframes shake {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(-10deg);
  }
  20% {
    transform: rotate(10deg);
  }
  30% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(-10deg);
  }
  60% {
    transform: rotate(0deg);
  }
  70% {
    transform: rotate(-10deg);
  }
  80% {
    transform: rotate(10deg);
  }
  90% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-10deg);
  }
}

/*# sourceMappingURL=app.css.map */