/* algemene body */
body {
    min-height: 100vh;
    padding-bottom: 140px;
}

/* h1 elementen stijlen */
h1 {
    background: rgba(18, 25, 29, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25);
    color: rgb(189, 189, 189);
    border-radius: 20px;
    padding: 10px 20px ;
    opacity: 0.9;
}
/* p elementen stijlen */
p {
    background: rgba(  18, 25, 29, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25);
    color: rgb(189, 189, 189);
    border-radius: 20px;
    padding: 10px 20px ;
    opacity: 0.9;
}

/* knoppen stijlen */
.knop-link { 
    display:inline-block ;
    background-color:transparent;
    color: rgb(189, 189, 189);
    padding: 18px 12px;
    border-radius: 20px;
    text-decoration: none;
    font-family:sans-serif;
    font-size: 16px;
    font-weight: bold;
    margin-right: 0px;
    transition: all 0,2s ease;
}

/* terug-knop stijlen */
.terug-knop {
    display:inline-block ;
    background-color:rgba(  18, 25, 29, 0.9);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: rgb(189, 189, 189);
    padding: 10px 20px;
    border-radius: 20px;
    text-decoration: none;
    font-family:sans-serif;
    font-size: 14px;
    font-weight: bold;
    margin-right: 0px;
    transition: all 0,2s ease;
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: background-color 1s;

}

/* home-knop stijlen */
.home-button {
    display:inline-block ;
    background-color:rgba(  18, 25, 29, 0.9);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: rgb(189, 189, 189);
    padding: 10px 20px;
    border-radius: 20px;
    text-decoration: none;
    font-family:sans-serif;
    font-size: 14px;
    font-weight: bold;
    margin-right: 0px;
    transition: all 0,2s ease;
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: background-color 1s;

}

