:root
{
    /*********************
    **********************
    *** BASE VARIABLES ***
    **********************
    *********************/

    /* Defaults */

    --color_white: #FFFFFF;
    --color_black: #000000;

    --font_size_xxs: 10px;
    --font_size_xs: 12px;
    --font_size_s: 14px;
    --default_font-size: 16px;
    --font_size_l: 18px;
    --font_size_xl: 20px;
    --font_size_xxl: 24px;
    --font_size_xxxl: 28px;

    --content_size: 100%;

    --breakpoint_mobile_desktop: 1300px;

    /* Colors */

    --accent_color_primary: #F7941D;
    --accent_color_secondary: #2E3F5F;
    --accent_color_secondary_darkened: #54617c;
    --accent_color_secondary_faint: #9ba9c4;

    --color_very_dark_gray: #222222;
    --color_gray: #999999;
    --color_faint_gray: #DDDDDD;
    --color_very_faint_gray: #F5F5F5;
    --color_very_very_faint_gray: #FAFAFA;

    /* Sizes */

    --page_content_width: calc(var(--breakpoint_mobile_desktop) - 100px);
    
    --spacing_xxs: 0.125rem;
    --spacing_xs: 0.25rem;
    --spacing_s: 0.5rem;
    --spacing_standard: 1rem;
    --spacing_l: 1.25rem;
    --spacing_xl: 1.5rem;
    --spacing_xxl: 2rem;
    --spacing_xxxl: 4rem;

    /************************
    *************************
    *** ELEMENT VARIABLES ***
    *************************
    ************************/

    /* Section */

    --section_padding: var(--spacing_xxl);
    --section_width: calc(100% - var(--section_padding) * 2);

    /* Contactbar */

    --contactbar_height: 2rem;
    --contactbar_width: 100%;
    --contactbar_background_color: var(--color_white);
    --contactbar_border_size: 1px;
    --contactbar_border_color: var(--color_faint_gray);
    --contactbar_text_padding: 0.5rem;
    --contactbar_text_color: var(--accent_color_secondary);

    /* Navbar */

    --navbar_top_margin: var(--contactbar_height);
    --navbar_background_color: var(--color_white);
    --navbar_text_color: var(--accent_color_secondary);
    --navbar_width: 100%;
    --navbar_height: 5rem;
    --navbar_border_size: 2px;
    --navbar_border_color: var(--accent_color_secondary);
    --navbar_height_without_border: calc(var(--navbar_height) - var(--navbar_border_size));
    --navbar_logo_padding: 0.5rem;
    --navbar_logo_height: calc(var(--navbar_height_without_border) - 2 * var(--navbar_logo_padding));

    --navbar_linklist_top_margin: calc(var(--contactbar_height) + var(--navbar_height));
    --navbar_linklist_height: calc(100vh - var(--navbar_linklist_top_margin));
    --navbar_linklist_border_size: 1px;
    --navbar_linklist_border_color: var(--accent_color_secondary);
    --navbar_linklist_sublist_border_size: 1px;
    --navbar_linklist_sublist_border_color: var(--accent_color_primary);

    /* Grid */



    /* Content */

    --content_top_margin: calc(var(--contactbar_height) + var(--navbar_height));
    --content_text_color: var(--accent_color_secondary_darkened);

    /*******************************
    ********************************
    *** ELEMENT PRESET VARIABLES ***
    ********************************
    *******************************/

    --grid_preset_table_head_font_color: var(--color_white);
    --grid_preset_table_head_row_color: var(--accent_color_secondary);
    --grid_preset_table_odd_row_color: var(--color_very_faint_gray);
    --grid_preset_table_even_row_color: var(--color_very_very_faint_gray);
}

@media (min-width: 1300px)
{
    :root
    {
        /*********************
        **********************
        *** BASE VARIABLES ***
        **********************
        *********************/

        /* Defaults */

        --font_size_xxs: 10px;
        --font_size_xs: 12px;
        --font_size_s: 14px;
        --default_font-size: 18px;
        --font_size_l: 18px;
        --font_size_xl: 20px;
        --font_size_xxl: 24px;
        --font_size_xxxl: 28px;

        /* Sizes */

        --content_size: var(--page_content_width);

        /************************
        *************************
        *** ELEMENT VARIABLES ***
        *************************
        ************************/

        /* Section */

        --section_width: var(--page_content_width);
        --section_padding: calc((100% - var(--page_content_width)) / 2);

        /* Contactbar */
        --contactbar_width: var(--page_content_width);
        --contactbar_height: 3rem;

        /* Navbar */
        --navbar_height: 10rem;
        --navbar_width: var(--page_content_width);
        --navbar_logo_padding: 1rem;
    }
}