*{
    margin: 0px;
    padding: 0px;
    background-color: rgb(251 251 251);
}

body {
    overflow-y: scroll;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-height: 100vh;
    position:relative;
    display: flex;
    flex-direction: column;
}

#siteHeader { /* Header blijft altijd bovenaan en bovenop de pagina */
    position: sticky;
    z-index: 1000;
    top: 0px;
    box-shadow: 0px 0px 10px rgb(134, 134, 134);
    }

    nav { /* Navigatiebalk krijgt een grid en hoogte */
        width: 100%;
        height: 80px;
        display: grid;
        grid-template-columns: 1fr 85px 0px 85px 1fr; /* Op deze manier komen de Videos en Campaigns kopjes in het midden te staan, omdat de breedte van de kolommen aangepast wordt naar de content. De middelste kolom is bedoeld om spacing te creëren tussen die twee elementen*/ 
        grid-gap: 1%;
        }
        
        nav a:hover { /* Feedback: de videos en campaign knoppen krijgen een hover effect */
            color:rgb(0, 0, 0);
            text-shadow: 0px 0px 0px rgb(0, 0, 0);
        }

        .siteHeaderNav { /* Elementen op de balk styling */
            align-content: center;
            font-size: 17px;
            overflow-y: hidden; /* Zorgen dat de navigatiebalk niet dikker kan worden */
            overflow-x: hidden;
        }

        .siteHeaderNav:nth-child(1) {
            grid-column-start: 1;
            grid-column-end: 2;
            margin-left: 40px;
        }

        .siteHeaderNav:nth-child(2) { 
            grid-column-start: 2;
            grid-column-end: 3;
            justify-self: end; /* Hierdoor komen de videos en campaign knoppen in het midden te staan */
        }

        .siteHeaderNav:nth-child(3) {
            grid-column-start: 4;
            grid-column-end: 5;
            justify-self: start;
        }

        .siteHeaderNav:nth-child(4) {
            grid-column-start: 5;
            grid-column-end: 6;
            margin-right: 40px;
            justify-self: end;
        }

        #siteHeaderHome { /* Home knop, zorgen dat de elementen naast elkaar komen ipv. onder elkaar */
            width: fit-content;
            display: flex;
            align-items: center;
        }
        #siteHeaderHome:hover { /* Feedback */
            filter: opacity(0.8)
        }
        #siteHeaderHome img {
            width:80px;
        }
        #siteHeaderName {
            margin-left: 16px;
            text-shadow: none;    
        }
        #siteHeaderName h1 {
            font-weight: bold;
            font-size: 20px;
        }
        #siteHeaderName p {
            padding-top: 3px;
            font-size: 14px;
        }
        @media (max-width: 750px) { /* Responsive design, wanneer de andere interface elementen beginnen te overlappen door een te kleine window, verdwijnt de tekst en blijft alleen het logo over */
            #siteHeaderName {
                display: none;
            }
        }
        #currentPage {
            font-weight: bold;
            text-shadow: none;
        }
        #siteHeaderContact p { /* Contact knop styling */
            color: white;
            padding: 10px 20px 10px 20px;
            border: 2px solid;
            border-color: black;
            background-color: black;
            width:fit-content;
        }
        #siteHeaderContact {
            height: fit-content;
            margin-top: auto;
            margin-bottom: auto;
        }
        #siteHeaderContact p:hover { /* Feedback */
            background-color: rgb(46, 46, 46);
            text-shadow: 0px 0px 0px white;
}


footer { /* footer altijd onderaan */
    width:100%;
    position: absolute;
    align-items: center;
    bottom: 0px;
    height: 60px;
    display: flex;
    justify-content: space-between; /* Zo is de tekst links en de verwijzingen rechts */
    }
    footer p {
        margin-left: 40px;
    }
    #siteFooterLinks {
        margin-right: 30px;
    }
    #siteFooterLinks a {
        margin-right: 10px;
    }
    #siteFooterLinks img {
        height: 30px;
    }
    #siteFooterLinks img:hover { /* Feedback */
        filter: opacity(0.8)
}

.maxWidth { /* Rijen met deze class worden beperkt in de breedte, en gecentreerd */
    max-width: 1220px;
    margin-left: auto;
    margin-right: auto;
}

