body {
            font-family: Arial, Helvetica, sans-serif;
            margin: 0rem;
            padding: 0rem;
            background-color: #dfeee4;

        }

        h2 {
            color: #2e7d32;
        }

        iframe {

            width: 100%;
            height: 240px;
        }

        /*header*/

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.5rem 2rem;
            background-color: #e8f5e9;

        }


        .logo {
            margin: 0rem;
            font-size: 1.8rem;
            color: #2e7d32;
        }

        .menu ul {
            list-style: none;
            padding: 0rem;
            margin: 0rem;
            display: flex;
            gap: 2rem;
        }

        .menu a {
            text-decoration: none;
            color: #1b5e20;
            border-bottom: 2px solid transparent;
            padding-bottom: 3px;
        }

        .menu a:hover {
            border-bottom-color: #1b5e20;
        }

        /*footer*/

        footer {
            background-color: #e8f5e9;
            padding: 1rem;

        }

        /*IMG*/

        main>div img {
            width: 100%;
            height: auto;
            display: block;
        }

        .img-background {
            display: flex;
            justify-content: space-between;
            width: 100%;
        }

        .img-container {
            display: flex;
            justify-content: space-between;
        }

        .img-container>img {
            width: 30%;
            border-radius: 0.375rem;
        }

        /*CARD*/

        .card {
            background-color: #f3faf5;
            border-radius: 1rem;
            margin-bottom: 40px;
        }

        .card.no-flex-container {
            padding-top: 4px;
            padding-bottom: 4px;
            margin: 20px;
        }

        .card-body {
            margin: 20px;
            padding: 25px;
        }

        .card-body p {
            margin-bottom: 0;
        }

        /*FLEX LAYOUT*/

        .flex-container {
            display: flex;
            flex-direction: row;
            margin: 20px;
            gap: 20px;
        }

        .flex-item {
            width: 100%;
        }


        /*OVERIGE*/
        .auteur {
            font-size: 0.7rem;

        }


        @media (max-width: 600px) {
            .flex-container {
                flex-direction: column;
                gap: 0;
            }

            .header {
                padding: 1rem 1rem;
                font-size: 1rem;
                flex-wrap: wrap;
                gap: 1rem;
            }

            .logo {
                font-size: 1.3rem;
                padding-left: 11.2rem;
            }

            .menu {
                padding-left: 3rem;
                align-items: center;
            }
        }