body {
  background:#0a0a0f;
  color:#e5e5e5;
  font-family:'Poppins',sans-serif;
  padding:40px;
}

nav a {
  color:#00ffff;
  text-decoration:none;
  display:inline-block;
  margin-bottom:30px;
}

h1 {
  color:#00ffff;
  text-align:center;
}

/* Blog List - Always vertical */
#blog-list {
  display:flex;
  flex-direction:column; /* stack vertically on all screens */
  gap:20px; /* space between blogs */
  margin-top:40px;
}

.blog-card {
  background: rgba(255,255,255,0.05);
  padding:20px;
  border-radius:12px;
  transition:0.3s;
}

.blog-card:hover { 
  transform: scale(1.03); 
}

.blog-card a {
  text-decoration:none;
  color:#00ffff;
  font-weight:bold;
}

/* Blog content */
.blog-content h1,h2,h3 {
  color:#00ffff;
  border-left:3px solid #00ffff;
  padding-left:10px;
  margin-top:1.5rem;
}

.blog-content p {
  color:#c7c7c7;
  line-height:1.7;
  margin:10px 0;
}

.blog-content ul {
  list-style:disc;
  margin-left:2rem;
}

.blog-content li {
  margin:0.4rem 0;
}

.blog-content img {
  max-width:100%;
  border-radius:8px;
  margin:1rem 0;
}

.blog-content pre {
  background:#111122;
  color:#00ffcc;
  padding:1rem;
  border-radius:8px;
  overflow-x:auto;
}

.blog-content code { 
  color:#00ffd9; 
}