.nav-link {
        color: rgb(209 213 219);
        display: inline-block;
        font-weight: 500;
        transition-property: all;
        transition-duration: 300ms;
      }
      .nav-link:hover {
        color: rgb(129 140 248);
        transform: scale(1.1);
      }

       @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
          }

          
    .particle {
      position: absolute;
      width: 6px;
      height: 6px;
      background: rgba(99, 102, 241, 0.2);
      border-radius: 50%;
      animation: float 15s infinite linear;
    }
    
    .particle:nth-child(1) {
      top: 20%;
      left: 20%;
      animation-delay: 0s;
    }
    
    .particle:nth-child(2) {
      top: 50%;
      left: 50%;
      animation-delay: 5s;
    }
    
    .particle:nth-child(3) {
      top: 80%;
      left: 80%;
      animation-delay: 10s;
    }
    
    @keyframes float {
      0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
      }
      50% {
        transform: translate(100px, -100px) rotate(180deg) scale(1.5);
      }
      100% {
        transform: translate(0, 0) rotate(360deg) scale(1);
      }
    }
   .particle {
      position: absolute;
      width: 8px;
      height: 8px;
      background: rgba(99, 102, 241, 0.2);
      border-radius: 50%;
      }
      @keyframes float1 {
      0%, 100% { transform: translate(0, 0) rotate(0deg); }
      50% { transform: translate(100px, -100px) rotate(180deg); }
      }
      @keyframes float2 {
      0%, 100% { transform: translate(0, 0) rotate(0deg); }
      50% { transform: translate(-150px, -80px) rotate(-180deg); }
      }
      @keyframes float3 {
      0%, 100% { transform: translate(0, 0) rotate(0deg); }
      50% { transform: translate(80px, -120px) rotate(90deg); }
      }
      .animate-float1 { animation: float1 15s infinite; }
      .animate-float2 { animation: float2 18s infinite; }
      .animate-float3 { animation: float3 20s infinite; }

       @keyframes moveRay {
          0% { transform: translateX(-100%) rotate(45deg); }
          100% { transform: translateX(200vw) rotate(45deg); }
        }

        .hobby-card {
          background-color: rgba(55, 65, 81, 0.3);
          padding: 1.5rem;
          border-radius: 0.75rem;
          text-align: center;
          transition: all 0.3s;
          border: 1px solid rgba(99, 102, 241, 0.1);
        }
        .hobby-card:hover {
          background-color: rgba(55, 65, 81, 0.5);
          transform: translateY(-0.5rem);
          border-color: rgba(99, 102, 241, 0.3);
        }

         #snake {
        animation: snakeMove 20s linear infinite;
      }
      @keyframes snakeMove {
        0% { transform: translate(0, 0); }
        25% { transform: translate(100%, 100px); }
        50% { transform: translate(0, 200px); }
        75% { transform: translate(-100%, 100px); }
        100% { transform: translate(0, 0); }
      }