body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s; /* Smooth theme transition */
}

.portfolio-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  box-shadow: 0 4px 8px var(--card-shadow);
  transition: transform 0.2s, background 0.3s, border 0.3s, box-shadow 0.3s;
}

.card img {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
}

.card:hover {
  transform: translateY(-5px);
}