@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700&display=swap');

:root{
                --color-primary: hsl(216, 67%, 43%);
    --color-primary-darker: hsl(216, 67%, 38%);
    --color-primary-darkest: hsl(216, 67%, 33%);
    --color-primary-translucent: hsla(216, 67%, 43%, .48);

                --color-secondary: hsl(3, 77%, 32%);
    --color-secondary-darker: hsl(3, 77%, 27%);
    --color-secondary-darkest: hsl(3, 77%, 22%);
    --color-secondary-translucent: hsla(3, 77%, 32%, .48);

            --color-tertiary: hsl(199, 85%, 72%);
--color-tertiary-12: hsla(199, 85%, 72%, .12);
--color-tertiary-24: hsla(199, 85%, 72%, .24);
--color-tertiary-36: hsla(199, 85%, 72%, .36);
--color-tertiary-48: hsla(199, 85%, 72%, .48);
--color-tertiary-60: hsla(199, 85%, 72%, .60);
--color-tertiary-72: hsla(199, 85%, 72%, .72);
--color-tertiary-84: hsla(199, 85%, 72%, .84);
--color-tertiary-96: hsla(199, 85%, 72%, .96);


                
    
    --color-light: hsl(0, 0%, 100%);
    --color-dark: hsl(0, 0%, 0%);
    --color-grey-1: hsl(0, 0%, 97%);
    --color-grey-2: hsl(0, 0%, 95%);
    --color-grey-3: hsl(0, 0%, 90%);
    --color-grey-4: hsl(0, 0%, 60%);
    --color-grey-5: hsl(0, 0%, 40%);

  
    --font-size: 16px;
    --font-family: 'Montserrat';
    
    --shadow-default: 0 2px 16px 0 rgba(0,0,0,0.12);
    --shadow-darker: 0 2px 16px 0 rgba(0,0,0,0.16);
    --shadow-lighter: 0 2px 16px 0 rgba(0,0,0,0.08);
    --shadow-inset: inset 0 1px 3px 0 rgba(0,0,0,0.12);
}

html {
    font-size: var(--font-size);
}

body {
    font-family: var(--font-family),serif !important;
    color: var(--color-dark);
}