
<style>
#chevrons {
	width: 100%;
	max-width: 90px;
}
.chev {
  --speed: 0.75s;
  --delay: 0.1s;
  --opacityLow: 0.5;
  fill: #00e4bb;
  stroke-width: 0px;
  transform: scale(1) translate(0);
  animation: pulse1 0.75s infinite;
}
.chev-reversed {
        top: 20%;
        left: 80%;
        transform: rotate(180deg);
    }

.chev2 {
  animation-delay: calc(var(--delay) * 1);
}
.chev3 {
  animation-delay: calc(var(--delay) * 2);
}

@keyframes pulse1 {
  0% {
    transform: scale(1.1) translateX(0) translateY(-5%);
    opacity: 1;
  }

  75% {
    transform: scale(1) translateX(5%) translateY(0%);
    opacity: var(--opacityLow);
  }

  100% {
    transform: scale(1.1) translateX(0) translateY(-5%);
    opacity: 1;
  }
}
</style>