main {
    margin-top: 20px;
    margin-bottom: 100px;
    margin-left: 16px;
    margin-right: 16px;
    text-align: left;
    }
    main h2 { /* Standaard opmaak van de koppen */
        font-size: 40px;
        font-weight: bold;
        margin-bottom: 20px;
    }   
    main h3 {
        font-size: 30px;
        font-weight:600;
        margin-bottom: 20px;
}



#homeHero { /* De grote knoppen komen beeldvullend naast elkaar te staan */
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    grid-template-rows: clamp(200px, 538px, 80vh); /* De hoogte van de knoppen is afhankelijk van de window hoogte */
    }
    .homeHeroCard { /* Zodat er tekst overheen geplaatst kan worden */
        position: relative;
        text-align: center;
    }
    .homeHeroCard:hover { /* Feedback */
        filter: brightness(1.1);
    }
    .homeHeroCard img { /* De afbeeldingen worden op de achtergrond geplaatst */
        height: 100%;
        width: 100%;
        max-width: none;
        object-fit: cover;        
    }
    .homeHeroCard h2 { /* De titels worden bovenop de afbeeldingen in het midden geplaatst */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: none;
        font-size: clamp(5px, 70px, 8vw); /* De font size is afhankelijk van de window breedte */
        font-weight: 300;
}


#homeAboutMe div { /* De content wordt in een grid geplaatst */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(331px, auto)); /* Als, door de breedte van de window, een kolom kleiner wordt dan 331px, dan schuift deze kolom onder de eerste */
    column-gap: 16px;
    row-gap: 20px;
    justify-items: center;
    overflow: hidden;
    }
    #homeAboutMe img {
        height: auto;
        width: 331px;
}


#videosShowreel { /* Zo wordt het formaat van de video responsive */
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    }
    #videosShowreel iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
}

#videosLijst { /* De cards worden in een responsive grid geplaatst */
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    column-gap: 16px;
    row-gap: 20px;
    justify-content: center;
    overflow: hidden; 
    }
    #videosLijst h3 {
        margin-bottom: 10px;
        background: none;
    }
    #videosLijst p {
        background: none;
        margin-top: 10px;
    }
    .videosLijstCard {   
        justify-self: center;
    }
    .videosLijstCard:hover { /* Feedback */
        filter: brightness(1.1);
    }
    .videosThumbnail { /* De afbeeldingen houden dezelfde verhouding als ze geschaald worden */
        position: relative;
        padding-bottom: 56.25%; /* 16:9 */
        height: 0;
    }
    .videosThumbnail img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height:100%;
    }

#videoProject {
    margin-bottom: 40px;
    }
    #videoResult { /* Zo wordt het formaat van de video responsive */
        position: relative;
        padding-bottom: 56.25%; /* 16:9 */
        height: 0;
        }
        #videoResult iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
    }

#videoContext {
    margin-top: 40px;
}
    #videoContext section, #videoTestimonial {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(190px, auto)); /* Als, door de breedte van de window, een kolom kleiner wordt dan 190px, dan schuift deze kolom onder de eerste */
        column-gap: 16px;
        justify-content: start;
        overflow: hidden;
        margin-bottom: 20px;
    }
    #videoContext h3, #videoTestimonial h3 {
        font-weight: normal;
        font-size: 25px;
        align-self: center;
        justify-self: center;
    }

#videoTestimonial {
    margin-top: 40px;
    }
    #videoTestimonial img {
        width: 150px;
        border-radius: 50%;
        margin-bottom: 20px;
        align-self: center;
        justify-self: center;
    }
    #videoTestimonial h3 {
    justify-self: start;
}

#contact p {
    margin-bottom: 20px;
}

#contact a { 
    text-decoration: underline; 
}
#contact a:hover {
    text-decoration: none; /* Feedback: Door te hoveren over de link, verdwijnt de underline en is het duidelijk dat je ermee kunt interacten */
}

#contact ul li {
    display: grid;
    grid-template-columns: 43px 1fr;
    grid-gap: 16px;
    align-items: center;
    margin-bottom: 20px;
}
#contact ul li div:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: 2;
    justify-self: center;
    
}
#contact ul li div:nth-child(2) {
    grid-column-start: 2;
    grid-column-end: 3;
}
    
#contact img {
    height: 30px;
}
#contact img:hover {
    opacity: 0.8; /* Feedback: Door te hoveren over het icoon, wordt deze iets lichter en is het duidelijk dat je erop kan klikken */
}