.innerCircle {
  composes: borderBox from "./Layout.css";
  animation-duration: 5s;
  animation-iteration-count: inherit;
  animation-name: pulse-animation;
  border: 8px solid var(--color-border-pulsar-default);
  border-radius: 50%;
  height: 100%;
  opacity: 1;
  width: 100%;
}

.innerCircle:focus,
.innerCircle:hover {
  border-color: var(--color-border-pulsar-hover);
}

.outerCircle {
  animation-delay: 0.8s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-name: appear-animation;
  opacity: var(--opacity-0);
}

@keyframes appear-animation {
  from {
    opacity: var(--opacity-0);
  }

  to {
    opacity: 1;
  }
}

@keyframes pulse-animation {
  0% {
    opacity: var(--opacity-0);
    transform: scale(0.8);
  }

  20% {
    opacity: 1;
    transform: scale(1);
  }

  40% {
    opacity: 1;
    transform: scale(0.8);
  }

  60% {
    opacity: 1;
    transform: scale(1);
  }

  80% {
    opacity: var(--opacity-0);
    transform: scale(0.8);
  }

  100% {
    opacity: var(--opacity-0);
  }
}