/* ############################################## */
/* #################  1. fonts  ################# */
/* ############################################## */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Clicker+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700;900&display=swap');

/* ############################################## */
/* ##############  2. variabelen  ############### */
/* ############################################## */
:root {
    /**********  kleuren *********
    --hoofd: #2c3e50;
    --accent: #3498db;
    --secundair: #18bc9c;*/ 
    /*--accent-donker: #740a0b;*/
    /*--grijs: #cacaca;

    --domein-achtergrond: #f3fdff;
    --domein-icon: #003366;
    --domein-icon-mouse-over: #e81416;*/

    /**********  typografie  **********/
    /* => .5rem = 8px | 1rem = 16px ... 
    --f-speciaal: 'Clicker Script', cursive; */
    --f-body: 'Poppins', sans-serif;
    --f-kop: "Bricolage Grotesque", sans-serif;


    /***********  font-size  *********
    --fs-normaal: .975rem;
    --fs-klein: .815rem;
    --fs-groot: 1.15rem;
    --fs-h1: 1.95rem;
    --fs-h2: 1.45rem;
    --fs-h3: 1.3rem;
*/
    /**********  font-weight  ********
    --fw-normaal: 400;
    --fw-medium: 500;
    --fw-semi: 600;
    --fw-bold: 800;
*/
    /************  ruimte  ************/
    /***  padding, marge, gap, etc ****/
    --sp-kleiner: .25rem;
    --sp-klein: .5rem;
    --sp-normaal: 1rem;
    --sp-groot: 1.25rem;
    --sp-groter: 1.5rem;
}
    
/* ############################################## */
/* ###########  2a. domein variabelen  ########## */
/* ############################################## */
:root {
    /**********  kleuren **********/

    --domein-achtergrond: #f3fdff;
    --domein-icon: #003366;
    --domein-icon-mouse-over: #e81416;

    --footer-donker-blauw: #003366;
    --footer-licht-blauw: #1e90ff;
    --footer-donker-rood: #9a324b;
    --footer-licht-rood: #e81416;

    --wit: #fbfbfb;
    --zwart: #191919;

    --tekst: #242424;
    --achtergrond: #fefefe;
    --primary: #e30000;
    --secondary: #1e90ff;
    --tertiary: #663399;
  }
  /*:root[data-theme="dark"] {
    --tekst: #dbdbdb;
    --achtergrond: #000000;
    --primary: #ff1a1a;
    --secondary: #0070e0;
    --tertiary: #9966cc;
  }*/

/* ############################################## */
/* #################  3. reset  ################# */
/* ############################################## */
* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
    outline: 0;
    list-style: none;
}

/* ############################################## */
/* ##################  basis  ################### */
/* ############################################## */
html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    background-color: var(--achtergrond);
    color: var(--tekst);
    font-family: var(--f-body);
	font-weight: 400;
    line-height: 1.6; /* Standaard regelhoogte */
    min-height: 100vh;
    overflow-x: hidden;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: subpixel-antialiased;
}

/* ################  typografie  ################ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--f-kop);
    font-weight: bold; /* Vetgedrukte kopstijlen */
    margin-bottom: 10px; /* Ruimte onder koppen */
    padding: var(--sp-klein) 0;
} 
p {
    padding: var(--sp-kleiner) 0;
} 
a {
    text-decoration: none;
}

.ie-panel {
    display: none;
    background-color: var(--achtergrond);
    padding: 10px 0;
    box-shadow: 3px 3px 5px 0 rgba(0,0,0,.3);
    clear: both;
    text-align:center;
    position: relative;
    z-index: 1;
} 

html .ie-10 .ie-panel, html.lt-ie-10 .ie-panel {
    display: block;
}
/* #########  afbeeldingen en knoppen  ########## */
img {
    display: block;
    height: auto;
}

.btn-primary {
    background-color: var(--wit) !important;
    color: var(--primary) !important;
    border: 1px solid var(--primary) !important;
}
.btn-primary:hover {
    background-color: var(--primary) !important;
    color: var(--wit) !important;
}
.btn-outline-dark {
    background-color: var(--secondary);
    border-color: var(--secondary) !important;
    color: var(--wit);
}
.btn-outline-dark:hover {
    background-color: var(--wit);
    color: var(--secondary);
}

/* ############################################## */
/* ##################  navbar  ################## */
/* ############################################## */
.nav-link {
    font-size: 1rem;
    font-weight: 700;
    color: var(--secondary) !important;
}
.nav-link:hover {
    color: var(--tertiary) !important;
}

/* ############################################## */
/* ##################  header  ################## */
/* ############################################## */
.badge {
    background-color: var(--primary);
}

/* ############################################## */
/* ################  introductie  ############### */
/* ############################################## */
.bg-tert {
    background-color: rgba(102, 51, 153, .1);
}

/* ############################################## */
/* ##################  footer  ################## */
/* ############################################## */
footer {
    background-color: var(--footer-donker-blauw);
    color: var(--wit);
    border-block-start: 2px solid var(--footer-licht-blauw);
}
.footer-nav-link {
    color: var(--wit);
}
.footer-nav-link:hover {
    color: var(--primary);
}

footer ul {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}
.ri-twitter-x-line {
    color: var(--wit);
}
.ri-linkedin-box-fill {
    color: var(--secondary);
}
.ri-whatsapp-fill {
    color: green;
}
   
/* ############################################## */
/* ##############  medium stijl  ################ */
/* ###############   >= 768px   ################# */
/* ############################################## */
@media screen and (min-width: 768px) {
     
}
/* ############################################## */
/* ###############  large stijl  ################ */
/* ###############   >= 992px   ################# */
/* ############################################## */
@media screen and (min-width: 992px) {

}