/* 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: #ffffff; /* Deze kleur schijnt door de foto heen */
    margin: 40px;
    -webkit-font-smoothing: grayscale;
}

      header {
            margin-bottom: 80px;
        }


        .background {
           /* Zorg dat de div de hele pagina vult */
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
    
           background-image: url('citrus-achtergrond.jpg');
           background-size: cover;      /* Zorgt dat de foto vult zonder vervormen */
           background-position: center; /* Centreert de foto */
           background-repeat: no-repeat;
           opacity: 0.27; 
           z-index: -1; 
}       

        .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 {
    /* Positionering: Strak tegen de onderkant over de hele breedte */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    
    /* De Glossy Basis (Web 2.0 Blauw) */
    background-color: #828282; 
    background-image: linear-gradient(
        to bottom, 
        rgba(255, 255, 255, 0.4) 0%, 
        rgba(255, 255, 255, 0.1) 50%, 
        rgba(0, 0, 0, 0) 50.1%, 
        rgba(0, 0, 0, 0.1) 100%
    );

    /* Styling */
    padding: 0px 0;
    text-align: center;
    color: white;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.3);

    /* Animatie voorbereiding: vertel CSS dat de verandering 0.3 seconden mag duren */
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

/* De Hover Animatie */
footer:hover {
    /* Maakt de footer lichter (als een felle glans) */
    background-color: #ffffff; 
    
    /* Vergroot de schaduw en de 'glow' aan de bovenkant */
    box-shadow: 0 -8px 20px rgba(255, 255, 255, 0.5);
    
    /* Schuift de footer heel subtiel een klein stukje omhoog voor interactie */
    transform: translateY(-2px);
}
        /* 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 */
            }
        }