body {
            font-family: 'Lora', serif; /* Gebruik het Lora-lettertype voor de hele body */
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            margin: 0;
        }

        h1 {
            font-family: 'Lora', serif; /* Gebruik het Lora-lettertype voor de hele body */
        }
        h2 {
            font-family: 'Lora', serif; /* Gebruik het Lora-lettertype voor de hele body */
            font-style: italic;
        }
        h3 {
            font-family: 'Roboto', serif; /* Gebruik het Lora-lettertype voor de hele body */
            font-size: 22px;
            position: relative;
            display: inline-block;
            margin-bottom: 20px; /* ruimte onder de H3 */
        }

        h3::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -5px; /* afstand van de underline tot de tekst */
            width: 100%;
            height: 3px; /* dikte van de underline */
            background-color: #F2CB66; /* kleur van de underline */
        }

        .btn, a, p, li {
            font-family: 'Roboto', serif; /* Gebruik het Lora-lettertype voor de hele body */
        }

        .quote {
            font-family: 'Lora', serif; /* Gebruik het Lora-lettertype voor de hele body */
            font-size: 24px;
            font-style: italic;
            text-align: center;
            margin-top: 40px;
            margin-bottom: 40px;
        }

        /* Aangepaste hoogte voor de navigatiebalk */
        .custom-navbar-height {
           padding-top: 30px; /* Gebruik padding om de items correct te centreren */
           padding-bottom: 30px;
        }

        .custom-navbar-height .navbar-brand,
        .custom-navbar-height .nav-link {
            line-height: 50px; /* Zorg ervoor dat de tekst verticaal gecentreerd is; verticale lijntjes */
          
        }

        .navbar-nav .nav-item {
            position: relative; /* Nodig voor pseudo-elementen */
            padding: 0 10px; /* Voeg padding toe aan beide zijden van de nav-item voor meer ruimte rond de streepjes */
        }
        .navbar-nav .nav-item:not(:last-child)::after {
            content: '';
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
            height: 50%; /* Verklein de hoogte om ongeveer even hoog te zijn als de tekst */
            border-right: 1px solid #000; /* Kleur en stijl van het streepje */
            margin: 10 10px; /* Voeg marge toe aan beide zijden van het streepje voor meer ruimte */
        }

        /* Prevent the navbar-toggler from moving */
         .navbar-toggler {
            padding: 0.25rem 0.75rem; /* Zorg ervoor dat de padding van de navbar-toggler consistent is */
            border: none; /* Verwijder de rand als deze problemen veroorzaakt */
            max-width: 150px; /* Maximale breedte van 150px */
            transition: none; /* Voorkom transities die mogelijk de verschuiving veroorzaken */
        }

        .navbar-toggler:focus {
            outline: none; /* Verwijder de focus outline om verschuiving te voorkomen */
            box-shadow: none; /* Verwijder de box-shadow om verschuiving te voorkomen */
        }

        /* Custom CSS for the navbar */
        .navbar-collapse {
            background-color: rgb(248, 249, 250); /* Tekstkleur van de footer */
        }
 
        .navbar-nav .nav-item {
            /* margin-bottom: 10px; /* Verminder de marge tussen de menu-items */
            position: relative; /* Nodig voor pseudo-elementen */
            padding: 0 10px; /* Voeg padding toe aan beide zijden van de nav-item voor meer ruimte rond de streepjes */
        }

        @media (max-width: 992px) {
            .navbar-nav .nav-item::after {
                display: none; /* Verberg de streepjes op kleinere schermen */
            }
        }
        @media (min-width: 992px) {
            .navbar-nav .nav-item {
                margin-bottom: 0; /* Verwijder de extra marge tussen de menu-items op grotere schermen */
            }
        }

        /* Aangepaste styling voor vaste breedte */
        .fixed-width-container {
            max-width: 1200px; /* Maximaal 1200 pixels breed */
            width: calc(100% - 100px); /* Zorgt ervoor dat de container 50px minder breed is dan het scherm */
            margin-left: 100px; /* 100 pixels van de linkerkant */
            padding: 20px; /* Optionele padding voor extra ruimte binnen de container */
        }

        .content {
            flex: 1;
        }

        .title-container {
            text-align: left;
            margin-bottom: 20px;
        }
        .subtitle-container {

            text-align: left;
            margin-bottom: 20px;
        }
        .horizontal-line {
            max-width: 1200px; /* Maximaal 1200 pixels breed */
            width: 100%; /* Neemt 100% van de beschikbare breedte in */
            border-top: 5px solid #F2CB66;
            margin: 20px 0;
        }
        .content-block {
            background-color: rgba(255, 255, 255, 0.8); /* Optionele achtergrondkleur met doorzichtigheid */
            border-radius: 5px; /* Optionele afgeronde hoeken */
        }
        .content-text {
            text-align: left; /* Tekst links uitlijnen */
        }

        .book-image {
            align-items: left;
        }

        .footer {
            height: 100%;
            background-color: rgb(248, 249, 250); /* Tekstkleur van de footer */
            color: rgb(5, 5, 5); /* Tekstkleur van de footer */
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        @media (max-width: 765px) {
            .fixed-width-container {
                width: calc(100% - 60px); /* Volledige breedte op kleinere schermen met minder margin */
                margin-left: 60px;
            }
            .content-order-first {
                order: 2;
            }
            .content-order-second {
                order: 1;
            }

            .img-fluid{
                max-width: 70%;
            }

        }
        @media (max-width: 600px) {
            .fixed-width-container {
                width: calc(100% - 40px); /* Volledige breedte op nog kleinere schermen met nog minder margin */
                margin-left: 40px; /* 40 pixels van de linkerkant */
            }
            .content-order-first {
                order: 2;
            }
            .content-order-second {
                order: 1;
            }

            .img-fluid{
                max-width: 70%;
            }
        }
        @media (max-width: 400px) {
            .fixed-width-container {
                width: calc(100% - 20px); /* Volledige breedte op de kleinste schermen met minimale margin */
                margin-left: 20px; /* 20 pixels van de linkerkant */
            }
        }

        /* CSS for hover effect */
        .linkcard{
            border: none;
            text-align: left;
            width: 200px;
            padding: 0;
        }

        .hover-btn-container {
            position: relative;
        }

        .hover-btn-container .collapse {
            position: absolute;
            top: 100%; /* Plaats onder de knop */
            left: 0;
            width: 100%;
            display: none;
        }

        .hover-btn-container:hover .collapse {
            display: block; /* Toon de container bij hover */
        }

        .book-details{
            font-size: 11px;
            margin-top: 100px;

        }

        .book-details-text {
            margin: 10px;
        }

        .footer-block{
            text-align: left;
            margin-top: 60px;
            margin-top: 60px;
        }

        .footer-block-text{
            font-size: 14px;
        }

        .form-container {
            padding: 20px;
        }
        
        form {
            display: flex;
            flex-direction: column;
            width: 80%;
        }
        
        .input-button-wrapper {
            display: flex;
            align-items: flex-end;
        }
        
        .input-field {
            position: relative;
            margin-right: 10px;
            flex: 1;
        }
        
        input[type="email"] {
            width: 100%;
            padding: 10px 0;
            border: none;
            border-bottom: 2px solid #ccc;
            outline: none;
            font-size: 16px;
            transition: border-color 0.3s ease;
        }
        
        input[type="email"]:focus {
            border-bottom-color: #F2CB66;
        }
        
        label {
            position: absolute;
            left: 0;
            top: 12px;
            font-family: Roboto;
            font-size: 16px;
            color: #aaa;
            transition: 0.3s ease all;
        }
        
        
        input:focus ~ label,
        input:valid ~ label {
            top: -30px;
            font-size: 16px;
            color: #F2CB66;
        }
        
        @media (max-width: 1120px) {
            label {
                display: none;
            }

            .underline {
                display: none;
            }
        }

        .underline {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -2px;
            height: 2px;
            background-color: #F2CB66;
            visibility: hidden;
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }
        
        input:focus ~ .underline {
            visibility: visible;
            transform: scaleX(1);
        }
        
        button {
            padding: 10px 20px;
            background-color: #F2CB66;
            color: white;
            border: none;
            border-radius: 4px;
            font-family: Roboto;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        
        button:hover {
            background-color: #F2CB66;
        }

        /* Standaard (normale link) */
        a {
            color: #2b2b2c8b; /* Kleur van de link */
            text-decoration: none; /* Geen underline */
        }

        /* Als de gebruiker over de link hovert */
        a:hover {
            color: #2b2b2c8b; /* Verander de kleur bij hover */
            text-decoration: underline; /* Onderlijn bij hover */
        }

        /* Actieve link (wanneer erop geklikt wordt) */
        a:active {
            color: #2b2b2c8b; /* Kleur bij het klikken */
            text-decoration: none; /* Geen underline */
        }

        /* Bezochte link */
        a:visited {
            color: #2b2b2c8b; /* Kleur van een bezochte link */
            text-decoration: none; /* Geen underline */
        }

        a.external{
            background-image: url(../images/generic/external-link.svg);
            background-position: center right;
            background-repeat: no-repeat;
            background-size: 0.857em;
            padding-right: 1em;
        }

        .card-btn, .card-btn:hover, .card-btn.focus {
            background-color: #F2CB66;
            border: none;
        }

        .cookie-consent-bar {
            display: none;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
        }

        .cookie-consent-bar.show {
            display: block;
        }

        .modal-txt {
            font-family: Roboto;
            font-size: 22px;
        }