:root {
    /* COLORS */
    --white-color: #ffffff;
    --block-transparent-background-color: rgba(255, 255, 255, 0.75);
    --main-color: #896965;
    --light-color: #f3e8e0;
    --border-color: #cbbbb9;
    --section-title-color: #634945;
    --text-color: #433f3f;

    /* TODO : Faudrait voir quoi faire de ces variables. soit je les supprime, soit j'en fais pour chaque section/components. Faudrait plus avoir de color dans les autres fichiers et si possible pas trop d'espacement */
    --header-background-color: #eee6e4;
    --header-separator-color: var(--border-color);
    --services-background-color: rgba(238, 230, 228, 0.5);
    --question-separator-color: rgba(217, 217, 217, 0.5);
    --question-answer-color: #827c7c;

    /* SIZES */
    --content-max-size: 1440px;
    --font-size-xsmall: 10px;
    --font-size-small: 15px;
    --font-size-normal: 20px;
    --font-size-large: 25px;
    --font-size-xlarge: 30px;
    --font-size-xxlarge: 35px;
    --font-size-xxxlarge: 45px;
    --header-height-size: 85px;
    --header-height-desktop-size: 125px;

    /*
    Breakpoint :
    - desktop: 1024px
    - large-desktop: 1224px
    */

    /* FONT */
    --text-lightbold: 500;
    --text-bold: 700;

    /* SPACING */
    --side-content-spacing: 24px;
    --vertical-content-spacing: 40px;
}

@font-face {
    /* Title */
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.ttf') format("truetype");
}

@font-face {
    /* Text */
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Regular.ttf') format("truetype");
}

html {
    /* To adjust scroll with sticky header */
    scroll-padding-top: var(--header-height-size);
}

body {
    font-family: 'Poppins', sans-serif;
    font-size: var(--font-size-normal);
    margin: 0;
}

header,
main {
    margin: auto;
    max-width: var(--content-max-size);
}

strong {
    font-weight: var(--text-bold);
}

@media only screen and (min-width: 1024px) {
    :root {
        --block-transparent-background-color: rgba(255, 255, 255, 0.5);
        --vertical-content-spacing: 70px;
    }

    html {
        scroll-padding-top: var(--header-height-desktop-size);
    }
}