/* Basic Reset */
    *, *::before, *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Georgia', serif;
      background-color: #f9f8f6;
      color: #333;
      line-height: 1.6;
    }

    /* Container for consistent layout */
    .container {
      max-width: 900px;
      margin: 40px auto;
      padding: 0 20px;
    }

    header {
      text-align: center;
      margin-bottom: 40px;
    }

    header h1 {
      font-size: 3rem;
      color: #1a2a6c;
      margin-bottom: 10px;
    }

    header p {
      font-size: 1.2rem;
      color: #4a4a4a;
      font-style: italic;
    }

    nav {
      text-align: center;
      margin-bottom: 40px;
    }

    nav a {
      text-decoration: none;
      color: #1a2a6c;
      margin: 0 15px;
      font-weight: bold;
      font-size: 1rem;
      border-bottom: 2px solid transparent;
      transition: border-color 0.3s ease, color 0.3s ease;
    }

    nav a:hover {
      border-bottom: 2px solid #1a2a6c;
      color: #4a66ff;
    }

    main article {
      background-color: white;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      margin-bottom: 40px;
    }

    article h2 {
      margin-bottom: 15px;
      color: #1a2a6c;
    }

    article p {
      margin-bottom: 20px;
      font-size: 1.1rem;
      text-align: justify;
      hyphens: auto;
    }

    /* Blog post list */
    .blog-post-list {
      list-style: none;
      padding-left: 0;
      margin-bottom: 40px;
    }

    .blog-post-list li {
      margin-bottom: 15px;
    }

    .blog-post-list a {
      text-decoration: none;
      color: #1a2a6c;
      font-weight: bold;
      font-size: 1.2rem;
      transition: color 0.3s ease;
    }

    .blog-post-list a:hover {
      color: #4a66ff;
      text-decoration: underline;
    }

    footer {
      text-align: center;
      padding: 20px 10px;
      color: #777;
      font-size: 0.9rem;
      border-top: 1px solid #ddd;
    }

    /* Responsive Design */
    @media (max-width: 900px) {
      .container {
        padding: 0 15px;
      }
    }

    @media (max-width: 600px) {
      header h1 {
        font-size: 2rem;
      }
      nav a {
        margin: 0 10px;
        font-size: 0.9rem;
      }
      main article {
        padding: 20px;
      }
      .blog-post-list a {
        font-size: 1rem;
      }
    }
  
  /* centering image on landing page */  
    .centered-image {
  display: block;           /* Centers the image */
  margin: 20px auto;        /* Top/bottom spacing + horizontal centering */
  max-width: 85%;           /* Scales image to half the container width */
  height: auto;             /* Maintains aspect ratio */
  border-radius: 10px;      /* Optional: rounded corners */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Optional: subtle shadow */
}

/* Responsive adjustment for smaller screens */
@media (max-width: 600px) {
  .centered-image {
    max-width: 80%;  /* Image takes more space on mobile */
  }
}

/* To adjust date on blog posts to a smaller font */
.post-date {
  font-size: 0.7em;    /* slightly smaller than normal text */
  color: #555;         /* lighter color for subtle effect */
  margin-left: 4px;    /* optional spacing after dash */
}