:root {
  --color-bg: #180a30;
  --color-fg: #fceaff;
  --color-pink: #ff71ce;
  --color-purple: #c084fc;
  --color-purple-light: #f3e7ff;
  --color-dark-purple: #3f0572;
  --color-orange: #ff5c00;
  --color-cyan: #01cdfe;
}

.bg-color { background-color: var(--color-bg); }
.text-color-fg { color: var(--color-fg); }
.text-color-pink { color: var(--color-pink); }
.text-color-purple { color: var(--color-purple); }
.text-color-purple-light { color: var(--color-purple-light); }
.text-color-dark-purple { color: var(--color-dark-purple); }
.text-color-orange { color: var(--color-orange); }
.text-color-cyan { color: var(--color-cyan); }
.border-color-pink { border-color: var(--color-pink); }
.border-color-purple { border-color: var(--color-purple); }
.border-color-purple-light { border-color: var(--color-purple-light); }
.border-color-dark-purple { border-color: var(--color-dark-purple); }
.border-color-orange { border-color: var(--color-orange); }
.border-color-cyan { border-color: var(--color-cyan); }

body {
  background: 
    radial-gradient(ellipse at top, rgba(255,113,206,0.30), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(1,205,254,0.30), transparent 60%),
    var(--color-bg);
  background-attachment: scroll;
}

.section-title {
  font-size: 1.5rem;     
  font-weight: 600;      
  margin-bottom: 0.5rem; 
  color: var(--color-pink);
}

.link {
  color: var(--color-purple);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.15);
  transition: color 0.2s ease;
}
.link:hover {
  color: var(--color-cyan);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.15);
}

.card {
  display: block;
  border-radius: 0.5rem;
  padding: 1rem;
  border: 1px solid var(--color-pink);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.card:hover {
  border-color: var(--color-purple);
  background: rgba(255,113,206,0.10);
}

.section-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-pink);
}

#stars-canvas {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.portrait {
  border: 5px solid transparent;
  border-radius: 100px;
  background: linear-gradient(45deg, var(--color-pink), var(--color-purple), var(--color-cyan)) border-box;
}

.glow-text {
  text-shadow: 0 0 2px var(--color-pink),
               0 0 2px var(--color-purple),
               0 0 2px var(--color-orange);
  animation: pulse 2s infinite alternate;
}

@keyframes pulse {
  from { text-shadow: 0 0 2px var(--color-pink); }
  to   { text-shadow: 0 0 2px var(--color-purple), 0 0 2px var(--color-cyan); }
}