@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

* {
  font-family: "Inter", sans-serif;
}

.gradient-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.skill-bar {
  height: 8px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 4px;
  animation: fillBar 2s ease-out;
}

@keyframes fillBar {
  from {
    width: 0;
  }
}

.typing-animation {
  border-right: 2px solid #667eea;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%,
  50% {
    border-color: transparent;
  }
  51%,
  100% {
    border-color: #667eea;
  }
}

.section-fade {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}

.section-fade.visible {
  opacity: 1;
  transform: translateY(0);
}

.nav-link {
  position: relative;
  transition: color 0.3s ease;
}

.nav-link::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -5px;
  left: 0;
  background: linear-gradient(90deg, #667eea, #764ba2);
  transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}