:root {

    /* Base Colors */
    --white: #ffffff;
    --off-white: #ededed;
    --black: #222222;
    --primary: #1e73be;
    --secondary: #8224e3;
    --tertiary: #5b8fbf;
    
    /* Default Color Definitions */
    --default-bg-color: var( --white );
    --default-heading-color: var( --black );
    --default-body-color: var( --black );
    --default-link-color: var( --primary );
    
    /* Default Button Colors & Padding */
    --default-button-bg-color: var( --primary );
    --default-button-font-color: var( --white );
    --button-vertical-padding: 16px;
    --button-horizontal-padding: 16px;
    /*** Site Content Styles ***/

    /* Header */
    --header-background-color: var( --default-bg-color );
    --header-font-color: var( --default-body-color );
        --m-header-padding: 16px;
    --t-header-padding: 24px;
    --d-header-padding: 48px;

    --main-menu-background-color: var( --primary );
    --main-menu-font-color: var( --white );
        
    /* Headings & Typography */

    --heading-font-family: "Roboto", Arial, sans-serif;
    --body-font-family: "Open Sans", Arial, sans-serif;

    --list-style: disc;

    --m-body-font-size: 16px;
    --m-paragraph-margin: 16px;
    --m-list-padding: 16px;

    --t-body-font-size: 16px;
    --t-paragraph-margin: 16px;
    --t-list-padding: 16px;

    --d-body-font-size: 16px;
    --d-paragraph-margin: 24px;
    --d-list-padding: 16px;

    --m-h1-size: 40px;
    --m-h1-line-height: 43px;
    --m-h1-margin: 20px;
    --m-h1-font-weight: bold;
    --m-h1-font-case: default;
    --m-h1-font-style: normal;
    --t-h1-size: 48px;
    --t-h1-line-height: 52px;
    --t-h1-margin: 24px;
    --t-h1-font-weight: bold;
    --t-h1-font-case: default;
    --t-h1-font-style: normal;
    --d-h1-size: 48px;
    --d-h1-line-height: 52px;
    --d-h1-margin: 24px;
    --d-h1-font-weight: bold;
    --d-h1-font-case: default;
    --d-h1-font-style: normal;

    --m-h2-size: 28px;
    --m-h2-line-height: 31px;
    --m-h2-margin: 18px;
    --m-h2-font-weight: bold;
    --m-h2-font-case: default;
    --m-h2-font-style: normal;
    --t-h2-size: 32px;
    --t-h2-line-height: 36px;
    --t-h2-margin: 20px;
    --t-h2-font-weight: bold;
    --t-h2-font-case: default;
    --t-h2-font-style: normal;
    --d-h2-size: 32px;
    --d-h2-line-height: 36px;
    --d-h2-margin: 20px;
    --d-h2-font-weight: bold;
    --d-h2-font-case: default;
    --d-h2-font-style: normal;

    --m-h3-size: 24px;
    --m-h3-line-height: 28px;
    --m-h3-margin: 16px;
    --m-h3-font-weight: bold;
    --m-h3-font-case: default;
    --m-h3-font-style: normal;
    --t-h3-size: 24px;
    --t-h3-line-height: 28px;
    --t-h3-margin: 18px;
    --t-h3-font-weight: bold;
    --t-h3-font-case: default;
    --t-h3-font-style: normal;
    --d-h3-size: 24px;
    --d-h3-line-height: 28px;
    --d-h3-margin: 18px;
    --d-h3-font-weight: bold;
    --d-h3-font-case: default;
    --d-h3-font-style: normal;

    --m-h4-size: 20px;
    --m-h4-line-height: 24px;
    --m-h4-margin: 16px;
    --m-h4-font-weight: bold;
    --m-h4-font-case: default;
    --m-h4-font-style: normal;
    --t-h4-size: 20px;
    --t-h4-line-height: 24px;
    --t-h4-margin: 16px;
    --t-h4-font-weight: bold;
    --t-h4-font-case: default;
    --t-h4-font-style: normal;
    --d-h4-size: 20px;
    --d-h4-line-height: 24px;
    --d-h4-margin: 16px;
    --d-h4-font-weight: bold;
    --d-h4-font-case: default;
    --d-h4-font-style: normal;

    --m-h5-size: 18px;
    --m-h5-line-height: 22px;
    --m-h5-margin: 14px;
    --m-h5-font-weight: bold;
    --m-h5-font-case: default;
    --m-h5-font-style: normal;
    --t-h5-size: 18px;
    --t-h5-line-height: 22px;
    --t-h5-margin: 14px;
    --t-h5-font-weight: bold;
    --t-h5-font-case: default;
    --t-h5-font-style: normal;
    --d-h5-size: 18px;
    --d-h5-line-height: 22px;
    --d-h5-margin: 14px;
    --d-h5-font-weight: bold;
    --d-h5-font-case: default;
    --d-h5-font-style: normal;

    --m-h6-size: 16px;
    --m-h6-line-height: 20px;
    --m-h6-margin: 12px;
    --m-h6-font-weight: bold;
    --m-h6-font-case: default;
    --m-h6-font-style: normal;
    --t-h6-size: 16px;
    --t-h6-line-height: 20px;
    --t-h6-margin: 12px;
    --t-h6-font-weight: bold;
    --t-h6-font-case: default;
    --t-h6-font-style: normal;
    --d-h6-size: 16px;
    --d-h6-line-height: 20px;
    --d-h6-margin: 12px;
    --d-h6-font-weight: bold;
    --d-h6-font-case: default;
    --d-h6-font-style: normal;

    /* Containers & Blocks */
    
    --m-gutter-padding: 16px;
    --m-x-block-padding: 24px;
    --m-y-block-padding: 16px;
    --m-block-spacing: 60px;
    
    --t-gutter-padding: 24px;
    --t-x-block-padding: 24px;
    --t-y-block-padding: 16px;
    --t-block-spacing: 60px;
    
    --d-gutter-padding: 48px;
    --d-x-block-padding: 24px;
    --d-y-block-padding: 16px;
    --d-block-spacing: 60px;

    --m-general-content-width: 100%;
    --t-general-content-width: 100%;
    --d-general-content-width: 100%;
    /* Footer */

    --footer-bg-color: var( --off-white );
    --footer-font-color: var( --default-link-color );
    --footer-menu-background-color: var( --default-bg-color );
    --footer-menu-font-color: var( --default-link-color );
        --m-footer-padding: 16px;
    --t-footer-padding: 24px;
    --d-footer-padding: 48px;

}