/************************************************************************* 
 * declare global variables (that can be accessed with (var))
 *    example declaration:
 *      --main-bg-color: brown 
 *    example usage:
 *      element {background-color: var(--main-bg-color);}   
 * and make them global by putting them under :root {}      
 *************************************************************************/
 :root { 
    /* (s)aturation - 0% is a shade 100% is full color */
    /* (l)ightness - 0% is black, 100% is white */

    --body-bg-color: white;
    --body-text-color: hsl(0, 0%, 15%);

    --header-bg-color: #e9e9e9;
    
    --heading-text-color: hsl(0, 0%, 15%);

    --navbar-bg-color: hsl(0, 0%, 100%);       /* (h)ue - 0 to 360 degrees of color wheel */
    --navbar-bg-contrast: hsl(0, 0%, 25%);     /* (s)aturation - 0% is a shade 100% is full color */     
    --navbar-text-color: hsl(0, 0%, 35%);      /* (s)aturation - 0% is a shade 100% is full color */ 
    --navbar-text-color-focus: darkgray;       /* (l)ightness - 0% is black, 100% is white */ 
    --navbar-hover: lightgray;

    --page-navbar-hover: none;
       
    --sidebar-bg-color: #6d808f;
    --sidebar-bg-contrast: hsl(0, 0%, 25%);
    --sidebar-text-color: hsl(0, 0%, 15%);
    --sidebar-text-color-focus: darkgray;
    --sidebar-hoover: lightgray;

    --icon-bgimg-hamburger: url(img/hamburger.png);
}


.bg-light {
    background-color: #f8f9fa !important;
  }