*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 1. Reset en Algemene Basisinstellingen */
html, body{
    margin: 0; /* Haalt de standaardmarge van de body weg */
    padding: 0;
	font-size: 0.9rem;
	line-height: 1.2em;
	font-family:Verdana, Geneva, sans-serif;
	color: #FFFFFF;
    text-align: center; /* Centreert inline-inhoud, zoals de tekst in de footer */
	background-color: #56AED4;
	background-image: url(../../images/verzamel/BG.jpg);
	background-repeat: repeat;
}

/* 2. De Hoofdcontainer - Centraal Plaatsen en Max. Breedte */
.container {
    /* Definieert de maximale breedte van de website, zodat deze niet te breed wordt op grote schermen */
    max-width: 1000px; 
    /* Marges om de container te centreren op de pagina */
    margin: 0 auto; 
    padding: 0 15px; /* Voegt wat padding toe aan de zijkanten op mobiele apparaten */
}

.container-flex {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
main {
    padding: 1em 0;
	background-image: url(../../images/verzamel/BG.jpg);
	background-repeat: repeat;
    text-align: center;
    padding: 1em 0;
}

/* 4. De Afbeelding - Cruciaal voor Responsiviteit en Centrering */
.img {
/* Zorgt ervoor dat de afbeelding nooit breder wordt dan de container */
max-width: 100%; 
/* Zorgt ervoor dat de hoogte proportioneel wordt aangepast (vermijdt uitrekken) */
height: auto; 
border : #FAE4AD solid 2px;
border-image: linear-gradient(to left, #a8a622, #FAE4AD) 1;
	/* Maakt de afbeelding een blok-element zodat 'margin: 0 auto;' werkt om hem horizontaal te centreren */
display: block; 
margin: 20px auto; /* 20px marge boven/onder, en 'auto' om horizontaal te centreren */
	/* Optioneel: Voeg een lichte schaduw toe om de afbeelding te laten 'poppen' */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 

}

h5{font:normal 1.2rem Comic Sans MS, Cambria, sans-serif;}
a:link, a:visited{color:#e2c060;cursor: pointer;}
a:active, a:focus{color:#e2c060;}


/* 5. Footer en Tekst Styling */
footer {
    padding: 10px 0;
    margin-top: 20px;
    border-top: 1px solid #FAE4AD; /* Scheidingslijn boven de footer -  nog nakijken */
}

.center {
    text-align: center;
    font-size: 1.1em;
    color: #FAF5F5; /* tekstkleur footer */
}

.center a {
    color: #ffffff; /* Een moderne linkkleur */
    text-decoration: none;
}

.center a:hover {
    text-decoration: underline;
}