/* Web Apps Page Styles */

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

/* Project card hover effect */
.project-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Tag styles */
.tag {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 9999px;
}

.tag-react { 
    background-color: #dbeafe;
    color: #1e40af;
}

.tag-node { 
    background-color: #d1fae5;
    color: #065f46;
}

.tag-vue { 
    background-color: #ede9fe;
    color: #5b21b6;
}

.tag-python { 
    background-color: #d1fae5;
    color: #065f46;
}

.tag-pwa { 
    background-color: #fef3c7;
    color: #92400e;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .project-grid {
        grid-template-columns: 1fr;
    }
}

/* Animation for filter buttons */
.filter-btn {
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

.filter-btn.active {
    background-color: #2563eb;
    color: #ffffff;
}

.filter-btn:not(.active) {
    background-color: #e5e7eb;
    color: #374151;
}

.filter-btn:not(.active):hover {
    background-color: #d1d5db;
}

/* Gradient text for headings */
.gradient-text {
    background: linear-gradient(90deg, #3B82F6, #8B5CF6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background-color: #f3f4f6;
}

::-webkit-scrollbar-thumb {
    background-color: #9ca3af;
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #6b7280;
}