/* =============================================
   Basis CSS
   ============================================= */

* {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

*:focus-visible {
    outline: none;
    box-shadow: 0px 10px 20px 0px var(--box-shadow);
}

/* =============================================
   CSS-variabelen
   ============================================= */

body {
    /* Typografie */
    --site-font: 'Poppins', sans-serif;
    --button-font: 'Proxima Nova', sans-serif;
    --icon-font: 'actk-icons', serif;

    /* Fontgroottes (mobiel standaard) */
    --font-size-huge: clamp(1.5rem, 1.4559rem + 0.2353vw, 1.75rem);
    --font-size-large: clamp(1.375rem, 1.3309rem + 0.2353vw, 1.625rem);
    --font-size-medium: clamp(1.25rem, 1.2059rem + 0.2353vw, 1.4rem);
    --font-size-normal: clamp(1.125rem, 1.0809rem + 0.2353vw, 1.3rem);
    --font-size-small: 14px;
    --font-size-menu: var(--font-size-normal);

    /* Lijnhoogtes */
    --line-height-huge: 1;
    --line-height-large: 4rem;
    --line-height-medium: 1.8;
    --line-height-normal: 1.6;
    --line-height-small: 1;

    /* Kleuren */
    --black: #000000;
    --soft-black: #333;
    --white: #FFFFFF;
    --off-white: #F9F9F9;
    --box-shadow: #0000001a;
    --full-box-shadow: 0 5px 20px #00000033;

    --footer-color: #fdd835;
    --see-through-color: #00000080;


    --primary-color: var(--black);
    --primary-color-alt: #F6F3E8;
    --secondary-color: #C3BCA4;
    --secondary-color-light: #F6F3E8;

    --accent-color: #FFC700;
    --hover-color: #413508;

    --primary-text-color: var(--black);
    --secondary-text-color: var(--white);

    --error-color: #D44848;
    --color-success: #4BAB33;

    --color-gray: rgb(0, 0, 0, 55%);
    --color-lightgray: #C3BCA4;

    /* Knoppen */
    --button-color: #FFC700;
    --button-hover: #413508;

    /* Achtergronden */
    --website-background: var(--white);
    --main-text-color: var(--black);
    --background-color-3: var(--primary-color-alt);
    --background-color-4: var(--secondary-color);

    /* Afmetingen */
    --header-height: 9.6rem;
    --site-x-padding: 2.5rem;
    --site-width: 100%;
    --column-gap: 2.5rem;

    /* Hoeken */
    --border-radius: 10px;
    --half-border-radius: 20px 0 20px;
}

/* =============================================
   Media Queries: Mobile First
   ============================================= */

@media screen and (min-width: 481px) {
    body {
        --font-size-huge: 4rem;
        --font-size-large: 3rem;
        --font-size-medium: 2rem;
        --font-size-normal: 1.4rem;
        --font-size-small: 1rem;

        --header-height: 11rem;
        --column-gap: 3rem;
    }
}

@media screen and (min-width: 769px) {
    body {
        --font-size-huge: 5rem;
        --font-size-large: 3.6rem;
        --font-size-medium: 2.2rem;
        --font-size-normal: 1.6rem;
        --font-size-small: 1rem;

        --header-height: 11.7rem;
        --site-x-padding: 3.5rem;
        --column-gap: 3.5rem;
    }
}

@media screen and (min-width: 1201px) {
    body {
        --font-size-huge: 6rem;
        --font-size-large: 4.2rem;
        --font-size-medium: 2.5rem;
        --font-size-normal: 1.8rem;
        --font-size-small: 1rem;

        --site-width: 124.3rem;
    }
}


/* =============================================
   Standaard Elementen
   ============================================= */

body {
    background-color: var(--website-background);
    color: var(--main-text-color);
}

/* =============================================
   Formulierelementen
   ============================================= */