@import "tailwindcss";


@custom-variant dark (&:where(.dark, .dark *));
/* @custom-variant light (&:where(.light, .light *)); */


.nav-link {
    position: relative;
  }

  .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 3px;
    background: currentColor;
    transition: width 0.3s ease;
  }

  .nav-link:hover::after {
    width: 100%;
  }
  .skill-card {
    width: 5.5rem;
    height: 5.5rem;
    background: white;
    border-radius: 1rem; /* change to 50% for circle */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .skill-card:hover {
    transform: translateY(-6px) scale(1.08);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  }

  .project-card {
    color: black;
    background: white;
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .project-card:hover {
    transform: scale(1.06);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    z-index: 10;
  }