/* globale parameters midden deel, tussen navbar en footer */
.content {
    display: flex;
    height: 100vh; /* Hoogte is de rest van de viewport hoogte na de navbar en footer */
    margin-top: var(--navbar-height);
    margin-bottom: 60px; /* Ruimte onder de content voor de footer */
    position: relative;
    align-items: center;
}

.content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)); */
    z-index: 1; /* Zorgt ervoor dat de achtergrond achter de inhoud staat */
}

.content > div {
    position: relative; /* Zorgt ervoor dat de inhoud boven de achtergrond staat */
    z-index: 2; /* Zorgt ervoor dat de inhoud boven de achtergrond staat */
}

.circle {
    width: 200px;
    height: 100px;
    background-color: transparent;
    border-top-left-radius: 110px;
    border-top-right-radius: 110px;
    border: 10px solid gray;
    border-bottom: 0;
    transform:rotate(180deg);
}

/* container centraal deel links */
.container-centre-links {
    /* background-color: rgb(95, 95, 94); */
    padding-left: 20px; /* Ruimte tussen linkerkant en inhoud */
    width: var(--container-central-links, 170px);
    height: 100%;
    position: absolute;
    top: 0;
    background-image: url('/static/images/bloemen-zijkant.png'); /* Plaatje als achtergrond */
    background-size: cover; /* Zorgt ervoor dat het plaatje de hele container vult */
    background-position: center; /* Centreer het plaatje in de container */
    background-repeat: no-repeat;
    opacity: 0.5; /* Stelt de afbeelding in op 50% transparant */
}

/* container centraal deel Midden */
.container-centre-midden {
    flex: 1;
    background-color: rgb(236, 248, 236);
    height: 100%;
    position: absolute;
    top: 0;   
    padding: 50px; 
}

.centre-midden-header1 {
    font-size: 36px;
    color: navy;
    text-align: center;
    font-family: 'Comic Sans MS', cursive;
}

.centre-midden-header2 {
    font-size: 28px;
    color: navy;
    text-align: left;
    font-family: 'Comic Sans MS', cursive;
}

.centre-midden-paragraaf-centreer {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.centre-midden-image {
    display: block;
    /*justify-content: center; 
    align-items: center;*/
    width: 50%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

/* container centraal deel Rechts */
.container-centre-rechts {
    justify-content: center;
    width: var(--container-central-rechts, 150px);
    height: 100%;
    position: absolute;
    top: 0;
}

.top-container {
    background-color: rgb(222, 253, 149);
    width: 100%; /* Zorgt ervoor dat beide containers de volledige breedte van de right-column vullen */
    padding: 10px; /* Ruimte binnen de containers */
    box-sizing: border-box; /* Zorgt ervoor dat de padding deel uitmaakt van de breedte */
    height: 40%;
}

.bottom-container {
    background-color: rgb(206, 248, 206);
    width: 100%; /* Zorgt ervoor dat beide containers de volledige breedte van de right-column vullen */
    padding: 10px; /* Ruimte binnen de containers */
    box-sizing: border-box; /* Zorgt ervoor dat de padding deel uitmaakt van de breedte */
    height: 60%;
}

.url-list {
    list-style: none; /* Verwijder de standaard lijststijl */
    padding: 10px; /* Verwijder de standaard padding */
    margin: 0; /* Verwijder de standaard margin */
}

.url-list li {
    margin-bottom: 5px; /* Ruimte tussen de URL's */
}

.url-list a {
    color: rgb(5, 5, 5); /* Tekstkleur van de URL's */
    text-decoration: none; /* Geen onderstreping */
    transition: color 0.3s ease; /* Smoothe overgang voor hover-effect */
}

.url-list a:hover {
    color: yellow; /* Kleur veranderen bij hover */
}