/* Import Font */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&family=Quicksand:wght@300;400;500&display=swap');

/* Root Colors */
:root{
  --bg:#1a1819;
  --main-bg:#211E20;
  --title:#E6A8B5;
  --subtitle:#A79D9D;
  --text:#FFFFFF;
  --card:#2A2628;
  --accent:#e6a83333;
}

/* GLOBAL */
body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Quicksand', sans-serif;
}

/* HEADER */
.top-header{
  padding:30px 20px 10px 20px;
  max-width:1000px;
  margin:0 auto;
}

.top-header h1{
  font-family:'Playfair Display', serif;
  color:var(--title);
  font-size:22px;
  letter-spacing:1px;
  margin:0;
}

.top-header p{
  color:var(--subtitle);
  font-size:13px;
  margin-top:5px;
}

/* BLOG WRAPPER */
.blog-wrapper{
  display:flex;
  justify-content:center;
  padding:20px;
  max-width:1000px;
  margin:0 auto;
}

/* BLOG BOX */
.blog-box{
  width:100%;
  max-width:700px;

  background:var(--card);

  padding:25px;

  border-radius:14px;
  border:1px solid #ffffff10;

  box-shadow:0 0 20px #00000050;

  position:relative;
}

/* TAPE EFFECT */
.tape{
  width:60px;
  height:14px;

  background:#ffffff20;

  position:absolute;
  top:-7px;
  left:30px;

  transform:rotate(2deg);

  border-radius:4px;
}

/* BLOG TITLE */
.blog-title{
  font-family:'Playfair Display', serif;
  color:var(--title);

  font-size:24px;

  margin-top:0;
  margin-bottom:20px;

  border-bottom:1px solid #ffffff20;
  padding-bottom:8px;
}

/* BACK BUTTON */
.back-area{
  margin-bottom:20px;
}

.back-btn{
  display:inline-block;

  text-decoration:none;

  background:#ffffff10;
  color:var(--text);

  padding:8px 14px;

  border-radius:10px;
  border:1px solid #ffffff15;

  font-size:13px;

  transition:0.3s;
}

.back-btn:hover{
  background:var(--accent);
  color:var(--title);
}

/* BLOG CONTENT */
.blog-content p{
  font-size:13px;
  line-height:1.8;

  color:var(--text);

  margin-bottom:18px;
}

/* BLOG IMAGE */
.blog-image{
  width:80%;
  max-width:600px;
  height:auto;

  display:block;
  margin:25px auto;

  border-radius:12px;

  border:1px solid #ffffff15;

  box-shadow:0 0 15px #00000040;

  object-fit:cover;

  transition:0.3s;
}

.blog-image:hover{
  transform:scale(1.02);
  opacity:0.92;
}

/* IMAGE CAPTION */
.image-caption{
  text-align:center;

  color:var(--subtitle);

  font-size:12px;

  margin-top:-10px;
  margin-bottom:25px;
}

/* OPTIONAL DECORATION */
.blog-box::before{
  content:"";

  width:40px;
  height:12px;

  background:#ffffff30;

  position:absolute;

  top:-6px;
  right:25px;

  transform:rotate(-4deg);

  border-radius:3px;
}

/* RESPONSIVE */
@media (max-width:768px){

  .top-header{
    padding-left:20px;
  }

  .blog-wrapper{
    padding:15px;
  }

  .blog-box{
    padding:20px;
  }

  .blog-title{
    font-size:20px;
  }

  .blog-image{
    width:100%;
  }

}