/*
    Fonts selected from Google Fonts https://fonts.google.com

    Header
        Insert header font name
    
    Text
        Insert text font name

    The theme file must be loaded second in your list of stylesheets after only the reset.css
*/

/*
Replace with your @import statement from Google fonts
*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto+Flex:opsz@8..144&display=swap');

/* Change the font family names to match your selections */
:root {
    --header-font-family: 'Open Sans', sans-serif;
    --header-font-weight-1: 400;
    --header-font-weight-2: 500;
    --header-font-weight-3: 700;

    --text-font-family: 'Roboto Flex', sans-serif;
}


/*

    Describe in one or 2 lines how you picked your colours and give a link if you 
    used an online tool

    Colours converted to HSL using Color Converter from W3Schools 
    https://www.w3schools.com/colors/colors_converter.asp

    Replace with your colours

    Colour 1     #0511F2    	 hsl(237, 96%, 48%)
    Colour 2     #35D0F2         hsl(191, 88%, 58%)
    Colour 3     #9ED91E         hsl(79, 76%, 48%)
    Colour 4     #F2E205         hsl(56, 96%, 48%)
    Colour 5     #0D0D0D         hsl(0, 0%, 5%)

*/


:root {
    --colour-1-rgb: #0511F2;
    --colour-1-hue: 237;
    --colour-1-saturation: 96%;
    --colour-1-lightness: 48%;
    --colour-1: hsl( var(--colour-1-hue), var(--colour-1-saturation), var(--colour-1-lightness));


    --colour-2-rgb: #35D0F2;
    --colour-2-hue: 191;
    --colour-2-saturation: 88%;
    --colour-2-lightness: 58%;
    --colour-2: hsl( var(--colour-2-hue), var(--colour-2-saturation), var(--colour-2-lightness));
     
    --colour-3-rgb:  #93F205 ;
    --colour-3-hue: 84;
    --colour-3-saturation: 96%;
    --colour-3-lightness: 48%;
    --colour-3: hsl( var(--colour-3-hue), var(--colour-3-saturation), var(--colour-3-lightness));

    --colour-4-rgb: #9ED91E;
    --colour-4-hue: 79;
    --colour-4-saturation: 76%;
    --colour-4-lightness: 48%;
    --colour-4: hsl( var(--colour-4-hue), var(--colour-4-saturation), var(--colour-4-lightness));
  
    --colour-5-rgb: #0D0D0D;
    --colour-5-hue: 0;
    --colour-5-saturation: 0%;
    --colour-5-lightness: 5%;
    --colour-5: hsl( var(--colour-5-hue), var(--colour-5-saturation), var(--colour-5-lightness));
}