/*--------------------ALGEMENE OPMAAK--------------------*/ :root { /*:root is gewoon een CSS-selector die verwijst naar het hoogste punt van je HTML-document (in de praktijk: het -element). Alles wat je daar definieert, is beschikbaar in de hele pagina — een soort centraal "instellingenpaneel" voor je site.*/ --color-green-dark: #6B7A5E; /*De dingen met die twee streepjes ervoor, zoals --color-green-dark, noemen CSS-variabelen (officieel: custom properties). Die twee streepjes zijn gewoon de verplichte schrijfwijze om CSS te vertellen "dit is een variabele, geen echte eigenschap".*/ --color-green-mid: #8A9A78; --color-cream: #F6F2E7; --color-black: #1F2318; --color-white: #FFFFFF; --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Poppins', 'Segoe UI', sans-serif; --radius-full: 999px; --radius-lg: 28px; --color-cream-soft: #FBF8F1; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-body); /*var verwijst naar de variabele die aangemaakt is in :root*/ color: var(--color-black); background-color: var(--color-cream); line-height: 1.6; } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } ul { list-style: none; } h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; } .container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 32px; } .btn { /*De .btn-klasse zorgt al voor de zwarte pil-vorm van de knop — .navbar__cta voegt enkel toe dat de tekst niet afbreekt.*/ display: inline-block; background-color: var(--color-black); color: var(--color-white); font-weight: 500; padding: 14px 32px; border-radius: var(--radius-full); } /*--------------------NAVIGATIEBALK--------------------*/ .navbar { background-color: var(--color-green-dark); padding: 20px 0; } .navbar__inner { display: flex; /*display: flex op .navbar__inner zet logo, menu en knop netjes naast elkaar, met justify-content: space-between die ze uit elkaar duwt (logo links, knop rechts).*/ align-items: center; justify-content: space-between; gap: 24px; } .navbar__logo img { width: 120px; height: 100px; } .navbar__nav ul { /*.navbar__nav ul krijgt ook flex zodat de menu-items horizontaal naast elkaar staan in plaats van onder elkaar (de standaard van een