:root {
   --primary-color: #000; /* Black */
   --secondary-color: #fff; /* White */
   --accent-color: #ccc; /* Gray for accents */
   --base-font-size: 1.2em; /* Unified base font size */
}

body {
   margin: 0;
   font-family: Arial, sans-serif; /* Basic system font */
   background-color: var(--secondary-color);
   color: var(--primary-color);
   line-height: 1.6;
   max-width: 700px; /* Set a maximum width for the content */
   margin: 0 auto; /* Center the content */
   text-align: left; /* Align all text to the left */
}

.header {
   padding: 20px; /* Adjusted padding */
   position: relative; /* For positioning of the line */
}

.header-content {
   display: flex; /* Align image and title in a row */
   align-items: center; /* Center vertically */
}

.profile-image {
   width: 100px; /* Adjust the size as needed */
   border-radius: 50%; /* Make it circular */
   margin-right: 10px; /* Space between image and text */
}

.header-title {
   font-size: 1.6em; /* Smaller header font size */
   margin: 0; /* Remove default margin */
}

.header-link {
   text-decoration: none; /* Remove underline from the link */
   color: inherit; /* Inherit the text color from the header */
}

.header-link:hover {
   color: inherit; /* Keep the color unchanged on hover */
   text-decoration: none; /* Remove underline on hover */
}

.header-link:visited {
   color: inherit; /* Ensure the color remains unchanged after clicking */
}

.header::after {
   content: ''; /* Pseudo-element for the underline */
   display: block;
   width: 100%; /* Set width to 100% */
   height: 1px; /* Unified line height */
   background-color: var(--accent-color); /* Consistent color */
   margin: 10px auto; /* Center the line */
}

.content {
   padding: 0 20px;
}

.section {
   margin-bottom: 40px; /* Space between sections */
}

.section-title {
   font-size: 1.8em;
   margin: 30px 0 10px 0;
}

.text {
   font-size: var(--base-font-size); /* Unified font size for all text */
   margin: 10px 0; /* Consistent margin */
}

.post-list {
   list-style-type: none; /* Remove bullet points */
   padding: 0;           /* Remove default padding */
   margin: 0;            /* Remove default margin */
}

.post-list li {
   margin: 5px 0; /* Optional: Add some vertical space between list items */
}

pre {
   background-color: #f5f5f5; /* Light gray background */
   border: 1px solid #ddd; /* Light border */
   border-radius: 5px; /* Rounded corners */
   padding: 10px; /* Padding around the code */
   overflow: auto; /* Enables scrolling for long code lines */
   white-space: pre-wrap; /* Wrap long lines */
}

code {
   font-family: 'Courier New', monospace; /* Monospace font for code */
   color: #000; /* Code text color */
}

.footer {
   text-align: center; /* Keep the footer centered */
   padding: 20px 0;
   position: relative; /* For positioning of the line */
   margin-top: 40px;
}

.footer::before {
   content: ''; /* Pseudo-element for the footer line */
   display: block;
   width: 100%; /* Set width to 100% */
   height: 1px; /* Unified line height */
   background-color: var(--accent-color); /* Consistent color */
   margin: 0 auto 10px; /* Center the line */
}

.footer-text {
   font-size: 1em; /* Small text */
   margin: 5px 0; /* Consistent margin */
}

a {
   color: blue; /* Set link color to blue */
   text-decoration: underline; /* Underline links */
}

a:visited {
   color: red; /* Change color to red after the link has been clicked */
}

a:hover {
   color: blue; /* Keep color blue on hover */
   text-decoration: underline; /* Keep underline on hover */
}

/* MOBILE */
@media (max-width: 568px) {
   .header-title {
      font-size: 1.8em; /* Adjust for mobile */
   }

   .text {
      font-size: var(--base-font-size); /* Adjust for mobile */
   }

   .section-title {
      font-size: 1.5em;
   }

   .footer-text {
      font-size: 0.9em;
   }
}