/* Start custom CSS */<!-- Digital Christmas Card -->
<div id="christmas-card" style="position: relative; width: 100%; max-width: 600px; margin: auto; overflow: hidden; border: 5px solid #fff; border-radius: 10px; background-color: #f8f9fa;">
  <div style="text-align: center; padding: 20px;">
    <img src="https://yourdomain.com/path/to/snowflake-animation.gif" alt="Snowfall Animation" style="width: 100%; position: absolute; top: 0; left: 0; z-index: 1; opacity: 0.8;">
    <h1 style="z-index: 2; position: relative; color: #d32d41; font-size: 2.5rem; font-family: 'Merriweather', serif;">Happy Holidays!</h1>
    <p style="z-index: 2; position: relative; color: #444; font-size: 1.2rem;">Wishing you peace, joy, and happiness this holiday season.</p>
    <button id="open-card" style="z-index: 2; position: relative; background-color: #d32d41; color: #fff; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;">Open Card</button>
  </div>
</div>

<!-- JavaScript for Interactivity -->
<script>
  document.getElementById('open-card').addEventListener('click', function() {
    const card = document.getElementById('christmas-card');
    card.innerHTML = `
      <div style="text-align: center; padding: 20px;">
        <h1 style="color: #d32d41; font-size: 2.5rem; font-family: 'Merriweather', serif;">Season's Greetings!</h1>
        <p style="color: #444; font-size: 1.2rem;">Thank you for a wonderful year. We look forward to serving you in 2024!</p>
        <img src="https://yourdomain.com/path/to/christmas-image.jpg" alt="Christmas Scene" style="width: 100%; border-radius: 10px;">
      </div>
    `;
  });
</script>/* End custom CSS */