body{
  --primary: #000;
  --background: #efeeea;
  --highlight: #c80000;
  --active: #f4ef90;
  --shade: rgba(40, 40, 40, 0.8);
  --pct0: #fff;
  --pct10: #ddd;
  --pct20: #ccc;
  --pct30: #bbb;
  --pct40: #aaa;
  --pct50: #999;
  --pct60: #888;
  --pct70: #777;
  --pct80: #666;
  --pct90: #555;
  --pct100: #000;
  --secondary: #fff;
  --promoheight: 50px;
}

.promo{ font-family: 'Helvetica', 'Arial', sans-serif; width: 100vw; position: fixed; bottom: 0; background: var(--primary); color: var(--secondary); text-align: center; padding: 0.25em 0 .5em 0; z-index: 1000; }
.promo .about{ text-align:center; font-size: .9em; padding-top: .2em; line-height: 1.3em; width: 100%; }
.promo .ko-fi{ position: absolute; right: .5em; }
.promo .ko-fi img{ margin-right: 1.1em; height: 38px; margin-top: .3em; }
.promo .logo{ float: left; margin-left: .5em; }
.promo .logo img{ height: 42px; }
.promo .logo .twitch{ margin-left: 6px; height: 32px !important; display: none; }
.promo .copy{ text-align: center; margin-right: 1em; line-height: 1.3em; }
.promo a:hover{ background: none; }
.promo p a{ color: var(--secondary); }
.promo p a:hover{ background: var(--pct70); }