/* ===== Global Color Variables ===== */
:root {
  --primary: #f7fff8;                   /* Light green background */
  --primary-rgb: 247, 255, 248;           /* RGB version */

  --secondary: #b2d8b2;                 /* Soft sage green */
  --secondary-rgb: 178, 216, 178;         /* RGB version */

  --accent: #65c995;                    /* Medium matcha green for highlights */
  --accent-rgb: 101, 201, 149;            /* RGB version */

  --light: #e9ffeb;                     /* Near-white with a greenish tint */
  --light-rgb: 233, 255, 235;             /* RGB version */

  --dark: #00631E;                      /* Deep forest green for contrast */
  --dark-rgb: 0, 99, 30;                  /* RGB version */

  --text: #339966;                      /* Main green text */
  --text-rgb: 51, 153, 102;               /* RGB version */


  --box-shadow: 0 1px 3px rgb(0 99 30); /* Main box shadow */
  --border: #339966;                    /* Main border */

  --gap-small: 10px;                    /* Small gap for buttons */
  --gap-medium: 20px;                   /* Medium gap for buttons */
  --gap-large: 30px;                    /* Large gap for buttons */
}

/* ===== Base Reset (Remove Default Styling) ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ===== Core Page Layout (Flex Column) ===== */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Sniglet', cursive;
  line-height: 1.6;
  color: var(--text);
  background: var(--primary);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}


#page_content {
  flex: 1 0 auto; /* Allow it to grow and push footer down */
  padding: 1rem;
  padding-bottom: 1rem;
  overflow-y: auto;
}


/* ===== Typography (Headings & Paragraphs) ===== */
h1, h2, h3 {
  font-family: 'Sniglet', cursive;
  color: var(--text);
  margin-bottom: 0.8rem; /* Consistent spacing below headings */
}

h1 { font-size: 3rem; }   /* Largest heading */
h2 { font-size: 2.2rem; } /* Medium heading */
h3 { font-size: 1.6rem; } /* Small heading */

.p1, .p2, .p3 {
  font-family: 'Sniglet', cursive;
  color: var(--text);
}

.p1 { font-size: 1.125rem; line-height: 1.8; margin-bottom: 1rem; } /* Large paragraph */
.p2 { font-size: 1rem; line-height: 1.7; margin-bottom: 0.8rem; }   /* Standard paragraph */
.p3 { font-size: 0.9rem; line-height: 1.6; margin-bottom: 0.6rem; }  /* Small paragraph */

/* ===== Layout Sections (Navbar, Content, Footer) ===== */
#navbar, 
#content, 
#footer {
  display: block;
  width: 100%;
  box-sizing: border-box; /* Consistent sizing */
}

/* ===== Loading Overlay ===== */
#loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--primary);
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 1000;
  transition: opacity 0.3s;
}

/* Loader image */
.cat-loader {
  width: min(200px, 80vw);
  height: auto;
  animation: pulse 3s infinite linear; /* Slower 3-second rotation */
}

/* Typing text */
.typing-text {
  font-size: 1.2rem;
  color: var(--text);
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--text);
  width: 0;
  animation: typing 0.8s steps(10, end) forwards, blink 0.8s step-end infinite;
  margin-top: 12px;
}


/* Animations */
@keyframes pulse {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: scale(1.05) rotate(180deg);
    opacity: 0.9;
  }
  100% {
    transform: scale(1) rotate(360deg);
    opacity: 1;
  }
}

@keyframes typing {
  from { width: 0; }
  to { width: 9ch; }
}

@keyframes blink {
  50% { border-color: transparent; }
}


/* ===== Reusable Utility Classes ===== */
.container {
  width: 90%;
  max-width: 1200px; /* Responsive max-width */
  margin: 0 auto;    /* Center horizontally */
  padding: 0 1rem;   /* Side padding */
}

/* ===== No-JavaScript Warning Styling ===== */
.noscript-warning {
  padding: 1rem;
  text-align: center;
  background: var(--accent);
  color: var(--text);
  border-bottom: 2px solid var(--text); /* Accent line */
}

/* ===== Main Content Area Styling ===== */
#content {
  flex: 1; /* Expands to fill available space */
  transition: opacity 0.3s ease; /* Smooth content transitions */
}