/* ========================================================================== 
   1. CSS Variables
   ========================================================================== */
:root {
    --ijzer-color-blauw: #043c4d;
    --ijzer-color-blauw-rgb: 4,60,77;
    --ijzer-color-blauw-licht: #7697a0;
    --ijzer-color-blauw-licht-rgb: 118,151,160;
    --ijzer-color-oranje: #ff9118;
    --ijzer-color-oranje-rgb: 255,145,24;
    --ijzer-color-lila: #c4b2e2;
    --ijzer-color-lila-rgb: 196,178,226;
    --ijzer-color-lila-licht: #c4b2e2;
    --ijzer-color-lila-licht-rgb: 215,201,236;
    --ijzer-color-roze: #f79fc9;
    --ijzer-color-roze-rgb: 247,159,201;
    --ijzer-color-groen: #8bd3bd;
    --ijzer-color-groen-rgb: 139,211,189;
    --header-height: 145px;
}

/* fonts */

.font-PlakatoStencilPro {
    font-family: "plakato-stencil-pro", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.font-PlakatoPro {
    font-family: "plakato-pro", sans-serif;
    font-weight: 400;
    font-style: normal;
}

html {
    font-size: 16px;
}

@media (min-width: 768px) {
    html {
        font-size: 18px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
   /* box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;*/
}

html {
    position: relative;
    min-height: 100%;
}

a {color:inherit!important;text-decoration:underline;}
a:hover {color: var(--ijzer-color-oranje)!important;}
body {
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* FOOTER */
.footer {
    line-height: normal !important;
    padding-top: 3rem;
    padding-bottom: 1rem;
}

/* HEADER */
header li.nav-item a {
    font-size: 2rem;
}

header a:hover, .nav-link:hover {
    color: var(--ijzer-color-oranje);
}

/* KLEUREN */
.ijzer-color-blauw {
    color: var(--ijzer-color-blauw);
}

.ijzer-color-oranje {
    color: var(--ijzer-color-oranje);
}

.ijzer-color-roze {
    color: var(--ijzer-color-roze);
}

.ijzer-color-groen {
    color: var(--ijzer-color-groen);
}

.ijzer-color-lila {
    color: var(--ijzer-color-lila);
}
.ijzer-bgcolor-blauw {background-color:var(--ijzer-color-blauw);color:white;}
.ijzer-bgcolor-blauw-licht {
    background-color: var(--ijzer-color-blauw-licht);
    color: white;
}
.ijzer-bgcolor-lila {
    background-color: var(--ijzer-color-lila);
    color: white;
}

.ijzer-border-color-blauw {
    border-color: var(--ijzer-color-blauw);
}

.woord-woord {
    line-height: 0.7;
    font-size: 5rem;
}

@media (min-width: 768px) {
    .woord-woord {
        line-height: 0.7;
        font-size: 7rem;
    }
}