body{
  margin:0;
  font-family: Arial, sans-serif;
  background:#f5f5f5;
}

/* HEADER */

header{
  background:white;
  padding:20px 40px;
  box-shadow:0 2px 4px rgba(0,0,0,0.1);
}

header h2{
  margin:0;
}

/* BLOG LIST */

.blog-section{
  padding:40px;
}

.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:25px;
}

.blog-card{
  background:white;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 4px 8px rgba(0,0,0,0.1);
  cursor:pointer;
  transition:0.2s;
}

.blog-card:hover{
  transform:translateY(-5px);
}

.blog-card img{
  width:100%;
  height:180px;
  object-fit:cover;
}

.blog-card-content{
  padding:15px;
}

.blog-card-content h3{
  margin:0 0 10px;
  font-size:18px;
}

.blog-card-content p{
  font-size:14px;
  color:#555;
}

/* BLOG READER */

#reader{
  display:none;
}

iframe{
  width:100%;
  height:90vh;
  border:none;
}

.back-btn{
  margin:20px;
  padding:10px 20px;
  background:#0b3d2e;
  color:white;
  border:none;
  cursor:pointer;
  border-radius:5px;
  font-size:14px;
}

.back-btn:hover{
  background:#095c44;
}

#reader{
  display:none;
  padding:40px;
  max-width:900px;
  margin:auto;
  background:white;
}

#blogTitle{
  margin-bottom:20px;
}

#blogContent img{
  max-width:100%;
}

.bookmark{
  position:absolute;
  top:12px;
  right:12px;
  font-size:22px;
  cursor:pointer;
  color:#ccc;
}

.bookmark.saved{
  color:#0b3d2e;
}