:root {
  --color-white-x: #fff;
  --color-orange: #faa500;
  --color-brown: #915537;
  --color-lime: #50cd46;
  --color-red: #e63214;
  --color-pink: #f087b4;
  --color-green: #00785a;
  --color-purple: #732382;
  --color-yellow: #ffdc00;
  --color-blue: #4682ff;
  --color-silver: #C0C0C0;
  --color-gray: #808080;
  --bkgrd-orange: var(--color-orange);
  --bkgrd-brown: var(--color-brown);
  --bkgrd-lime: var(--color-lime);
  --bkgrd-red: var(--color-red);
  --bkgrd-pink: var(--color-pink);
  --bkgrd-green: var(--color-green);
  --bkgrd-purple: var(--color-purple);
  --bkgrd-yellow: var(--color-yellow);
  --bkgrd-blue: var(--color-blue);
  --bkgrd-silver: var(--color-silver);
  --bkgrd-gray: var(--color-gray);
}

.orange-item.current-menu-item a { color: var(--color-orange); }
.brown-item.current-menu-item a { color: var(--color-brown); }
.lime-item.current-menu-item a { color: var(--color-lime); }
.red-item.current-menu-item a { color: var(--color-red); }
.pink-item.current-menu-item a { color: var(--color-pink); }
.green-item.current-menu-item a { color: var(--color-green); }
.purple-item.current-menu-item a { color: var(--color-purple); }
.yellow-item.current-menu-item a { color: var(--color-yellow); }
.blue-item.current-menu-item a { color: var(--color-blue); }

.bkgrd-orange { background: var(--bkgrd-orange); }
.bkgrd-brown { background: var(--bkgrd-brown); }
.bkgrd-lime { background: var(--bkgrd-lime); }
.bkgrd-red { background: var(--bkgrd-red); }
.bkgrd-pink { background: var(--bkgrd-pink); }
.bkgrd-green { background: var(--bkgrd-green); }
.bkgrd-purple { background: var(--bkgrd-purple); }
.bkgrd-yellow { background: var(--bkgrd-yellow); }
.bkgrd-blue { background: var(--bkgrd-blue); }
.bkgrd-silver { background: var(--bkgrd-silver); }
.bkgrd-gray { background: var(--bkgrd-gray); }
.bkgrd-white { background: var(--bkgrd); }
.bkgrd-black { background: var(--color); }
.bkgrd-grey { background: var(--bkgrd-hover); }
.color-orange { color: var(--color-orange); }
.color-brown { color: var(--color-brown); }
.color-lime { color: var(--color-lime); }
.color-red { color: var(--color-red); }
.color-pink { color: var(--color-pink); }
.color-green { color: var(--color-green); }
.color-purple { color: var(--color-purple); }
.color-yellow { color: var(--color-yellow); }
.color-blue { color: var(--color-blue); }
.color-silver { color: var(--color-silver); }
.color-gray { color: var(--color-gray); }
.color-white p, 
.color-white > ul li,
.color-white > ol li, 
.color-white h1,
.color-white > h2 { color: var(--bkgrd); }
.color-black p, 
.color-black > ul li,
.color-black > ol li, 
.color-black h1,
.color-black > h2 { color: var(--color); }
.color-white-x p,
.color-white-x p a { color: var(--color-white-x); }
.color-white-x p a { border-bottom-color: var(--color-white-x); }

.link-bkgrd-orange:hover { background: var(--bkgrd-orange); }
.link-bkgrd-brown:hover { background: var(--bkgrd-brown); }
.link-bkgrd-lime:hover { background: var(--bkgrd-lime); }
.link-bkgrd-red:hover { background: var(--bkgrd-red); }
.link-bkgrd-pink:hover { background: var(--bkgrd-pink); }
.link-bkgrd-green:hover { background: var(--bkgrd-green); }
.link-bkgrd-purple:hover { background: var(--bkgrd-purple); }
.link-bkgrd-yellow:hover { background: var(--bkgrd-yellow); }
.link-bkgrd-blue:hover { background: var(--bkgrd-blue); }
.link-bkgrd-silver:hover { background: var(--bkgrd-silver); }
.link-bkgrd-gray:hover { background: var(--bkgrd-gray); }
.link-bkgrd-white:hover { background: var(--bkgrd); }
.link-bkgrd-black:hover { background: var(--color); }
.link-color-orange:hover { color: var(--color-orange); }
.link-color-brown:hover { color: var(--color-brown); }
.link-color-lime:hover { color: var(--color-lime); }
.link-color-red:hover { color: var(--color-red); }
.link-color-pink:hover { color: var(--color-pink); }
.link-color-green:hover { color: var(--color-green); }
.link-color-purple:hover { color: var(--color-purple); }
.link-color-yellow:hover { color: var(--color-yellow); }
.link-color-blue:hover { color: var(--color-blue); }
.link-color-silver:hover { color: var(--color-silver); }
.link-color-gray:hover { color: var(--color-gray); }
.link-color-white:hover { color: var(--bkgrd); }

.button-orange a:hover { background: var(--color-orange); border-color: var(--color-orange);  }
.button-brown a:hover { background: var(--color-brown); border-color: var(--color-brown); }
.button-lime a:hover { background: var(--color-lime); border-color: var(--color-lime); }
.button-red a:hover { background: var(--color-red); border-color: var(--color-red); }
.button-pink a:hover { background: var(--color-pink); border-color: var(--color-pink); }
.button-green a:hover { background: var(--color-green); border-color: var(--color-green); }
.button-purple a:hover { background: var(--color-purple); border-color: var(--color-purple); color: var(--bkgrd);}
.button-yellow a:hover { background: var(--color-yellow); border-color: var(--color-yellow); }
.button-blue a:hover { background: var(--color-blue); border-color: var(--color-blue); }
.button-silver a:hover { background: var(--color-silver); border-color: var(--color-silver); }
.button-gray a:hover { background: var(--color-gray); border-color: var(--color-gray); }
.button-black a:hover { background: var(--color); color: var(--bkgrd); }

.button-purple a {
  transition: color .25s;
}
.button-purple a[target=_blank]:hover:after {
  filter: invert(1);
}

.fill-yellow svg path { fill: var(--color-yellow); }
.fill-orange svg path { fill: var(--color-orange); }
.fill-red svg path { fill: var(--color-red); }
.fill-pink svg path { fill: var(--color-pink); }
.fill-blue svg path { fill: var(--color-blue); }
.fill-purple svg path { fill: var(--color-purple); }
.fill-lime svg path { fill: var(--color-lime); }
.fill-green svg path { fill: var(--color-green); }
.fill-brown svg path { fill: var(--color-brown); }
.fill-black svg path { fill: var(--color); }
.fill-white svg path { fill: var(--bkgrd); }