App.css

html,
body {
  padding: 0;
  margin: 0;
  background: black;
  color: white;
  height: 100%;
  font-family: system-ui;
}
:root {
  --ring-animation-period: 0.8;
  /* Default value, can be overridden in JS. */
  --ringtone-bpm: calc(60 / var(--ring-animation-period));
}

@keyframes pulse-green {
  0% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
    transform: scale(1);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(76, 175, 80, 0);
    transform: scale(1.08);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
    transform: scale(1);
  }
}
@keyframes ringing {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(-16deg);
  }
  20% {
    transform: rotate(12deg);
  }
  30% {
    transform: rotate(-8deg);
  }
  40% {
    transform: rotate(6deg);
  }
  50% {
    transform: rotate(-4deg);
  }
  60% {
    transform: rotate(3deg);
  }
  70% {
    transform: rotate(-2deg);
  }
  80% {
    transform: rotate(1deg);
  }
  90% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.acceptCallButton {
  /* Fallback in case the browser doesn't support CSS variables. */
  animation: infinite 1.6s pulse-green;

  --base-animation-period: calc(60s / var(--ringtone-bpm));
  animation: infinite calc(2 * var(--base-animation-period)) pulse-green;
}
.acceptCallButton > * {
  /* Fallback in case the browser doesn't support CSS variables. */
  animation: infinite linear 0.8s ringing;

  /* Apply this one to the another element,
  so that the `transform`s from the two animations don't override each other. */
  /* Let's not make this depend on `--ringtone-bpm` because it looks ugly
  when it's too fast or too slow. */
  animation: infinite linear calc(var(--ring-animation-period) * 1s) ringing;
}