/* --- Base Styles --- */
body {
  margin: 0;
  background: #0b0b0b;
  color: #f2f2f2;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: monospace;
  letter-spacing: 0.02em; /* Slight breathing room without overdoing it */
  min-height: 100vh; /* ensures full screen */
  overflow-y: auto; /* allow scrolling for long content */
}

main {
  position: relative;
  z-index: 1;
  text-align: center;
  width: 80%;
  max-width: 700px;
  margin: 2em auto;
}

/* --- Background Particles --- */
.background {
  position: fixed; /* stays behind content while scrolling */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none; /* clicks pass through */
}

.particle {
  position: absolute;
  bottom: -10px;
  width: 3px; /* smaller for subtlety */
  height: 3px;
  background: #fff;
  border-radius: 50%;
  opacity: 0.1; /* soft visibility */
  animation: floatUp 20s linear infinite; /* slower movement */
}

/* --- Float Animation --- */
@keyframes floatUp {
  0% { transform: translateY(0) translateX(0); opacity: 0.05; }
  50% { transform: translateY(-55vh) translateX(2vw); opacity: 0.15; } /* Gentle sway */
  100% { transform: translateY(-110vh) translateX(-1vw); opacity: 0; }
}

/* Main text links and style */
main a {
  color: #f2f2f2;
  text-decoration: none;
  margin: 0 0.5em;
}

main a:hover {
  text-decoration: underline;
  font-variation-settings: 'wght' 500; 
}

/* Post block styling for blog page */
.post {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.5em;
  border-left: 2px solid #444;
  padding-left: 1em;
}

.post a {
  color: #fff;
  text-decoration: none;
}

.post a:hover {
  text-decoration: underline;
}

.post .date {
  color: #888;
  font-size: 0.9em;
}

blockquote {
  font-style: italic;
  color: #ccc;
  margin: 2em auto;
  text-align: center; /* center the text */
  line-height: 1.5; /* more readable spacing */
  white-space: normal; /* prevents line wrapping */
}

blockquote footer {
  display: block;
  margin-top: 0.5em;
  font-size: 0.9em;
  color: #888;
}

@media (max-width: 480px) {
  blockquote {
    white-space: normal; /* Lets text wrap naturally */
    max-width: 100%; /* Ensures full width on small screens, no overflow */
  }
}

.thought p {
  text-align: justify; /* Even alignment on both sides—no ragged edges */
  text-justify: inter-word; /* Smooth word spacing for monospace font */
  hyphens: auto; /* Soft breaks for long words, prevents awkward cuts */
}

.thought img {
    /* 1. Control the maximum size */
    max-width: 100%; /* Ensures it doesn't overflow the container */
    height: auto;    /* Maintains the image's aspect ratio */
    max-height: 400px; /* Optional: Sets a maximum height to prevent it from getting too tall */

    /* 2. Center the image (since <img> is an inline element) */
    display: block; /* Changes the image to a block-level element */
    margin-left: auto; /* Pushes the left margin automatically */
    margin-right: auto; /* Pushes the right margin automatically */
    margin-top: 20px; /* Adds a bit of space above it */
    margin-bottom: 20px; /* Adds a bit of space below it */

    /* Optional: Add some nice styling (e.g., border/shadow) */
    border-radius: 8px; /* Slightly rounded corners */
}