/* Volledig opgeschoonde CSS voor Ronald's Fietsavontuur */

body {
    margin: 0;
    padding: 20px; /* Iets minder padding voor mobielvriendelijkheid */
    font-family: sans-serif;
    color: #000; 
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

.background-blur {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; 
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    filter: brightness(1.5); 
    transform: scale(1); 
}

.content-box {
    background: rgba(255, 255, 255, 0.8); 
    padding: 20px;
    border-radius: 10px;
    position: relative; 
    margin-bottom: 20px;
    max-width: 900px; /* Zorgt dat de tekst niet te breed wordt op grote schermen */
    margin-left: auto;
    margin-right: auto;
}

/* Specifieke plaatjes per pagina - Paden hersteld naar normale HTML */
.bagage-bg { background-image: url('/img/solar.jpg'); }
.collias-bg { background-image: url('/img/collias2017.jpg'); }
.ronald-bg { background-image: url('/img/ronald.jpg'); }
.ventoux-bg { background-image: url('/img/ventoux.jpg'); }
.vittorio-bg { background-image: url('/img/vittorio.jpg'); }
.hermancoster-bg { background-image: url('/img/hermancoster.jpg'); }
.hctent-bg { background-image: url('/img/hctent.jpg'); }
.nonsard-bg { background-image: url('/img/nonsard.jpg'); }
.lacdestpoint-bg { background-image: url('/img/lacdestpoint.jpg'); }
.provence-bg { background-image: url('/img/provence.jpg'); }
.middelzee-bg { background-image: url('/img/middelzee.jpg'); }
.hadrian-bg { background-image: url('/img/hadrian2011.jpg'); }
.provence2-bg { background-image: url('/img/provence2.jpg'); }
.koken-bg { background-image: url('/img/koken.jpg'); }
.regenkleding-bg { background-image: url('/img/regenkleding.jpg'); }
.koffiezettendorpsplein-bg { background-image: url('/img/koffiezettendorpsplein.jpg'); }
.narbonne-bg { background-image: url('/img/narbonne.jpg'); }
.carcassonne-bg { background-image: url('/img/carcassonne.jpg'); }

a { color: #0044cc; }

@media (max-width: 768px) {
    body { padding: 10px; font-size: 16px; }
    .content-box { width: 95%; padding: 15px; }
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}