/* ------------------------------------------------------------------
   christmas.css – a quick, festive overlay for your Secret‑Santa app
   ------------------------------------------ */

/* 1️⃣ Theme variables – change these once to re‑colour everything */
:root {
  /* Primary palette */
  --primary-bg:     #1a1a1a;          /* dark page background */
  --primary-fg:     #f0f0f0;          /* default text colour */
  --accent-red:      #c0392b;          /* Santa’s coat */
  --accent-green:    #27ae60;          /* Evergreen */
  --accent-gold:     #f1c40f;          /* Gift‑wrap sparkle */
  --border-radius:   6px;              /* Slightly rounded corners */
}

/* 2️⃣ Global resets – keep the page readable */
html, body {
  margin: 0;
  padding: 0;
  background: var(--primary-bg);
  color: var(--primary-fg);
  font-family: 'Montserrat', Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

/* 3️⃣ Header / title bar */
header {
  background: var(--accent-red);
  color: #fff;
  padding: 1rem 2rem;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* 4️⃣ Main container – a nice card‑like box */
.main {
  max-width: 860px;
  margin: 2rem auto;
  background: #222;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0,0,0,.6);
  overflow: hidden;
}

/* 5️⃣ Form elements – buttons, inputs, selects */
button,
input[type="submit"],
input[type="button"] {
  background: var(--accent-green);
  color: #fff;
  border: none;
  border-radius: var(--border-radius);
  padding: 0.6rem 1.2rem;
  cursor: pointer;
  font-weight: 600;
  transition: background .2s ease;
}
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background: #2ecc71;               /* lighter green on hover */
}

/* Input fields */
input[type="text"],
input[type="email"],
textarea,
select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #444;
  border-radius: var(--border-radius);
  background: #2c2c2c;
  color: var(--primary-fg);
}

/* 6️⃣ Links – make them festive */
a {
  color: var(--accent-gold);
  text-decoration: underline dotted;
}
a:hover {
  color: #ffd700;
}

/* 7️⃣ Footer – tiny seasonal note */
footer {
  text-align: center;
  font-size: 0.85rem;
  color: #bbb;
  margin-top: 2rem;
  padding: 1rem;
}

/* 8️⃣ Optional snowflake animation (pure CSS) */
@keyframes snowFall {
  0%   { transform: translateY(-10px); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}
.snowflake {
  position: fixed;
  top: -2rem;
  left: 0;
  font-size: 1.2rem;
  color: #fff;
  pointer-events: none;
  animation: snowFall linear infinite;
}

/* Generate a few random snowflakes – you can add more by copying the line */
.snowflake:nth-child(1) { left: 12%; animation-duration: 8s; animation-delay: 0s; }
.snowflake:nth-child(2) { left: 23%; animation-duration: 12s; animation-delay: 2s; }
.snowflake:nth-child(3) { left: 35%; animation-duration: 9s; animation-delay: 4s; }
.snowflake:nth-child(4) { left: 48%; animation-duration: 11s; animation-delay: 1s; }
.snowflake:nth-child(5) { left: 61%; animation-duration: 7s; animation-delay: 3s; }
.snowflake:nth-child(6) { left: 74%; animation-duration: 10s; animation-delay: 5s; }
.snowflake:nth-child(7) { left: 87%; animation-duration: 13s; animation-delay: 6s; }

/* 9️⃣ Helper – hide the default style.css rules that clash */
body > * { box-sizing: border-box; }