* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root {
    --primary: #FF6F59;
    --primary-light: #FF9A8B;
    --primary-dark: #D45A47;

    --secondary: #18A999;
    --secondary-light: #5DC0B5;
    --secondary-xtra-light: #A4E0DB;
    --secondary-dark: #128A7C;

    --accent: #F7DBA7;
    --accent-light: #FFF4D9;
    --accent-dark: #E5C895;

    --dark: #2C302A;
    --dark-light: #3E423C;

    --gray: #474A48;
    --gray-light: #6B6E6C;
    --gray-lighter: #E0E2E0;

    --earth: #8B5A2B;
    --forest: #3A5A40;
    --sky: #5D8BF4;

    --roboto-slab: "Roboto Slab", serif;
    --sans-serif: system-ui, -apple-system, sans-serif;
}

body {
    font-family: Arial, sans-serif;
}

.big,
.small {
    padding: 10px 0;
}

.big {
    min-height: 80vh;
}

.small {
    min-height: 40vh;
}

.home {
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%);
}

.home::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 100%;
    height: 200%;
    z-index: 0;
    background:
        radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.8) 0%, transparent 20%),
        radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.5) 0%, transparent 20%);
}

.over-ons {
    background: linear-gradient(var(--secondary) 20%,
            var(--secondary-light) 80%,
            var(--primary-light) 100%);
}

.product {
    background: linear-gradient(var(--primary-light) 0%,
            var(--primary) 30%,
            var(--primary) 70%,
            var(--accent) 100%);
}

.duurzaamheid {
    background: linear-gradient(var(--accent) 70%,
            var(--secondary-xtra-light) 100%);
}

.arbeiders {
    background: linear-gradient(var(--secondary-xtra-light) 0%,
            var(--secondary-light) 30%,
            var(--secondary-light) 70%,
            var(--primary-light) 100%);
}

.environment {
    background: linear-gradient(var(--primary-light) 0%,
            var(--primary) 30%,
            var(--primary) 70%,
            var(--accent) 100%);
}

.fair-trade {
    background: linear-gradient(
            var(--accent) 70%,
            var(--secondary-xtra-light) 100%);
}

.omgeving {
    background: linear-gradient(var(--secondary-xtra-light) 0%,
            var(--secondary-light) 30%,
            var(--secondary-light) 70%);
}