@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
  --bg-start: #f0f4f8;
  --bg-end: #e6eef5;
  --card-bg: rgba(255, 255, 255, 0.8);
  --card-border: rgba(0, 0, 0, 0.05);
  --text-primary: #0f172a;
  --text-muted: #4a5568;
  --accent-light: #0078ff;
  --teal-accent: #00C9A7;
  --shadow-medium: 0 10px 30px rgba(0,0,0,0.08);
  --border-radius-md: 14px;
  --max-width: 800px;
  font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

[data-theme="dark"] {
  --bg-start: #0b1220;
  --bg-end: #0a0f1a;
  --card-bg: rgba(25,33,50,0.7);
  --card-border: rgba(255,255,255,0.08);
  --text-primary: #e6edf3;
  --text-muted: #9aa4b2;
  --accent-light: #60a5fa;
  --teal-accent: #14b8a6;
}

.blog-post {
  background: var(--card-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--card-border);
  border-radius: var(--border-radius-md);
  padding: 40px;
  margin: 40px auto; /* Center the blog post */
  max-width: 800px; /* Set max-width for readability */
  box-shadow: var(--shadow-medium);
}

.blog-post h1 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: var(--teal-accent);
}

.blog-post .meta {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 30px;
}

.blog-post p {
  margin-bottom: 20px;
}

.blog-post h2 {
  font-size: 1.8rem;
  margin-top: 40px;
  margin-bottom: 20px;
  color: var(--text-primary);
}

.back-link {
  display: inline-block;
  margin-bottom: 20px;
  color: var(--accent-light);
  text-decoration: none;
  font-weight: 600;
}

/* Responsive Adjustments for Blog Post Page */
@media (max-width: 992px) {
    .blog-post {
        padding: 30px;
        margin: 30px auto;
    }
    .blog-post h1 {
        font-size: 2rem;
    }
    .blog-post h2 {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .blog-post {
        padding: 25px;
        margin: 25px auto;
    }
    .blog-post h1 {
        font-size: 1.8rem;
    }
    .blog-post h2 {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .blog-post {
        padding: 20px;
        margin: 20px auto;
    }
    .blog-post h1 {
        font-size: 1.5rem;
    }
    .blog-post h2 {
        font-size: 1.2rem;
    }
}