/* thank you perfectmotherfuckingwebsite.com */

body {
  font: 18px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  color: #444;
}

main {
  max-width: 650px;
  margin: 40px auto;
  padding: 0 10px;
}

main h1,
main h2,
main h3 {
  line-height: 1.2;
}

img {
  max-width: 100%; /* This is the key change */
  height: auto;    /* This ensures the aspect ratio is maintained */
  display: block;  /* Optional: removes extra space below images */
  margin: 0 auto;  /* Optional: centers images if they are smaller than 100% width */
}

@media (prefers-color-scheme: dark) {
  body {
    color: #c9d1d9;
    background: #0d1117;
  }

  main a:link {
    color: #58a6ff;
  }

  main a:visited {
    color: #8e96f0;
  }
}


/* Site Header */
.site-header {
  background-color: #333; /* Dark background for contrast */
  color: #fff; /* White text */
  padding: 1rem 0; /* Vertical padding */ 
}

.site-header .header-content {
  max-width: 60ch; /* Align with your main content width */
  margin: 0 auto; /* Center the content */
  padding: 0 1rem; /* Horizontal padding for small screens */
  display: flex; /* Use flexbox for alignment */
  justify-content: space-between; /* Push title and nav to ends */
  align-items: center; /* Vertically align items */
}

/* Site Title */
.site-title {
  font-size: 1.5rem; /* Prominent but not overwhelming */
  font-weight: bold;
  text-decoration: none; /* No underline on the title link */
  color: #fff; /* White color for the title */
  white-space: nowrap; /* Prevent title from wrapping */
}

.site-title:hover {
  text-decoration: underline; /* Underline on hover for feedback */
}

/* Main Navigation */
.main-nav ul {
  list-style: none; /* Remove bullet points */
  margin: 0;
  padding: 0;
  display: flex; /* Display list items in a row */
  gap: 1.5rem; /* Space between navigation items */
}

.main-nav a {
  color: #f0f0f0; /* Slightly off-white for navigation links */
  text-decoration: none; /* No underline by default */
  font-size: 1rem;
  white-space: nowrap; /* Prevent nav items from wrapping */
}

.main-nav a:hover {
  text-decoration: underline; /* Underline on hover for navigation links */
}

/* Responsive Adjustments for smaller screens */
@media (max-width: 600px) {
  .site-header .header-content {
    flex-direction: column; /* Stack title and nav vertically */
    text-align: center;
  }

  .site-title {
    margin-bottom: 0.5rem; /* Space between title and nav when stacked */
  }

  .main-nav ul {
    gap: 1rem; /* Reduce space between nav items on small screens */
  }
}

/* Optional: Dark Mode Support (similar to the body example) */
@media (prefers-color-scheme: dark) {
  .site-header {
    background-color: #1a1a1a;
    box-shadow: 0 2px 5px rgba(255,255,255,0.05);
  }

  .site-title {
    color: #f0f0f0;
  }

  .main-nav a {
    color: #a0a0a0;
  }
}