/* Base Styles */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.6;
}

/* Skill Cards */
.skill-card {
    @apply bg-white dark:bg-gray-800 p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300;
    @apply border border-gray-200 dark:border-gray-700;
    @apply flex flex-col items-center text-center gap-4;
}

.skill-card i {
    @apply w-12 h-12 flex items-center justify-center rounded-full bg-primary-500/10;
    @apply text-2xl;
}

/* Project Cards */
.project-card {
    @apply bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-all duration-300;
    @apply border border-gray-200 dark:border-gray-700;
}

.project-image {
    @apply h-48 w-full relative overflow-hidden;
}

.project-image img {
    @apply w-full h-full object-cover mix-blend-overlay opacity-70;
}

.project-content {
    @apply p-6;
}

.tech-tag {
    @apply px-3 py-1 text-xs font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200;
}

/* Timeline */
.timeline {
    @apply relative max-w-2xl mx-auto;
}

.timeline::before {
    content: '';
    @apply absolute left-4 top-0 h-full w-0.5 bg-gray-300 dark:bg-gray-600;
}

.timeline-item {
    @apply relative pl-16 mb-8;
}

.timeline-dot {
    @apply absolute left-0 w-8 h-8 rounded-full flex items-center justify-center;
    @apply border-4 border-gray-100 dark:border-gray-800;
}

.timeline-content {
    @apply bg-white dark:bg-gray-800 p-6 rounded-xl shadow-sm;
    @apply border border-gray-200 dark:border-gray-700;
}

/* Dark mode transition */
html {
    @apply transition-colors duration-300;
}

/* Form inputs */
input,
textarea {
    @apply transition-colors duration-300;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    @apply w-2;
}

::-webkit-scrollbar-track {
    @apply bg-gray-100 dark:bg-gray-800;
}

::-webkit-scrollbar-thumb {
    @apply bg-gray-300 dark:bg-gray-600 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400 dark:bg-gray-500;
}