/* Thanksgiving and Christmas, 2026.
   Remove the holiday.css link from the pages when the season is over. */

:root {
  --bg: #0c1612;
  --bg-wash: #163028;
  --surface: #12241c;
  --surface-elevated: #1a3126;
  --text: #fff8ee;
  --text-muted: #e7d3b0;
  --accent: #9f1239;
  --accent-hover: #7f1d1d;
  --pop-cyan: #f6e2b8;
  --pop-magenta: #9f1239;
  --pop-gold: #e8b84a;
  --pop-lime: #4ade80;
  --pop-violet: #14532d;
  --display-gradient: linear-gradient(115deg, #f6e2b8 0%, #fde68a 32%, #fecaca 62%, #fff7ed 100%);
  --display-gradient-hover: linear-gradient(115deg, #fde68a 0%, #bbf7d0 40%, #fecaca 100%);
  --display-gradient-on-dark: linear-gradient(115deg, #fde68a 0%, #86efac 42%, #fecaca 100%);
  --border: #3f6b52;
  --text-pop-glow-cyan: 0 0 14px rgba(232, 184, 74, 0.35);
  --text-pop-glow-magenta: 0 0 14px rgba(159, 18, 57, 0.32);
  --shadow-hover: 0 20px 40px -18px rgba(159, 18, 57, 0.35),
    0 8px 20px -8px rgba(20, 83, 45, 0.28);
  --paisley-bg: url(/images/bg-snow-pattern.svg?v=feast2);
  --bg-parallax-image: url(/images/bg-rudolph.svg?v=feast4);
  --bg-parallax-opacity: 1;
}

body::after {
  background-image: url(/images/rudolph.png?v=cut1), var(--bg-parallax-image);
  background-repeat: no-repeat, no-repeat;
  background-size: auto 52vh, cover;
  background-position: right 8vw top 16vh, center;
  opacity: 1;
}

body::before {
  background-color: #0c1612;
  background-image:
    radial-gradient(circle 10rem at 16% 12%, rgba(255, 255, 255, 0.14), transparent 68%),
    var(--paisley-bg);
  background-repeat: no-repeat, repeat;
  background-size: auto, 480px 480px;
}

body > header,
.gr-page header {
  padding-top: 0;
  border-bottom-color: #3f6b52;
  background:
    radial-gradient(circle at 8px 46px, #fde68a 0 3px, transparent 4.5px),
    radial-gradient(circle at 28px 46px, #f87171 0 3px, transparent 4.5px),
    radial-gradient(circle at 48px 46px, #4ade80 0 3px, transparent 4.5px),
    radial-gradient(circle at 68px 46px, #fb923c 0 3px, transparent 4.5px),
    linear-gradient(180deg, rgba(20, 83, 45, 0.55), rgba(12, 22, 18, 0.2) 52px),
    linear-gradient(105deg, rgba(18, 36, 28, 0.96) 0%, rgba(12, 22, 18, 0.9) 48%, rgba(60, 16, 24, 0.92) 100%);
  background-size: 80px 56px, 80px 56px, 80px 56px, 80px 56px, auto, auto;
  background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, no-repeat, no-repeat;
}

body > header::before {
  content: "Happy Thanksgiving and Merry Christmas, from Ep2Art";
  display: block;
  margin: 0 -1.5rem 0.85rem;
  padding: 0.42rem 1rem 0.55rem;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff8ee;
  background: linear-gradient(90deg, #14532d 0%, #7f1d1d 48%, #14532d 100%);
}

.btn-primary,
.btn-secondary {
  background: linear-gradient(125deg, #e8b84a 0%, #9f1239 52%, #166534 100%);
  box-shadow: 0 4px 18px -4px rgba(159, 18, 57, 0.55), 0 2px 8px -2px rgba(20, 83, 45, 0.4);
}

.btn-primary:hover,
.btn-secondary:hover {
  background: linear-gradient(125deg, #f6e2b8 0%, #7f1d1d 46%, #14532d 100%);
  box-shadow: 0 8px 28px -6px rgba(159, 18, 57, 0.5), 0 4px 14px -4px rgba(20, 83, 45, 0.4);
}

.about-block {
  background: linear-gradient(145deg, var(--surface) 0%, rgba(232, 184, 74, 0.08) 55%, rgba(20, 83, 45, 0.16) 100%);
  box-shadow: var(--shadow), inset 4px 0 0 #9f1239, inset 8px 0 0 #e8b84a;
}

body > footer .wrap::after {
  content: "Thankful for this studio, and merry from Troy.";
  display: block;
  margin-top: 0.85rem;
  text-align: center;
  color: #e7d3b0;
  font-size: 0.85rem;
}

@media (max-width: 700px) {
  body::after {
    background-size: auto 32vh, cover;
    background-position: right 0 top 14vh, center;
  }
}

@media (max-width: 640px) {
  body > header::before {
    letter-spacing: 0.04em;
    font-size: 0.68rem;
    line-height: 1.35;
  }
}