/* achtergrond van de home pagina */
.home-pagina {
    background-image: url("../Image/cuijk\ sky\ line.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.cuijk-plaatje {
    position: absolute;
    width: 200px;
    right: 10px;
    top: 600px;
    border-radius: 20px;
}

/* navigatiebalk stijlen */
.home-pagina nav {
    width: min(350px, 70vw);
    margin: 0px;
    padding: 0px 0px;
    background: rgba(  18, 25, 29, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    box-sizing: border-box;
    overflow: hidden;
    position: absolute;
    left: 1%;
    top: 1%;
}
/* navigatiebalk lijst stijlen */
.home-pagina nav ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0px;
}
/* navigatiebalk lijst items stijlen */
.home-pagina nav li {
    flex: 1 1 0;
    min-width: 0;
}
/* knoppen in de balk stijlen */
.home-pagina .knop-link {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 18px 12px;
    font-size: 1.1rem;
    font-weight: 700;
    background: transparent;
    color: rgb(189, 189, 189);
    border: none;
    border-radius: 20px;
}
/* titel home pagina stijlen */
.text-blok {
    position: absolute;
    top: 35%;
    left: 36%;
    border-radius: 30px;

}
/* tekst home pagina stijlen */
.text-head {
    position: absolute;
    top: 50%;
    left: 36%;
    width: 400px;
    text-align: center;
    
}

/* achtergrond van de sport pagina */
.sport {
    background-image: url("../Image/hankipanki.png");
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
    background-position: center;
    background-size: 100% 100%;
    overflow: hidden;

}
/* knoppen van de sport pagina stijlen */
.knoppen-sport  {
    width: 500px;
    margin: 130px auto 0;
    padding: 0px 0px;
    border-radius: 20px;
    box-sizing: border-box;
    overflow: hidden;
    position: absolute;
    top: 30%;
    left: 34%;
    background: rgba(  18, 25, 29, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25);
}
/* achtergrond van de honkbal pagina */
.honkbal {
    background-image: url(../Image/bullfighters.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
/* titel van de honkbal pagina stijlen */
.titel-honkbal {
    position: absolute;
    left: 35%;
    width: 500px;
}
/* tekst van de honkbal pagina stijlen */
.text-honkbal { 
    position: absolute;
    width: 500px;
    left: 35%;
    top: 20%;
}
/* sport titel stijlen */
.sport-titel {
    width: 200px;
    text-align: center;
    left: 43%;
    position: absolute;
    top: 20%;
}
/* sport achtergrond */
.MTB {
    background-image: url("../Image/achtergrond-mtb.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
/* titel van de MTB pagina stijlen */
.titel-MTB {
    width: 500px;
    left: 36%;
    position: absolute;
    top: 10%;

}

/* tekst van de MTB pagina stijlen */
.text1-MTB {
    position: absolute;
    width: 300px;
    left: 16%;
    top: 30%;
}
.text2-MTB {
    position: absolute;
    width: 300px;
    left: 39%;
    top: 30%;
}
.text3-MTB {
    position: absolute;
    width: 300px;
    left: 62%;
    top: 30%;
}
    
/* achtergrond van de vv cuijk pagina */
.vv-cuijk {
    background-image: url(../Image/vv-cuijk.png);
    background-repeat: no-repeat;
    background-size: 100vh;
    background-position: center top;
    background-size: contain;
    overflow: hidden;
}
/* titel van de vv cuijk pagina stijlen */
.titel-vv-cuijk {
    width: 500px;
    left: 35%;
    position: absolute;
    top: 8%;
}
/* tekst van de vv cuijk pagina stijlen */
.text-vv-cuijk {
    position: absolute;
    width: 500px;
    left: 35%;
    top: 49%;
}
/* achtergrond van de ict pagina */
.ict {
    background-image: url(../Image/ict-achtergrond.png);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
    background-position: center;
    background-size: 100% 100%;
    overflow: hidden;
}
/* knoppen van de ict pagina stijlen */
.knoppen-ict{
    width: 500px;
    margin: 130px auto 0;
    padding: 0px 0px;
    border-radius: 20px;
    box-sizing: border-box;
    overflow: hidden;
    position: absolute;
    top: 30%;
    left: 34%;
    background: rgba(  18, 25, 29, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25);
}
/* titel van de ict pagina stijlen */
.ict-titel {
    position: absolute;
    width: 200px;
    left: 42%;
    top: 20%;
    text-align: center;
}



/* titel van de van der Hoff pagina stijlen */
.van-der-hoff-title {
    position: absolute;
    width: 400px;
    left: 35%;
    top: 20%;
    text-align: center;
}

/* tekst de van der Hoff pagina stijlen */
.text-van-der-hoff {
    position: absolute;
    width: 500px;
    left: 33%;
    top: 40%;
    text-align: center;
}
/* achtergrond van de van der Hoff pagina */
.van-der-hoff {
    background-image: url(../Image/ict-achtergrond.png);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
    background-position: center;
    background-size: 100% 100%;
    overflow: hidden;
}

/* achtergrond van de ciphercore pagina */
.ciphercore {
    background-image: url(../Image/ict-achtergrond.png);
    overflow: hidden;
}
/* titel van de ciphercore pagina stijlen */
.titel-ciphercore {
    width: 400px;
    position: absolute;
    left: 35%;
    top: 20%;
    text-align: center;
}

/* tekst van de ciphercore pagina stijlen */
.ciphercore-text {
    width: 500px;
    position: absolute;
    left: 33%;
    top: 40%;   
}
/* achtergrond van de marel pagina */
.marel {
    background-image: url(../Image/ict-achtergrond.png);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
    overflow: hidden;
}
/* titel van de marel pagina stijlen */
.marel-titel {
    width: 300px;
    text-align: center;
    left: 38%;
    top: 20%;
    position: absolute;
}
/* tekst van de marel pagina stijlen */
.marel-text {
    width: 500px;
    position: absolute;
    left: 33%;
    top: 40%;
}

/* achtergrond van de sights pagina */
.sights {
    background-image: url(../Image/bezienswaardigheden.png);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
    overflow: hidden;
}
/* titel van de sights stijlen */
.sights-titel{
    position: absolute;
    width: 500px;
    left: 34%;
    top: 15%;
    text-align: center;
}

/* knoppen van de sights pagina stijlen */
.knoppen-sights {
    width: 500px;
    margin: 130px auto 0;
    padding: 0px 0px;
    border-radius: 20px;
    box-sizing: border-box;
    overflow: hidden;
    position: absolute;
    top: 30%;
    left: 34%;
    background: rgba(  18, 25, 29, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25);
}

/* achtergrond van de museum ceuclum pagina */
.museum-ceuclum {
    background-image: url(../Image/museum-ceuclum.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    overflow: hidden;
}
/* titel van de museum ceuclum pagina stijlen */
.museum-titel {
    width: 700px;
    top: 10%;
    left: 25%;
    position: absolute;
}
/* tekst van de museum ceuclum pagina stijlen */
.museum-text {
    width: 500px;
    position: absolute;
    left: 33%;
    top: 35%;
}

.youtube-iframe {
    position: absolute;
    width: 500px;
    height: 300px;
    left: 100%;
    top: 5%;
    border-radius: 20px;
    margin-left: 10px;
}
/* achtergrond van de saint agatha pagina */
.saint  {
    background-image: url(../Image/saint.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
/* titel van de saint agatha pagina stijlen */
.saint-titel {
    width: 550px;
    text-align: center;
    left: 30%;
    top: 10%;
    position:absolute ;
}

/* tekst van de saint agatha pagina stijlen */
.saint-text {
    width: 500px;
    position: absolute;
    left: 33%;
    top: 35%;
}

/* achtergrond van de historic fortress pagina */
.grave {
    background-image: url(../Image/grave.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

/* titel van de historic fortress pagina stijlen */
.titel-grave {
    width: 600px;
    top: 15%;
    left: 30%;
    text-align: center;
    position: absolute;
}
/* tekst van de historic fortress pagina stijlen */
.text-grave {
    width: 500px;
    left: 34%;
    top: 40%;
    position: absolute;
}

/* knoppen van de lunch pagina stijlen */
.knoppen-lunch {
    width: 500px;
    margin: 130px auto 0;
    padding: 0px 0px;
    border-radius: 20px;
    box-sizing: border-box;
    overflow: hidden;
    position: absolute;
    top: 30%;
    left: 36%;
    background: rgba(  18, 25, 29, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25);
}

/* achtergrond van de lunch pagina */
.lunch {
    background-image: url(../Image/achtergrond-lunch.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
/* titel van de lunch stijlen */
.lunch-titel {
    position: absolute;
    width: 500px;
    left: 35%;
    top: 15%;
    text-align: center;
}
/* achtergrond van de looierij pagina */
.looierij {
    background-image: url(../Image/achtergrond-lunch.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

/* titel van de looierij pagina stijlen */
.looierij-titel {
    width: 500px;
    text-align: center;
    left: 32%;
    top: 15%;
    position: absolute;
}
/* tekst van de looierij pagina stijlen */
.looierij-text {
    width: 500px;
    left: 33%;
    top: 40%;
    position: absolute;
}
/* achtergrond van de boothuys pagina */
.boothuys {
    background-image: url(../Image/boothuys.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
/* titel van de boothuys pagina stijlen */
.boothuys-titel{
    width: 500px;
    text-align: center;
    left: 32%;
    top: 15%;
    position: absolute;
}
/* tekst van de boothuys pagina stijlen */
.boothuys-text {
    width: 500px;
    left: 33%;
    top: 40%;
    position: absolute;
}

/* achtergrond van de moeders pagina */
.moeders {
    background-image: url(../Image/moeders.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

/* titel van de moeders pagina stijlen */
.moeders-titel {
    width: 500px;
    left: 32%;
    top: 15%;
    position: absolute;
}
/* tekst van de moeders pagina stijlen */
.moeders-text {
    width: 500px;
    left: 33%;
    top: 40%;
    position: absolute;
}

/* knoppen balk van de sport, ict, lunch en sights pagina stijlen */
.knoppen-sport ul,
.knoppen-ict ul,
.knoppen-lunch ul,
.knoppen-sights ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 20px;
}
/* knoppen balk van de sport, ict, lunch en sights pagina stijlen */
.knoppen-sport li,
.knoppen-ict li,
.knoppen-lunch li,
.knoppen-sights li {
    flex: 1 1 0;
    min-width: 0;
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 18px 12px;
    font-size: 18px;
    font-weight: 700;
    background: transparent;
    color: rgb(189, 189, 189);
    border: none;
    border-radius: 0;
}

/* navigatiebalk stijlen */
nav ul {
    display: flex;
    list-style-type: none;
    justify-content: center;
    gap: 20px;
}
/* navigatiebalk hover tijd */
nav a {
    transition: background-color 1s;
}
/* navigatiebalk hover kleur */
.home-pagina nav a:hover {
    background-color: rgba(240, 90, 71, 0.8);
}
/* navigatiebalk hover kleur */
nav a:hover {
    background-color: rgba(240, 90, 71, 0.8);
}
/* home-knop hover kleur */
.home-button:hover {
    background-color: rgba(240, 90, 71, 0.8);
}
/* terug-knop hover kleur */
.terug-knop:hover {
    background-color: rgba(240, 90, 71, 0.8);
}


/* welkomstekst */
#welkom {
    width: 300px;
    position: absolute;
    left: 38%;
    text-align: center;
    font-weight: bold;
    font-size: 230%;
    top: 15%;
    color: rgb(189, 189, 189);
}
/* footer stijlen */
.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background-color:rgba(  18, 25, 29, 0.9);
    text-align: center;
    padding-top: 10px;
    opacity: 0.8;
    color: rgb(189, 189, 189);
}

/* glazen paneel stijlen */
.glazen-paneel {
    background: rgba(  18, 25, 29, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow:  8px 32px  rgba(0, 0, 0, 0.25);
    
}

/*lichte modus

/* Algemene tekstkleur aanpassen */
body.light-mode {
    color: #12191d;
}

/* Lichte achtergrond voor alle glazen panelen, koppen en paragrafen */
body.light-mode h1,
body.light-mode p,
body.light-mode .home-pagina nav,
body.light-mode .knoppen-sport,
body.light-mode .knoppen-ict,
body.light-mode .knoppen-lunch,
body.light-mode .knoppen-sights,
body.light-mode .glazen-paneel {
    background: rgb(255, 255, 255);
    color: rgb(18, 25, 29);
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
}

/* Tekstkleuren van de links en menu-items aanpassen naar donker */
body.light-mode .knop-link,
body.light-mode .home-pagina .knop-link,
body.light-mode .knoppen-sport li,
body.light-mode .knoppen-ict li,
body.light-mode .knoppen-lunch li,
body.light-mode .knoppen-sights li {
    color: rgb(0, 0, 0);
}

/* Specifieke losse elementen herstellen */
body.light-mode #welkom {
    color: rgb(18, 25, 29);
}

/* De losse knoppen (zoals terug en home) licht maken */
body.light-mode .terug-knop,
body.light-mode .home-button {
    background-color: rgb(255, 255, 255);
    color: rgb(18, 25, 29);
    border: 1px solid rgba(0, 0, 0, 0.15);
}

/* Hover effecten voor de knoppen in lichte modus aanpassen (optioneel, voor beter contrast) */
body.light-mode .home-pagina nav a:hover,
body.light-mode nav a:hover,
body.light-mode .home-button:hover,
body.light-mode .terug-knop:hover {
    background-color: rgba(240, 90, 71, 0.4); /* Iets lichter rood voor betere leesbaarheid op wit */
}

#theme-toggle {
    position: fixed;
    top: 10px;
    right: 20px;
    font-size: 16px;
    font-weight: 700;
    background: rgba(  18, 25, 29, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25);
    color: rgb(189, 189, 189);
    border-radius: 20px;
    padding: 10px 20px ;
    opacity: 0.9;
}