.canvas-skills {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  /* Perfect centering */
  height: 450px;
  width: 450px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.07);
  cursor: pointer;
  /* z-index: 15; */
  /* background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.02),
    rgba(54, 234, 238, 0.02)
  ); */
  /* Layered background for depth */
  background: 
    radial-gradient(circle at center, rgba(54, 234, 238, 0.03), transparent 70%),
    rgba(10, 30, 35, 0.95);  /* Slightly more opaque */
  
  border: 1px solid rgba(54, 234, 238, 0.3);  /* Softer border */
  
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),  /* Softer main shadow */
    0 0 20px rgba(54, 234, 238, 0.4),  /* Softer glow */
    inset 0 1px 0 rgba(255, 255, 255, 0.1);  /* Inner highlight */
}




@keyframes shine {
  from { opacity: .3 }
  to { opacity: .7 }
}