/* 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." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
  margin: 0;
  padding: 0;
}

/* Header container that holds both logo and title */
.header-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 20px;
  min-height: 60px;
}

/* Logo positioned absolutely in top-left */
.corner-logo {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 60px;
  height: auto;
  z-index: 10;
}

.corner-logo img {
  width: 100%;
  height: auto;
  border-radius: 5px;
  /* Remove border from logo - it should only apply to main content images */
}

/* Main title centered */
h1 {
  text-align: center;
  margin: 0;
  flex: 1;
}

h2 {
  text-align: center;
}

h3 {
  text-align: center;
}

/* Navigation styling */
nav {
  padding: 10px 0;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
  text-align: center;
}

nav a {
  text-decoration: none;
  color: #0066cc;
  font-weight: bold; /* Using 'bold' instead of 900 for better compatibility */
  font-size: 1.2em; /* Increased font size for better visibility */
  display: inline-block;
  margin: 0 15px;
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; /* Use system fonts that support bold better */
}

nav a:hover {
  background-color: #0066cc;
  color: white;
  transform: translateY(-1px);
}

a {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  max-width: 800px; /* Prevents images from getting too wide on large screens */
}

/* Fix for mobile - ensure images are properly centered */
.center img, img.center {
  border: 3px solid #000;
  margin: 30px auto; /* Changed from just '30px' to '30px auto' */
  display: block;
  width: 90%;
  max-width: 800px;
  height: auto; /* Maintains aspect ratio */
}

/* Mobile-specific fixes */
@media screen and (max-width: 768px) {
  .header-container {
    padding: 15px 80px 15px 20px; /* Extra padding to avoid logo overlap */
  }
  
  .corner-logo {
    width: 50px; /* Slightly smaller logo on mobile */
  }
  
  h1 {
    font-size: 1.5em; /* Smaller title on mobile */
  }
  
  nav a {
    display: block;
    margin: 15px auto; /* Stack nav links vertically on mobile with more spacing */
    max-width: 280px; /* Limit width for better touch targets */
    text-align: center;
    padding: 12px 20px; /* Larger touch targets */
  }
  
  .center img, img.center {
    width: 95%;
    margin: 20px auto;
  }
  
  .center {
    width: 95%;
  }
}