@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");

:root {
    --primary-bg-color: #fdfbf0;
    --shadow: #a58f16;
    --orange: #a8640a;
    --green: #477d42;
    --blue: #005e78;
    --dark: #444444;
    --grey: #bbbbbb;
}

#nav {
    background-color: var(--primary-bg-color);
}

.header-font {
    font-family: "Work Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: 10vh;
    line-height: 0.8;
    letter-spacing: 0.5;
    text-shadow: 5px 5px 0px var(--grey);
}

.header-font .text-4xl {
    text-shadow: none;
}

h2 {
    font-family: "Work Sans", sans-serif !important;
    font-optical-sizing: auto !important;
    font-weight: 700 !important;
    font-style: normal !important;
    font-size: 4vh !important;
    line-height: 1 !important;
    letter-spacing: 0.5 !important;
    padding-bottom: 40px;
}

p.italic {
    padding-bottom: 20px;
}

h3 {
    font-family: "Work Sans", sans-serif !important;
    font-optical-sizing: auto !important;
    font-weight: 700 !important;
    font-style: normal !important;
    font-size: 2vh !important;
    line-height: 1 !important;
    letter-spacing: 0.5 !important;
    padding-bottom: 20px;
}

.header-font .icon {
    text-shadow: none;
}

.logo {
    background: var(--blue);
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    box-shadow: 8px 8px 0px var(--dark);
    transform: rotate(-5deg);
}

.logo-green {
    background: var(--green);
}

.logo-orange {
    background: var(--orange);
}

img {
    -webkit-filter: drop-shadow(5px 5px 0px var(--orange));
    filter: drop-shadow(5px 5px 0px var(--orange));
}

a.button {
    box-shadow: 5px 5px 0px var(--shadow);
}

a.button:hover {
    box-shadow: none;
}

html {
    scroll-behavior: smooth;
    background-color: var(--primary-bg-color);
    font-family: "Work Sans", sans-serif !important;
}

.accent {
    color: var(--blue);
}

.accent-green {
    color: var(--green);
}

.accent-orange {
    color: var(--orange);
}

.orange-block {
    background-color: var(--orange);
    border: 1px solid white;
    border-radius: 8px;
    padding: 20px 40px;
    box-shadow: 5px 5px 0px var(--shadow);
    color: white;
    font-size: 16px;
}

.blue-block {
    background-color: var(--blue);
    border: 1px solid white;
    border-radius: 8px;
    padding: 20px 40px;
    box-shadow: 5px 5px 0px var(--shadow);
    color: white;
    font-size: 16px;
}

.green-block {
    background-color: var(--green);
    border: 1px solid white;
    border-radius: 8px;
    padding: 20px 40px;
    box-shadow: 5px 5px 0px var(--shadow);
    color: white;
    font-size: 16px;
}

.dark-block {
    background-color: var(--dark);
    border: 1px solid white;
    border-radius: 8px;
    padding: 20px 40px;
    box-shadow: 5px 5px 0px var(--shadow);
    color: white;
    font-size: 16px;
}

img.boek {
    -webkit-filter: none;
    filter: none;
    border-radius: 8px;
}