body { 
    /* background: #d7dfeb; */
    /* opacity: 1; */
    height: 100%;
    position: relative;
    font-family: 'Inter', sans-serif;
}

.video-block {
    position: relative;
    right: 0;
    top: 0;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16/9;


    @media (min-width: 1024px) {
        aspect-ratio: 6/4;
        border-radius: 0px 0px 0px 30px;
    }

    .thumbnail {
        width: 100%;
        height: 100%;
        z-index: 7;
        img {
            object-fit: cover;
            object-position: left;
            display: block;
            width: 100%;
            height: 100%;
        }
    }
    
    .play-button,
    .pause-button, .mute-button {
        position: relative;
        cursor: pointer;
        background: none;
        border: none;
        align-items: center;
        justify-content: center;
    }

    
    .play-button {
        display: none; /* Standaard verborgen */
    }

    .pause-button, .mute-button {
        display: block;
    }

    .knoppen {
        position: absolute;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 10px; 
        z-index: 10; 
        bottom: 5%;
        top: auto;
        left: 0;
        right: 0;
        opacity: 0.75;

        .pause-button, .play-button, .mute-button {
            border: 2px solid #fff; 
            border-radius: 50px; 
            width: 32.5px;
            height: 32.5px;
            background-color: #ffffff50;
        }

        .pause-button img {
            width: 14px;
            justify-self: center;
        }

        .play-button img {
            width: 13px;
            justify-self: center;
            margin-left: 3px;
        }

        .mute-button img {
            width: 21px;
            justify-self: center;
        }

        @media (min-width: 425px) { /* Telefoon+ */
            .pause-button img {
                width: 18px;
            }
    
            .play-button img {
                width: 16px;
            }
    
            .mute-button img {
                width: 26px;
            }

            .pause-button, .play-button, .mute-button {
                width: 42.5px;
                height: 42.5px;
            }
        }

        @media (min-width: 2000px) {
            .pause-button img {
                width: 32px;
            }
    
            .play-button img {
                width: 31px;
            }
    
            .mute-button img {
                width: 41px;
            }

            .pause-button, .play-button, .mute-button {
                width: 55px;
                height: 55px;
            }
            
        }
    }

    
    #videoWrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 5;
    }

    video {
        display: block !important;
        pointer-events: none;
        position: relative;
        object-fit: cover;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 5;
    }
}