:root
{
  --globalSiteHue: 196;
  --navBackColor:hsla(var(--globalSiteHue), 50%, 50%,  100%);
  --navScrollSpyBackColor:hsla(var(--globalSiteHue), 50%, 20%,  100%);
  --navScrollSpyActiveLink:hsla(var(--globalSiteHue), 50%, 80%,  100%);
  --navHover:hsla(var(--globalSiteHue), 50%, 80%,  100%);
  --navDropdownBackColor:hsla(var(--globalSiteHue), 50%, 30%,  100%);
  --navDropdownClickedBackColor:hsla(var(--globalSiteHue), 50%, 60%,  100%);
}


#mainNavBar nav, #mainNavBar nav .navbar-collapse
{
  background-color: var(--navBackColor);
}

#mainNavBar nav .navbar-collapse.collapse.show, #mainNavBar nav .navbar-collapse.collapsing
{
  padding: 1em;
}


#mainNavBar nav .dropdown-menu
{
  background-color: var(--navDropdownBackColor);
}
#mainNavBar nav .dropdown-menu a
{
  color: white;
}
#mainNavBar nav .dropdown-menu a:hover
{
  color: var(--navDropdownBackColor);  
  background-color: white;
}

#mainNavBar nav .dropdown-menu a:active
{
  color: var(--navDropdownBackColor);  
  background-color: var(--navDropdownClickedBackColor);
}

#mainNavBar nav
{
  z-index: 1031;
}


nav a
{
  color: white;
}

nav a:hover
{
  color: var(--navHover);
}

#mainNavBar nav img
{
  width: 1em;
  padding-bottom: 0.5em;
  padding-right: 0.1em;
}

#mainNavBar nav .custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

#mainNavBar nav .custom-toggler.navbar-toggler {
  border-color: white;
} 


footer p
{
  padding-top: 1em;
  padding-bottom: 1em;
  text-align: center;
  font-size: .7em;
}