@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');

html{

    --denkom-groen: #325334;
    --denkom-lichtgroen: #818b6b;
    --denkom-oranje: #E76020;
    --denkom-geel: #EF892E;
    --denkom-lichtgeel: #FFDB9E;
    --denkom-bruin: #483C2A;
}

body{
    background-color: var(--denkom-lichtgeel);
    font-family: Poppins, Futura, sans-serif;
    font-size: 20px;
}

h1, h2, h3 {
    font-weight: 700;
    color: var(--denkom-oranje);
}

h4 {
    font-weight: 600;
    color: var(--denkom-bruin);
    font-size: inherit;
}

a {
    color: var(--denkom-groen);
}

#content .card-header .badge {
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    color: var(--denkom-oranje);
    border: 2px solid var(--denkom-oranje);
    border-radius: 0.8rem;
    background-color: transparent;
}

.btn-primary {
    background-color: var(--denkom-oranje);
    border-color: var(--denkom-geel);
}

#footer.bg-light {
    background-color: var(--denkom-lichtgeel) !important;
    color: var(--denkom-bruin) !important;
}

#footer span.mr-auto {
    visibility: hidden;
}

@media screen and (min-width: 900px) {
    h1, h2 {
        font-size: 3rem;
        margin-top: 4.5rem;
    }
}