/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: Mar 01 2026 | 12:35:15 */
/* ================================================================
LIVING PALETTE BACKGROUND WITH GLASSMORPHISM & STICKY FOOTER
================================================================ */

/* 1. CSS VARIABLES (DARK MODE - DEFAULT) */
:root {
  /* Living Background Palette - Dark / Cyberpunk */
  --c1: #0B132B; /* Dark Blue */
  --c2: #1C2541; /* Deep Navy */
  --c3: #3A506B; /* Muted Slate */
  --c4: #0f766e; /* Dark Teal */
  --c5: #4c1d95; /* Deep Purple */
  --c6: #9f1239; /* Crimson */

  /* Glass Panel Properties */
  --glass-bg: rgba(15, 20, 30, 0.6);        /* Smoked dark glass */
  --glass-border: rgba(255, 255, 255, 0.08); /* Subtle bright edge */
  --glass-shadow: rgba(0, 0, 0, 0.5);
  --glass-text: #ffffff;
}

/* 2. CSS VARIABLES (LIGHT MODE) */
:root[data-theme="light"] {
  /* Living Background Palette - Light / Vibrant (Based on your original) */
  --c1: #5BC0BE; /* Teal */
  --c2: #84dcc6; /* Light Mint */
  --c3: #F4F4F4; /* Off White */
  --c4: #FF6B6B; /* Coral Red */
  --c5: #ffb4a2; /* Soft Peach */
  --c6: #a2d2ff; /* Baby Blue */

  /* Glass Panel Properties */
  --glass-bg: rgba(255, 255, 255, 0.6);      /* Frosted white glass */
  --glass-border: rgba(0, 0, 0, 0.1);        /* Subtle dark edge */
  --glass-shadow: rgba(0, 0, 0, 0.15);
  --glass-text: #111111;
}

/* 3. STICKY FOOTER LOGIC */
html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Ensures body is at least screen height */
  color: var(--glass-text);
  transition: color 0.4s ease; /* Smooth text transition */
}

/* Everything except the footer should grow to fill space */
#page, .site-content { 
  flex: 1 0 auto; 
}

/* 4. BACKGROUND ANIMATION */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* CSS Variables inserted here to allow theme swapping */
  background: conic-gradient(
    from 0deg,
    var(--c1),
    var(--c2),
    var(--c3),
    var(--c4),
    var(--c5),
    var(--c6),
    var(--c1)
  );
  animation: spin 25s linear infinite;
  filter: blur(80px) saturate(130%);
  z-index: -9999; 
  pointer-events: none; 
  transition: background 0.8s ease; /* Smoothes out the color jump */
}

/* 5. THE FOGGED GLASS EFFECT (Glassmorphism) */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(15px);           
  -webkit-backdrop-filter: blur(15px);    
  border: 1px solid var(--glass-border);
  border-radius: 15px;
  padding: 2rem;
  margin: 2rem auto;
  max-width: 1000px;
  box-shadow: 0 8px 32px 0 var(--glass-shadow);
  color: var(--glass-text);
  
  /* Smoothly transition the glass properties when toggling themes */
  transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, color 0.4s ease;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Mobile Fine-Tuning */
@media (max-width: 600px) {
  body::before { filter: blur(60px) saturate(120%); }
  .glass-panel { margin: 1rem; padding: 1.5rem; }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}