/*Refrigerator Deluxe*/
@font-face {
    font-family: 'Refrigerator Deluxe';
    src: url('./../assets/fonts/Refrigerator Deluxe.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Refrigerator Deluxe';
    src: url('./../assets/fonts/Refrigerator Deluxe Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Refrigerator Deluxe';
    src: url('./../assets/fonts/Refrigerator Deluxe Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Refrigerator Deluxe';
    src: url('./../assets/fonts/Refrigerator Deluxe Extrabold.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Refrigerator Deluxe';
    src: url('./../assets/fonts/Refrigerator Deluxe Heavy.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
}

/*TitanOne*/
@font-face {
    font-family: 'TitanOne';
    src: url('./../assets/fonts/TitanOne-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

:root {
    /*============================================================ 
    :ROOT - FONTS
============================================================ */
    --fontFamilyHeadlines: 'Refrigerator Deluxe',
        Helvetica,
        sans-serif;
    --fontFamilyDefault: 'Refrigerator Deluxe',
        Geneva,
        Tahoma,
        sans-serif;

    /*========================================
FONT SIZES - AS A TYPICAL STRUCTURE FOR WEBPAGES
USAGE:
 ==> "...Default..." for Text and Inputs
 ==> "...Sec..." e.g. Imagedescription (add italic and a lighter color) 
 ==> "...Tertiary..." e.g. Tables
 ========================================*/
    /*====================
FONT SIZES - INTERACTION HEAVY
====================*/
    /*Mobile*/
    /*40px*/
    /*Use between 28px-40px*/
    --fsMobileH1: 2.5rem;
    /*32px*/
    --fsMobileH2: 2rem;
    /*28px*/
    --fsMobileH3: 1.75rem;
    /*24px*/
    --fsMobileH4: 1.5rem;
    /*18px* - Use between 16px-18px*/
    --fsMobileDefault: 1.125rem;
    /*16px - Use 2px smaller than default*/
    --fsMobileSec: 1rem;
    /*14px*/
    --fsMobileTertiary: 0.875rem;

    /*Desktop*/
    /*48px* - Use between 35px-50px*/
    --fsDesktopH1: 117px;
    /*40px*/
    --fsDesktopH2: 39px;
    /*36px*/
    --fsDesktopH3: 2.25rem;
    /*32px*/
    --fsDesktopH4: 2rem;
    /*20px* - Use between 14px-20px*/
    --fsDesktopDefault: 22px;
    /*18px* - Use 2px smaller than default*/
    --fsDesktopSec: 1.125rem;
    /*16px*/
    --fsDesktopTertiary: 1rem;
}