/* 1. Page Background & Retro Font */
body {
  background-color: #ffd6e8; /* Soft pink background */
  font-family: 'Courier New', Courier, monospace;
  color: #333;
  margin: 20px;
}

/* 2. Grid Layout */
.site-container {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 15px;
  align-items: flex-start; /* <--- Add this line! */
}

/* 3. Make the Header box span the full top width */
.site-container > .card:first-child {
  grid-column: 1 / -1;
}

/* 4. Box Styling (Cute Pink Retro Borders & Shadows) */
.card {
  background-color: #ffffff;
  border: 2px solid #ff99c8;
  border-radius: 8px;
  box-shadow: 4px 4px 0px #ffb3d9; /* Pop-out shadow */
  padding: 15px;
}

/* 5. Title Bar at the top of each Box */
.card-title-bar {
  background-color: #ff99c8;
  color: white;
  padding: 4px 8px;
  margin: -15px -15px 12px -15px; /* Aligns flush to the top edge */
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  font-size: 0.9em;
}

.card-title-bar .controls {
  font-family: monospace;
}

/* 6. Link Colors */
a {
  color: #d63384;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* 7. Fit images inside boxes */
img {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
}

/* Make full-width boxes stretch across all columns */
.card.full-width {
  grid-column: 1 / -1;
}

/* Scrollable Box Style */
.scroll-box {
  max-height: 200px;
  overflow-y: auto;
}

/* --- NEO-GLOW ANIMATION (Bigger Halo) --- */
@keyframes neonPulse {
  0% {
    box-shadow: 0 0 10px rgba(255, 153, 200, 0.5), 
                0 0 20px rgba(255, 153, 200, 0.3);
    border-color: #ff99c8;
  }
  50% {
    /* Larger pixel values make the halo glow further outward! */
    box-shadow: 0 0 25px rgba(255, 180, 220, 0.9), 
                0 0 45px rgba(255, 180, 220, 0.7), 
                0 0 65px rgba(255, 180, 220, 0.5);
    border-color: #ffb4dc;
  }
  100% {
    box-shadow: 0 0 10px rgba(255, 153, 200, 0.5), 
                0 0 20px rgba(255, 153, 200, 0.3);
    border-color: #ff99c8;
  }
}
/* This is the class we'll add to make the box glow */
/* Pastel Neon Glow Box */
.neon-glow {
  background-color: #fffcfd !important; /* Soft lavender/pink background */
  color: #d63384 !important; /* Dark pink text for easy reading */
  border: 2px solid #ff99c8;
  animation: neonPulse 2s infinite ease-in-out;
  padding: 20px;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 8px;
}

/* Ensure child text stays pretty dark pink */
.neon-glow summary,
.neon-glow strong,
.neon-glow em {
  color: #d63384 !important;
}
}