.indicator {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s linear, transform 0.2s ease;
}

.visible {
  opacity: 1;
}

.arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.arrowLeft {
  composes: arrow;
  margin-left: -50px;
}

.arrowRight {
  composes: arrow;
  margin-left: 50px;
}

.arrowLeft div {
  animation: nudgeLeft 4s infinite ease;
}

.arrowRight div {
  animation: nudgeRight 4s infinite ease;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  font-size: 30px;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
  margin-top: -3px;
  margin-left: 3px;
}

.indicator svg {
  transition: transform 0.2s ease;
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 1px 4px #000);
}

*:hover > .indicator svg {
  transform: scale(1.2);
}

@keyframes nudgeLeft {
  0% {
  }
  50% {
    transform: translateX(-10px);
  }
  100% {
  }
}

@keyframes nudgeRight {
  0% {
  }
  50% {
    transform: translateX(10px);
  }
  100% {
  }
}
