/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* Fonts: Special Elite = grunge typewriter, Shadows Into Light = cute handwritten */
/* Fonts */


/* ===== GLOBAL STYLES ===== */
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Shadows+Into+Light&display=swap');

body {
  background-color: #1e1e1b; /* dark earthy tone */
  background-image: url('https://www.transparenttextures.com/patterns/paper-fibers.png'); /* subtle paper texture */
  background-size: cover;
  color: #e0ded8;
  font-family: 'Special Elite', monospace; /* grunge typewriter */
  line-height: 1.8;
  margin: 0;
  padding: 0;
}

/* ===== HEADER ===== */
header {
  text-align: center;
  padding: 2rem;
  border-bottom: 2px solid #3a3a35;
  background: rgba(20, 20, 18, 0.85);
}

header h1 {
  font-family: 'Shadows Into Light', cursive;
  font-size: 2.8rem;
  color: #d8cfc4; /* parchment vibe */
  margin: 0;
  letter-spacing: 2px;
}

nav a {
  color: #a89f94;
  text-decoration: none;
  margin: 0 0.7rem;
  font-size: 1rem;
}

nav a:hover {
  color: #d8cfc4;
  border-bottom: 1px dotted #d8cfc4;
}

/* ===== MAIN POSTS ===== */
main {
  max-width: 700px;
  margin: 3rem auto;
  padding: 1rem;
}

article {
  margin-bottom: 3rem;
  padding: 2rem;
  background: rgba(35, 35, 30, 0.7);
  border: 1px solid #3f3d36;
  border-radius: 8px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.4);
}

article h2 {
  font-family: 'Shadows Into Light', cursive;
  color: #d8cfc4;
  font-size: 1.8rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.date {
  font-size: 0.9rem;
  color: #8c867c;
  margin-bottom: 1rem;
}

article a {
  text-decoration: none;
  color: #c4b59f;
}

article a:hover {
  color: #d8cfc4;
}

/* ===== FOOTER ===== */
footer {
  text-align: center;
  padding: 2rem;
  font-si