@font-face {
    font-family: 'Abordage';
    src:  url('../fonts/Abordage-Regular.woff') format('woff')
          url('../fonts/Abordage-Regular.woff2') format('woff2');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: 'Luciole';
    src:  url('../fonts/Luciole-Regular.woff') format('woff')
          url('../fonts/Luciole-Regular.woff2') format('woff2');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: 'Luciole';
    src:  url('../fonts/Luciole-Bold.woff') format('woff')
          url('../fonts/Luciole-Bold.woff2') format('woff2');
    font-style: normal;
    font-weight: bold;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: 'Luciole';
    src:  url('../fonts/Luciole-BoldItalic.woff') format('woff')
          url('../fonts/Luciole-BoldItalic.woff2') format('woff2');
    font-style: italic;
    font-weight: bold;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: 'Luciole';
    src:  url('../fonts/Luciole-Italic.woff') format('woff')
          url('../fonts/Luciole-Italic.woff2') format('woff2');
    font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}




:root{
/*Margin variables*/
--marginNormal: 20px;  
--marginBig: var(--marginNormal) *2;  
--marginSmall: var(--marginNormal) /2;
--pageMargin: 36px;
--pageMarginMobile: 20px;

/*Fonts*/
--titleFont: "Abordage", sans-serif;
--font : "Luciole", sans-serif;

/*FontSize*/
--siteTitle : 30px;
--siteTitleMobile : 18px;
--menu : 25px;
--menuMobile : 17px;
--filters : 15px;
--filtersMobile : 13px;
--articleTitle : 70px;
--articleTitleMobile : 45px;
--text: 20px;
--textMobile: 16px;
--smallText: 15px;
--smallTextMobile: 12px;