/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* for error messages */

.notfound {
  color: red;
  display: grid;
  text-align: center;
}

/* Basic page styling */
body {
  font-family: 'JetBrains Mono', monospace;
  max-width: 800px; /* Keeps line lengths readable */
  margin: 0 auto;   /* Centers the content on the screen */
  padding: 20px;
  background-color: #111;
  color: #fdfdfd;
  line-height: 1.6;
}

/* Simplest Horizontal Menu */
nav ul {
  list-style-type: none; /* Removes the bullet points */
  padding: 0;
  display: flex;         /* Puts items in a row */
  flex-wrap: wrap;       /* ALLOWS WRAPPING: Pushes items to the next line if they don't fit */
  align-items: baseline; /* Keeps the text aligned perfectly on the baseline */
  gap: 20px;             /* Space between links */
  border-bottom: 2px solid #fdfdfd; /* A nice dividing line */
  padding-bottom: 10px;
  margin-bottom: 30px;
}

/* Fix for the link colors: forces them to stay white even after clicking */
nav a, nav a:visited {
  color: #fdfdfd;
  text-decoration: none;
  font-weight: bold;
}

nav a:hover {
  text-decoration: underline;
  color: #0000ff; /* Keeps original blue hover state */
}

/* Mobile responsive styling */
@media (max-width: 500px) {
  nav ul {
    display: grid;                  /* Switches from flexbox to grid on mobile */
    grid-template-columns: 1fr 1fr; /* Creates two columns of equal width */
    gap: 15px 10px;                 /* 15px vertical gap, 10px horizontal gap */
  }
  
  .featured-item {
    grid-column: 1 / span 2;        /* Forces FRAME_BUFFER to stretch across both columns */
    margin-right: 0 !important;     /* Overrides HTML inline style */
    margin-bottom: 5px;         
    border-bottom: 2px solid  #fdfdfd; /* Keeps the separator line */
    padding-bottom: 10px;
  }
}

/* Blog post date styling */
.date {
  color: #666;
  font-style: italic;
  font-size: 0.9em;
}

.featured-item {
  font-size: 1.2rem; /* Larger text */
  font-weight: bold;
  margin: 0;
}

/* Centering Images and Captions */
figure {
  display: block;
  margin: 30px auto; /* Adds vertical space and centers the figure container */
  text-align: center; /* Centers the caption text */
  max-width: 100%;    /* Ensures it doesn't overflow on small screens */
}

figure img {
  display: block;
  margin: 0 auto 10px auto; /* Centers the image and adds space above the caption */
  max-width: 100%;          /* Responsive: image scales down for mobile */
  height: auto;             /* Maintains aspect ratio */
  border: 1px solid #333;   /* Optional: adds a subtle frame to your 3D renders */
}

figcaption {
  font-size: 0.85em;
  color: #888;              /* Dimmer color so it doesn't distract from the post */
  font-style: italic;
  margin-top: 8px;
}