/* CSS STYLING */

        /* De basis: we gebruiken een systeemlettertype voor die 80s/90s look */
     

     
        body {

            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;            
            font-size: 10pt; 
            line-height: 1.4;
            color: #000;
            background-color: #fefdf9;
            margin: 40px; /* Ruime marges rondom de pagina */
            -webkit-font-smoothing: grayscale;
        }

        /* Header met naam en titel */
        header {
            margin-bottom: 80px;
        }

        .name {
            font-weight: bold;
            display: block;
        }

        /* De layout: een grid met 4 kolommen voor de secties */
        .grid-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr); /* 4 gelijke kolommen */
            gap: 20px;
            align-items: start;
        }

        /* Kopjes boven de kolommen */
        h2 {
            font-size: 11pt;
            font-weight: bold;
            margin-bottom: 10px;
            margin-top: 0;
        }

        /* Lijstinstellingen */
        ul {
            list-style-type: none; /* Geen bolletjes voor de lijst */
            padding: 0;
            margin: 0;
        }

        li {
            margin-bottom: 4px;
        }

        /* De links: standaard zwart, onderstreping alleen bij hover */
        a {
            color: #000;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        /* Subtekst of details (zoals jaartallen of prijzen) */
        .detail {
            color: #666;
            margin-left: 5px;
        }

        footer {
  position: fixed;      /* Plakt het element vast op het scherm */
  bottom: 0;            /* Zet hem strak tegen de onderkant */
  left: 0;              /* Begint helemaal links */
  width: 100%;          /* Beslaat de volledige breedte */
  
  background-color: white; /* Zorg voor een achtergrond, anders schijnt de tekst erachter door */
  border-top: 2px solid #000000; /* De border aan de bovenkant */
  
  text-align: center;   /* Zet de tekst/datum in het midden */
  z-index: 1000;        /* Zorgt dat de footer bovenop andere elementen blijft liggen */
}

/* Belangrijk: Geef de body wat extra ruimte aan de onderkant, 
   zodat de footer je gewone tekst niet overlapt aan het einde van de pagina */
body {
  margin-bottom: 70px; 
}

        /* Mobiele weergave: stapel de kolommen onder elkaar op kleine schermen */
        @media (max-width: 800px) {
            .grid-container {
                grid-template-columns: 1fr 1fr; /* 2 kolommen op tablets */
            }
        }

        @media (max-width: 500px) {
            .grid-container {
                grid-template-columns: 1fr; /* 1 kolom op telefoons */
            }
        }