/* Halloween theme. Loaded after /style.css when _data/site.json sets "theme": "halloween". */

:root {
  --color-primary: #912720;
  --color-on-primary: #e8dcc4;
  --color-background: #0e0b12;
  --color-on-background: #e8dcc4;
  --color-product-section-background: rgba(155, 110, 200, 0.08);
  --color-header-background: var(--color-background);
  --color-nav-background: #3d2357;
  --color-nav-text: #e8dcc4;
  --color-border: rgba(232, 220, 196, 0.25);
  --color-row-stripe: rgba(155, 110, 200, 0.1);
  --color-table-header-background: var(--color-nav-background);
  --color-table-header-text: var(--color-nav-text);
  --color-error: #ff5a4a;
  --color-link: #8fd14f;
  --color-link-hover: #e6d86e;
  --color-leaderboard-border: rgba(232, 220, 196, 0.25);
  --color-leaderboard-header-background: #3d2357;
}

body {
  color: var(--color-on-background);
}

header {
  background-image: url('header.jpg');
  background-position: center 10%;
}

/* White to blood red, repeated per line (1lh) so wrapped headings get the full gradient on every line. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  h1, h2, h3, h4, h5, h6 {
    background-image: linear-gradient(to bottom, #ffffff 25%, var(--color-primary) 70%);
    background-size: 100% 1lh;
    background-repeat: repeat-y;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* Color emoji would otherwise be filled with the gradient too. */
  .emoji {
    -webkit-text-fill-color: initial;
  }
}

@media (forced-colors: active) {
  h1, h2, h3, h4, h5, h6 {
    -webkit-text-fill-color: currentColor;
  }
}

main a {
  color: var(--color-link);
}

main a:hover {
  color: var(--color-link-hover);
}

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