:root {
  --color-brand-primary: #2563eb;
  --color-brand-content: #2563eb;
}

[data-theme="dark"] {
  --color-brand-primary: #60a5fa;
  --color-brand-content: #60a5fa;
}

/* Skill cards */

.sd-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border 0.2s ease;
}

.sd-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.15);
  border: 1px solid var(--color-brand-primary);
}

/* Hero banner */

.hero-banner {
  padding: 40px 20px;
  border-radius: 10px;
  background: linear-gradient(120deg, #1f3b73, #3a7bd5, #00d2ff);
  background-size: 200% 200%;
  animation: gradientMove 10s ease infinite;
  color: white;
  text-align: center;
  margin-bottom: 40px;
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}