@font-face {
    font-family: 'CAC Krazy Legs';
    src: url('../fonts/CACKrazyLegs.woff2') format('woff2'),
    src: url('../fonts/CACKrazyLegs.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.site-description {    
    font-family: 'CAC Krazy Legs', sans-serif;    /* Optioneel: pas de grootte aan als het lettertype te klein of te groot uitvalt */   
    font-size: 4rem !important; 
    text-align: center !important;
}

/* Maakt van de header een flex-box die de ruimte netjes verdeelt */
.container-header .grid-child {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

/* Zorgt dat het logo-blok de volledige breedte mag gebruiken om de inhoud te verdelen */
.container-header .navbar-brand {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

/* Houdt het logo netjes aan de linkerkant */
.container-header .brand-logo {
    margin-right: 0 !important;
    margin-bottom: 0 !important;
}

/* Duwt de tekst (titel en beschrijving) naar het exacte midden */
.container-header .navbar-brand .site-title,
.container-header .navbar-brand .site-description {
    display: block !important;
}

/* Dit zorgt voor de centrering van de tekstgroep */
.container-header .navbar-brand {
    position: relative;
}

.container-header .navbar-brand :not(.brand-logo) {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

/* Zorgt dat de titel en beschrijving netjes onder elkaar gecentreerd staan */
.container-header .site-title,
.container-header .site-description {
    width: 100%;
}