.framework-icon {
  height: 5vh;
  transform-style: preserve-3d;
  user-select: none;
}

.framework-icon.spin {
  animation: spinY 1s ease-out forwards;
}

@keyframes spinY {
  from {
    transform: rotateY(0deg);
  }

  to {
    transform: rotateY(360deg);
  }
}

.hover-scale-up {
  --rotate: rotateX(0deg) rotateY(0deg);
  transform: scale(1) var(--rotate);
  transition: transform 0.2s ease;
  transform-style: preserve-3d;
}

.hover-scale-up:hover {
  transform: scale(1.05) var(--rotate);
}

canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: all;
}

.signal-down {
  position: absolute;
  bottom: 0;
  right: 50%;
  transform: translate(50%, 0);
  animation: bounce 2.5s ease-in-out infinite;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-30px);
  }

  100% {
    transform: translateY(0);
  }

}