:root {
    --primary: #4A90E2;
    --secondary: #50E3C2;
    --accent: #F5A623;
    --background: #F0F0F0;
    --text: #333333;
    --cardBg: #FFFFFF;
}
body {
    font-family: 'Arial', sans-serif;
    background-color: var(--background);
    color: var(--text);
    transition: background-color 0.3s, color 0.3s;
}


.nav-link {
color: var(--text);
position: relative;
transition: color 0.3s;
}

.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -2px;
left: 0;
background-color: var(--primary);
transition: width 0.3s;
}

.nav-link:hover {
color: var(--primary);
}

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

.hover-opacity:hover {
opacity: 0.8;
}

.color-btn {
width: 1.5rem;
height: 1.5rem;
border-radius: 9999px;
transition: box-shadow 0.3s;
}

.color-btn:hover {
box-shadow: 0 0 0 2px white, 0 0 0 4px currentColor;
}

.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-accent { color: var(--accent); }
.bg-primary { background-color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }
.bg-accent { background-color: var(--accent); }
.bg-card { background-color: var(--cardBg); }
.skill-bar {
    width: 0;
    transition: width 1s ease-out;
}
.timeline-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--primary);
}
@keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}

.animate-blob {
    animation: blob 7s infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}

.animation-delay-300 {
    animation-delay: 0.3s;
}

.dark {
    --primary: #2D9CDB;
    --secondary: #27AE60;
    --accent: #F2994A;
    --background: #1A1A1A;
    --text: #F0F0F0;
}