body 
{
    margin: 0;
    font-family: Arial, sans-serif;     /* Het lettertype van de hele pagina */
    line-height: 1.8;                   /* De regelafstand */
    background: #ead8d6;
}

/* Pagina-specifieke kleuren */

body.index { background: #eaeaea; }
body.lunch { background: #f9f5ef; }
body.sport { background: #e8eff4; }
body.tourism { background: #e8eff4; }
body.ict { background: #e8eff4; }

body.index section h2 { color:#580707 ; }
body.lunch section h2 { color: #a35220; }   /* Sectiekoppen */
body.sport section h2 { color: #2063a3; }
body.tourism section h2 { color: #2d8941; }
body.ict section h2 { color: #5c4aa3; }


/* Header */

header                          
{
    background: #053c05e0;
    color: white;             /* Tekstkleur */
    padding: 16px 26px;         /* Binnenruimte rond de tekst */
    text-align: center;         /* Tekst gecentreerd */
    max-width: 1210px;          /* Maximale breedte van de header */
    margin: 0 auto;
}


h1
{
    margin: 0;
    font-size: 32px;        /* Grootte van de koptekst */
}

/* Navigatiebalk */

nav
{
    margin-top: 8px;        /* Bovenruimte van de navigatie */
}

nav a 
{
    color:white;
    text-decoration:none;       /* Verwijdert onderstreping */
    margin: 0 16px;             /* Horizontale afstand tussen links */
    font-weight: bold;          /* Vetgedrukte tekst */
    font-size: 19.2px;          /* Tekstgrootte van links */

}

 
nav a:hover
{
    color: #55ec6e;
    background-color: #f0e9e91a;
    border-radius: 4px;                 /* Afgeronde hoeken bij hover */
    padding: 3.2px 8px;                 /* Binnenruimte bij hover */
}


nav i 
{
    margin-right: 5px;                 /* Ruimte tussen icon en tekst in links */
}

/* Hoofdinhoud */

main 
{
    padding: 32px;              /* Binnenruimte rond de inhoud */
    text-align: center;         /* Inhoud gecentreerd */
}

/* Artikelen */

article 
{
    background: #e3f2fa;                  
    padding: 16px 24px;                     /* Binnenruimte rond de tekst */
    border-radius: 8px;                     /* Afgeronde hoeken */
    box-shadow: 0 2px 6px #9c2d2d1a;      /* Schaduw voor diepte-effect */
    margin: 16px auto;                      /* Verticale marge + centreren */
    max-width: 650px;                       /* Maximale breedte van artikel */
    text-align: left;                       /* Tekst links uitlijnen */
}

section article + article 
{
    margin-top: 32px;           /* Extra marge boven artikelen die volgen */
}



/* Afbeeldingen */

img 
{
    border-radius: 5px;
    max-width: 350px;      /* Afbeeldingen passen in container */
    height: auto;           /* Hoogte schaalt proportioneel */
    display: block;         /* Blokniveau, zodat margin werkt */ 
    margin: 8px auto;       /* 8px boven/onder en centreren */
    width: 200px;            /* Standaard breedte 200px */
}

/* Footer */

footer 
{
    background: #ffffff;
    padding: 32px;
    text-align: center;
    box-shadow: 0 -2px 6px hsla(144, 4%, 25%, 0.051);           /* Schaduw boven de footer */
    font-size: 10px;                                          
}


/* Section headers */

section h2 
{
    font-size: 25.6px;          /* Grootte van de koptekst */
    margin-top: 32px;           /* Ruimte boven de koptekst */
    margin-bottom: 16px;        /* Ruimte onder de koptekst */
}


button   
{
    background-color:#61c0ed;             /* bluwe achtergrond */
    color: white;                         /* witte tekst */
    padding: 10px 20px;                     /* ruimte binnenin de knop: 10px boven/onder, 20px links/rechts */
    font-size: 16px;                        /* tekstgrootte van de knop */
    border: none;                           /* verwijdert de standaardrand van de knop */
    border-radius: 5px;                     /* maakt de hoeken van de knop afgerond */
    cursor: pointer;                        /* verandert de cursor in een handje bij hover */
    transition: background-color 0.3s;      /* maakt een vloeiende kleurverandering bij hover */

}


button:hover
{
    background-color: #00f020;      /* donkerder groen bij hover */
}

.btn1
{
    display: flex;
    justify-content: center;
    padding: 15px;
}