html {
  scroll-behavior: smooth;
}

.ripple {
  position: absolute;
  width: 100px;
  height: 100px;
  background: rgba(156, 39, 176, 0.3);
  border-radius: 9999px;
  transform: scale(0);
  animation: ripple-animation 0.6s linear;
  pointer-events: none;
  z-index: 10;
}

@keyframes ripple-animation {
  to {
    transform: scale(2.5);
    opacity: 0;
  }
}

nav a {
  position: relative;
  overflow: hidden;
}