navbar
{
    grid-column: 2/3;
}
.navbar
{

	    /* NAVBAR */
		--mrg_nav_bottom: var(--std_margin);
		--mrg_nav_left: var(--std_margin);
		--pd_titlebar_top: var(--std_margin);
		/* PARENT */
			--col_nav_parent_hover: var(--colr_text_sec);
			--col_nav_parent_normal: var(--colr_text_tri);
			--back_nav_parent_active: var(--colr_back_prim);

			--back_nav_parent_hover: var(--colr_back_sec);
			--back_nav_parent_normal: var(--colr_back_tri);
			--back_nav_parent_active: var(--colr_back_prim);

			--ff_navbar_parent: var(--ff_h2);
			--fs_navbar_parent: var(--fs_h2);
			--mrg_nav_parent_left: 0;
			--mrg_nav_parent_right: var(--std_margin);
			--mrg_nav_parent_bottom: var(--std_margin);
			--pd_navbar_parent: var(--std_margin);
		/* CHILD */
			--col_nav_child_normal: var(--colr_back_tri);
			--col_nav_child_hover: var(--colr_text_sec);
			--back_nav_child_normal: var(--colr_back_tri);
			--back_nav_child_hover: var(--colr_back_sec);
			--ff_navbar_child: var(--ff_p);
			--fs_navbar_child: 1.5rem;
			--pd_navbar_child: 0.5rem;

    position: relative;
    display: inline-block;
    width: 100%;


    /*Space between navbar and content*/
    margin-bottom: var(--mrg_nav_bottom);
    
    /*Space between navbar and border of the page */
    margin-left: var(--mrg_nav_left);
    margin-right: var(--mrg_nav_right);


    top: calc(100% - var(--mrg_nav_bottom) - var(--pd_navbar_parent) - var(--height_navbar_parent));
}

.navbar_parent_element
{
    display: block;
    float: left;
    width: auto;
    height: var(--height_navbar_parent);

    text-align: center;
    text-decoration: none;

    /*Space between parent navbar element and next element*/
    margin-right: var(--mrg_nav_parent_right);
    margin-left: var(--mrg_nav_parent_left);

    /*Space between parent navbar elemment and children container*/
    margin-bottom: var(--mrg_nav_parent_bottom);

	position: relative;
	z-index: 2;
}



.navbar_parent_element_text
{
    background: var(--back_nav_parent_normal);
    color: var(--col_nav_parent_normal);


    text-align: center;
    font-family: var(--ff_navbar_parent);
    font-size: var(--fs_navbar_parent);

    padding: var(--pd_navbar_parent);

    /* Edit the rounding of the element's corners*/
    border-radius: 1rem 1rem 0rem 0rem;
    height: var(--height_navbar_parent);
}

.navbar_parent_element_text[type="active"]
{
	background: var(--back_nav_parent_active);
    color: var(--col_nav_parent_active);
}


/* Single parent element configuration*/

.navbar_parent_element:hover > .navbar_parent_element_text
{
    background: var(--back_nav_parent_hover);
    color: var(--col_nav_parent_hover);
}

.navbar_parent_element:hover > .navbar_parent_element_text a
{
    color: var(--col_nav_parent_hover);
}

.navbar_parent_element a
{
    /* Configuration for single parent element*/
    color: var(--col_nav_parent_normal);
    text-decoration: none;
}

.navbar_parent_element[type="active"] a
{
    /* Configuration for single parent element*/
    color: var(--col_nav_parent_active);
    text-decoration: none;
}


/*Dropdown parent element configuration*/

.navbar_child_element
{
    display: block;
    background: var(--back_nav_child_normal);
    padding: var(--pd_navbar_child);

    /*Configure the roundness of the border*/
    /*border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;*/
}



.navbar_child_element a 
{
    color: var(--col_nav_child_normal);
    font-family: var(--ff_navbar_child);
    font-size: var(--fs_navbar_child);
    text-decoration: none;
}

.navbar_child_element:hover > .navbar_child_element_text a
{
    color: var(--col_nav_child_hover);
}

.navbar_child_element:hover
{
    background: var(--back_nav_child_hover);
    /*color: var(--col_nav_child_hover);*/
}


.navbar_child_container[display="hidden"]
{
    display: block;
    height: 0;
    opacity: 0;
}

.navbar_child_container[display="visible"]
{
    display: block;
    width: 100%;
    height: auto;
    opacity: 1;
	border-radius: 1rem;
 	overflow: hidden;
}