/* ============================================
   style.css — Week 2: CSS-basis
   Dit bestand demonstreert:
   - een element-selector (p)
   - een class-selector (.highlight)
   - een id-selector (#hoofdtitel)
   - kleur & typografie
   - het box model (margin/border/padding)
   ============================================ */

/* Element-selector: raakt ALLE <p>-elementen binnen de demo */
.profiel p {
  font-family: Georgia, serif;
  color: #2E2E2E;
  line-height: 1.6;
}

/* Id-selector: uniek, gebruikt voor de hoofdtitel */
#hoofdtitel {
  font-family: "Segoe UI", Arial, sans-serif;
  color: #1F4E79;
  margin-bottom: 0.2rem;
}

.profiel {
  background-color: #FDFBF6;
  padding: 1.5rem;
  border-radius: 6px;
}

/* Class-selector: herbruikbaar op meerdere elementen */
.highlight {
  background-color: #FFF3CD;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
}

.hobby-lijst {
  font-family: "Segoe UI", Arial, sans-serif;
}

.hobby-lijst li {
  margin-bottom: 0.3rem;
}

/* ---- Box model demonstratie ---- */
.boxmodel-demo {
  /* content: de tekst/inhoud zelf */
  width: 220px;
  background-color: #DCE6F1;

  /* padding: ruimte BINNEN de rand */
  padding: 16px;

  /* border: de rand zelf */
  border: 4px solid #2E75B6;

  /* margin: ruimte BUITEN de rand, tussen dit element en de rest */
  margin: 20px auto;

  font-family: monospace;
  text-align: center;
  color: #1F4E79;
}