body {
    font-family: 'Inter', sans-serif;
    background-color: #0a192f;
    color: #ccd6f6;
}
.font-mono {
    font-family: 'Roboto Mono', monospace;
}
.glassmorphism {
    background: rgba(13, 30, 56, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(45, 212, 191, 0.2);
}
.text-glow {
    text-shadow: 0 0 8px rgba(45, 212, 191, 0.8);
}
.section-fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.section-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}
.neon-text {
    color: #64ffda;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 1rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #1e293b;
}
.timeline-dot {
    position: absolute;
    left: 1rem;
    top: 0.5rem;
    transform: translateX(-50%);
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: #64ffda;
    border: 2px solid #0a192f;
}
#constellation-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
#mobile-menu {
    transition: transform 0.3s ease-in-out;
}
.page-transition {
    transition: opacity 0.5s ease-in-out;
}
.prose {
    color: #ccd6f6;
}
.prose h4 {
    color: #e2e8f0;
}
.prose ol > li::marker {
    color: #64ffda;
}
.chat-bubble-ai {
    background-color: #1e293b;
    align-self: flex-start;
}
.chat-bubble-user {
    background-color: #4338ca;
    align-self: flex-end;
}
.spinner {
    border: 2px solid #384c70;
    border-top: 2px solid #64ffda;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.filter-btn {
    background-color: #1e293b;
    color: #94a3b8;
}
.filter-btn.active {
    background-color: #64ffda;
    color: #0a192f;
}
@keyframes tilt {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(0.5deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-0.5deg); }
}
.animate-tilt {
    animation: tilt 10s infinite linear;
}

/* ========= Add this entire block to your style.css ========= */

/* Styles for blog post content container */
.prose {
  color: #ccd6f6; /* Default paragraph color */
  line-height: 1.7;
}

/* General heading styles */
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  color: #e2e8f0; /* Brighter color for headings */
  font-weight: 600;
  margin-top: 2em;
  margin-bottom: 1em;
}

/* Specific heading sizes */
.prose h1 { font-size: 2.25rem; }
.prose h2 { font-size: 1.75rem; }
.prose h3 { font-size: 1.5rem; }
.prose h4 { font-size: 1.25rem; }

/* Paragraph styles */
.prose p {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

/* Link styles */
.prose a {
  color: #64ffda; /* Use your neon accent color */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.2s ease-in-out;
}

.prose a:hover {
  color: #fff;
}

/* List styles */
.prose ul,
.prose ol {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.75em;
}

.prose li {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

/* Custom list markers */
.prose ul > li::marker,
.prose ol > li::marker {
  color: #64ffda;
}

/* Bold text */
.prose strong {
  color: #e2e8f0;
  font-weight: 600;
}

/* Blockquotes */
.prose blockquote {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  padding-left: 1em;
  border-left: 3px solid #64ffda;
  color: #a8b2d1; /* Slightly muted color for quotes */
  font-style: italic;
}

/* Horizontal line separator */
.prose hr {
    border-color: #384c70;
    margin-top: 2.5em;
    margin-bottom: 2.5em;
}

/* ================== End of block ================== */