/* css styles */

/* Smooth animations and hover effects */
a, .btn, .navbar-nav .nav-link {
  transition: all 0.3s ease;
}

a:hover {
  transform: translateY(-1px);
  text-decoration: none;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.navbar-nav .nav-link:hover {
  transform: translateY(-1px);
}

/* Improved typography */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

code, pre {
  font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  font-weight: 400;
}

.lead {
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.7;
}

/* Subtle shadows and cards */
.about-contents, .quarto-about-jolla .about-contents {
  background: var(--bs-body-bg);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding: 2rem;
  margin-bottom: 2rem;
  border: 1px solid var(--bs-border-color-translucent);
}

.card, .quarto-listing .card {
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  border: 1px solid var(--bs-border-color-translucent);
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* Resume sections with subtle cards */
#experience, #education, #programming, #packages, #dissertation, #awards-and-honors, #fun-facts {
  background: var(--bs-body-bg);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding: 2rem;
  margin-bottom: 2rem;
  border: 1px solid var(--bs-border-color-translucent);
}

/* Navbar enhancement */
.navbar {
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  backdrop-filter: blur(10px);
}

/* Profile image enhancement */
.about-image img {
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  transition: all 0.3s ease;
}

.about-image img:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}