body {
  font-family: monospace;
  padding: 20px;
  font-size: 18px;
}


#ghost {
  transition: opacity 1s ease-in-out;
  opacity: 0; 
  position: absolute;
}

.blog-posts-list article {
  margin-bottom: 20px;
}

.blog-posts-list article:first-of-type {
  margin-top: 40px; /* Adjust the value based on your preference */
}

.blog-posts-list h3 a {
  color: #555; /* A soft, dark grey for elegance */
  text-decoration: none; /* Clean look without underlines */
}

.blog-posts-list p {
  color: #333; /* Slightly darker grey for easy reading */
}

.blog-posts-list > h2 {
  border-bottom: 2px solid #777; /* Adds a line to divide from posts */
  padding-bottom: 10px; /* Space above the line */
  margin-bottom: 20px; /* Space between the line and first article */
}

.blog-posts-list article p {
  font-style: italic;
  font-size: 0.9em; /* Adjust the size as needed */
}

.read-more, .night-theme .blog-posts-list .read-more {
  color: #900; /* A subdued red */
  text-decoration: none; /* Keeps it clean */
  font-style: normal; /* Overrides global italic styles for readability */
}

.read-more {
  display: block;
  margin-top: 10px;
  color: #555;
  text-decoration: none;
}

.read-more:hover {
  text-decoration: underline;
}

pre {
  clear: both;
}
.night-theme section a:visited {
  color: white;
}

.read-more:hover, .night-theme .blog-posts-list .read-more:hover {
  text-decoration: underline; /* Adds a bit of interaction */
}

article {
  clear: both; /* Ensures the layout doesn't break with floating elements */
}

pre {
  clear: both; /* To ensure separation if the read time floats */
}

img {
  width: 40rem;
}

section {
  max-width: 50%;
  margin-left: 0;
  margin-right: auto;
}

section ul {
  list-style-type: disc;
  margin-left: 20px;
}

section blockquote {
  margin-left: 20px;
  margin-right: 20px;
  padding: 10px;
  background-color: #f0f0f0;
  border-left: 5px solid #333;
  font-style: italic;
}

.light-theme {
  background-color: #f5f5f5;
  color: #333;
}

.night-theme {
  background-color: #333;
  color: #f5f5f5;
}

nav {
  margin-bottom: 20px;
}

nav a,
nav span {
  cursor: pointer;
  text-decoration: none;
  color: #000;
}

nav a:hover,
nav span:hover {
  text-decoration: underline;
}

.night-theme blockquote {
  background-color: #2d2c2c; /* Dark theme background */
  color: #f5f5f5; /* Light text for visibility */
  border-left-color: #f5f5f5; /* Adjust the border color for visibility */
}

.night-theme .blog-posts-list h3 a, .night-theme .blog-posts-list p, .night-theme .read-more, .night-theme .reading-material p {
  color: #f5f5f5; /* Ensures text is white in dark theme */
}

.night-theme .blog-posts-list article, .night-theme .image-caption, .night-theme .reading-material p {
  color: #f5f5f5; /* Adjusts all relevant text to be white */
}

.night-theme nav a,
.night-theme nav span, .night-theme .blog-posts-list .read-more {
  color: yellow;
}

.theme-toggle {
  float: right;
}

.image-caption {
  font-style: italic;
  font-size: 0.7em;
  /* Makes the text slightly smaller than the surrounding text */
  text-align: left;
  /* Optionally, you might want to center the caption */
  margin-top: 5px;
  /* Adjust spacing as needed */
  color: #666;
  /* Optional: Change the color to differentiate the caption from main content */
}

.current-page {
  text-decoration: underline;
  font-weight: bold;
}