* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* Add wallpaper background to body on all pages */
body {
  font-family: monospace;
  line-height: 1.8;
  padding: 0;
  background-image: url('https://cntnr.neocities.org/Container%20logo/cntnr%20logo%20clean.png');
  background-repeat: repeat;
  background-size: 50px 50px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Make the container a white box on all pages */
.container {
  width: 100%;
  max-width: 800px;
  background-color: white;  /* Add white background */
  text-align: left;
  padding: 40px;
  margin: 20px auto;
  box-sizing: border-box;
  display: block;
}
header, nav {
  width: 100%;                   /* Ensure they take full width */
  text-align: center;            /* Center content inside header and nav */
}
header {
  margin-bottom: 20px;           /* Space below the logo */
}
.logo {
  max-width: 100%;                /* Scale logo responsively */
  height: auto;
  display: block;
  margin: 0 auto;                 /* Center logo horizontally */
}
nav {
  margin: 20px 0;
}
nav a {
  text-decoration: none;
  margin: 0 15px;
  color: black;                  
  font-size: 16px;
}
nav a:hover {
  color: #1E90FF;                /* Classic blue hover color */
}
/* Main Content */
main {
  width: 100%;
  max-width: 1200px;              /* Ensure content has a max-width */
  text-align: left;               /* Left-align text content */
  padding: 40px;
  margin: 20px auto 0 auto;       /* 20px top, auto left/right, 0 bottom */
  box-sizing: border-box;         /* Ensure padding doesn't affect width */
  display: flex;
  flex-direction: column;         /* Stack content vertically */
  align-items: center;            /* Center child elements horizontally */
}
/* Section Styles */
section {
  max-width: 600px;               /* Creates a narrower text column */
  margin-bottom: 40px;            /* Add space between sections */

}
/* Mobile-First Approach - Use media queries to adjust for mobile screens */
@media (max-width: 768px) {
  main {
    padding: 10px;
  }
  header {
    margin-top: 10px;
  }
  section {
    max-width: 100%;              /* Allow full width on mobile */
  }
}
@media (max-width: 480px) {
  /* For very small devices (e.g., mobile phones) */
  .logo {
    max-width: 80%;              /* Scale the logo down on smaller screens */
  }
}

section {
  max-width: 600px;
  width: 100%;
  margin-bottom: 40px;
  padding: 0;  /* Ensure no padding throws off alignment */
}

section > * {
  margin-left: 0;  /* Force all direct children to align left */
  padding-left: 0;
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 20px;
}

section p {
  margin-bottom: 10px;
}

/* Footer styles */
.container footer {
  background-color: white;
  color: #333;
  text-align: center;
  padding: 20px 10px 10px;    /* Extra top padding for spacing */
  margin-top: auto;            /* Pushes footer to bottom */
  border-top: 1px solid #ddd;  /* Optional: visual separator */
}

.container footer a {
  color: #333;
  text-decoration: none;
  margin: 0 10px;
}

.container footer a:hover {
  color: #1E90FF;
}

/* Title and author styling for book pages */
.container h1 {
  text-align: center;
  padding-bottom: 5px;
  margin-bottom: 5px;
}

.container h1 + p {
  text-align: center;
  padding-bottom: 15px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ddd;  /* Line separator */
}