body {
          font-family: 'Comic Sans MS', cursive;
          background-color: #70b3b3; /* Teal background for body */
          margin: 0;
          padding: 0;
          line-height: 1.6; /* Improves readability */
        }

        #blog-wrapper {
          max-width: 800px;
          margin: 20px auto;
          padding: 20px;
          border-radius: 10px; 
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
          background-color: #e0f2f7; 
          border: 3px dashed #008080; 
        }

        header {
          background: linear-gradient(to right, #008080, #408080, #70b3b3);
          color: white;
          padding: 10px 0 20px 0;
          text-align: center;
          border-radius: 10px;
          margin-bottom: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        h1 {
          margin: 0;
          font-size: 3.5em;
          text-shadow: 2px 2px 5px #000;
          color: white; /* <-- ADDED THIS LINE */
        }
        h1 a {
          color: white;
          text-decoration: none;
        }
        nav {
          background: linear-gradient(to right, #a3d5d5, #70b3b3);
          padding: 10px 0 20px 0;
          display: flex;
          justify-content: center;
          align-items: center;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
          border-radius: 10px;
        }

        nav ul {
          list-style: none;
          margin: 0;
          padding: 0; /* Remove default padding */
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 15px;
        }

        nav li {
          margin: 0;
        }

        nav a {
          color: black;
          text-decoration: none;
          font-weight: bold;
          font-size: 1.2em;
        }

        nav a:hover {
          text-decoration: underline;
          color: black;
        }

        main {
          max-width: 800px; 
          margin: 20px auto; 
        }

        article {
          margin-bottom: 30px;
          border: 3px dashed #008080;
          padding: 15px;
          border-radius: 10px; /* Added rounded corners to articles */
        }

        h2 {
          color: #333;
          margin-top: 0;
          font-size: 2.2em;
        }

        .post-content {
          font-family: 'Arial', sans-serif;
        }

        a { 
          color: #008080;
          text-decoration: none;
        }

        a:hover {
          text-decoration: underline;
        }

        footer {
          text-align: center;
          padding: 10px;
          background-color: #008080; 
          color: white;
          margin-top: 20px;
          border-radius: 10px; /* Add rounded corners */
          background: linear-gradient(to right, #008080, #408080, #70b3b3); /* Teal gradient */
        }
        
        footer a { 
          color: white; 
        }

        .post-datetime { 
          font-family: 'Verdana', sans-serif; 
          display: block;
          margin-bottom: 5px;
          color: #008080; 
          font-weight: bold;
        }

        .recent-post .post-datetime {  
          font-family: 'Comic Sans MS', cursive; /* Match the font from post pages */
          display: block;
          margin-bottom: 5px;
          color: #008080;  
          font-weight: normal; /* Remove bold to match post pages */
          text-transform: none; /* Remove uppercase to match post pages */
        }

        .recent-post h3 { /* Targets h3 titles within .recent-post containers */
          font-size: 1.8em; /* Adjust to match your post title size */
        }