/**********************************************************************************/
/* Import Fonts                                                                   */
/**********************************************************************************/

/* open-sans-300 - latin  */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: url('./fonts/open-sans-v27-latin-300.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('./fonts/open-sans-v27-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('./fonts/open-sans-v27-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
    url('./fonts/open-sans-v27-latin-300.woff') format('woff'), /* Modern Browsers */
    url('./fonts/open-sans-v27-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
    url('./fonts/open-sans-v27-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-regular - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('./fonts/open-sans-v27-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('./fonts/open-sans-v27-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('./fonts/open-sans-v27-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('./fonts/open-sans-v27-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('./fonts/open-sans-v27-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('./fonts/open-sans-v27-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-500 - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 500;
    src: url('./fonts/open-sans-v27-latin-500.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('./fonts/open-sans-v27-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('./fonts/open-sans-v27-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
    url('./fonts/open-sans-v27-latin-500.woff') format('woff'), /* Modern Browsers */
    url('./fonts/open-sans-v27-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
    url('./fonts/open-sans-v27-latin-500.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-700 - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: url('./fonts/open-sans-v27-latin-700.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('./fonts/open-sans-v27-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('./fonts/open-sans-v27-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
    url('./fonts/open-sans-v27-latin-700.woff') format('woff'), /* Modern Browsers */
    url('./fonts/open-sans-v27-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
    url('./fonts/open-sans-v27-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-600 - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: url('./fonts/open-sans-v27-latin-600.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('./fonts/open-sans-v27-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('./fonts/open-sans-v27-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
    url('./fonts/open-sans-v27-latin-600.woff') format('woff'), /* Modern Browsers */
    url('./fonts/open-sans-v27-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
    url('./fonts/open-sans-v27-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-800 - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 800;
    src: url('./fonts/open-sans-v27-latin-800.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('./fonts/open-sans-v27-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('./fonts/open-sans-v27-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
    url('./fonts/open-sans-v27-latin-800.woff') format('woff'), /* Modern Browsers */
    url('./fonts/open-sans-v27-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
    url('./fonts/open-sans-v27-latin-800.svg#OpenSans') format('svg'); /* Legacy iOS */
}

@font-face {
    font-family: 'JetBrains Mon';
    font-style: normal;
    font-weight: 100;
    src: local(''),
    url('./fonts/JetBrainsMono-Light.ttf') format('truetype'), /* Safari, Android, iOS */
    url('./fonts/JetBrainsMono-Light.woff2') format('woff2'); /* Super Modern Browsers */
}

@font-face {
    font-family: 'JetBrains Mon';
    font-style: normal;
    font-weight: 300;
    src: local(''),
    url('./fonts/JetBrainsMono-Medium.ttf') format('truetype'), /* Safari, Android, iOS */
    url('./fonts/JetBrainsMono-Medium.woff2') format('woff2'); /* Super Modern Browsers */
}

@font-face {
    font-family: 'JetBrains Mon';
    font-style: normal;
    font-weight: 500;
    src: local(''),
    url('./fonts/JetBrainsMono-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('./fonts/JetBrainsMono-Regular.woff2') format('woff2'); /* Super Modern Browsers */
}

@font-face {
    font-family: 'JetBrains Mon';
    font-style: normal;
    font-weight: 600;
    src: local(''),
    url('./fonts/JetBrainsMono-SemiBold.ttf') format('truetype'), /* Safari, Android, iOS */
    url('./fonts/JetBrainsMono-SemiBold.woff2') format('woff2'); /* Super Modern Browsers */
}

@font-face {
    font-family: 'JetBrains Mon';
    font-style: normal;
    font-weight: 800;
    src: local(''),
    url('./fonts/JetBrainsMono-Bold.ttf') format('truetype'), /* Safari, Android, iOS */
    url('./fonts/JetBrainsMono-Bold.woff2') format('woff2'); /* Super Modern Browsers */
}

/**********************************************************************************/
/* Set Root Variables and System Standard                                         */
/**********************************************************************************/

:root {

    /* Colors */
    --colorShoutPink: #ff0099;
    --colorShoutPurple: #9900ff;
    --colorShoutPetrol: #009BAD;
    --colorShoutWhite: #ffffff;
    --colorShoutBlack: #000000;
    --colorShoutDark: #131C24;
    --colorShoutGrey: #232C34;
    --colorShoutSun: #f2ea02;

    /*--colorShoutAnchor: #6B6B79;*/
    --colorShoutAnchor: #363e45;
    --colorShoutWhiteSmoke: #f4f2f8;
    --colorShoutLightGrey: #f0f0f0;
    --colorShoutInstrumentGrey: #c4c4c4;
    --colorShoutInsetGreyDark: #666;

    --colorShoutBorderLight: rgba(255,255,255,0.3);
    --colorShoutBorderDark: rgba(0,0,05,0.3);

    --colorShoutBgLight: rgba(255,255,255,0.1);
    --colorShoutBgDark: rgba(0, 0, 0, 0.1);
    --colorShoutBgLightHalf: rgba(255,255,255,0.1);
    --colorShoutBgDarkHalf: rgba(0, 0, 0, 0.1);


    --colorShoutPinkGlow: rgba(255, 0, 153, 0.65);

    --colorBoxShadowLight1: rgba(0, 0, 0, 0.1) 0 1px 3px 0;
    --colorBoxShadowLight2: rgba(0, 0, 0, 0.1) 0 1px 2px 0;

    --colorShoutWhiteHalf: rgba(255,255,255,0.7);
    --colorShoutBlackHalf: rgba(0, 0, 0, 0.5);

    --colorShoutLightWhite: rgba(255,255,255,0.1);
    --colorShoutLightBlack: rgba(54, 62, 69,0.1);

    --bgLight:rgba(255,255,255,0.7);
    --bgDark: rgba(54, 62, 69, 0.7);
    --bgSun: rgba(242, 234, 2, 0.3);

    --boxShadowLight: rgba(62,78, 94, 0.4);
    --boxShadowDark: rgba(0, 0, 0, 0.4);

    --bgGlassLight:rgba(252, 252, 252, 0.95);
    --bgGlassDark:rgba(31, 39, 47, 0.8);

    --buttonRadius: 7px!important;
    --buttonSmallRadius: 30px!important;

    --bgLoaderLight: rgba(255,255,255,0.5);
    --bgLoaderDark: rgba(0,0,0,0.5);


    /* Font style and font sizes */
    --font: 'Open Sans', sans-serif;
    --fontMono: 'JetBrains Mon';

    /* Font sizes */
    --font1: 7pt;
    --font2: 7.5pt;
    --font3: 9pt;
    --font3a: 10pt;
    --font4: 11pt;
    --font5: 12pt;
    --font6: 14pt;
    --font7: 18pt;
    --font8: 22pt;
    --font9: 30pt;
    --font10: 60pt;

    --lineHeight43pxButtonLabel: 20pt;

    --lineHeight1: 20pt;
    --lineHeight2: 20pt;
    --lineHeight3: 10pt;
    --lineHeight4: 11pt;
    --lineHeight5: 20pt;
    --lineHeight6: 23pt;
    --lineHeight7: 20pt;
    --lineHeight8: 20pt;
    --lineHeight9: 20pt;
    --lineHeight10: 20pt;
    --lineHeight11: 38pt;
    --lineHeight12: 35pt;
    --lineHeight13: 13pt;
    --lineHeight14: 14pt;
    --lineHeight15: 15pt;
    --lineHeight16: 30pt;

}