/* AutoVibe Initial CSS for project 1744048337647 - Iteration 1 */
/* Updated based on HTML structure and content */
/* Updated to include footer styling and remove unused rules */

body {
  font-family: sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f9f9f9; /* Light grey background for the page */
  margin: 0; /* Remove default body margin */
  padding: 0; /* Remove default body padding */
}

/* Content container */
body > header,
body > section,
body > footer {
  max-width: 900px; /* Max width for content */
  margin-left: auto; /* Center content */
  margin-right: auto; /* Center content */
  padding-left: 40px; /* Padding inside the content area */
  padding-right: 40px; /* Padding inside the content area */
}

/* Apply background, shadow, etc. to a wrapper if needed, or style sections individually */
/* For simplicity, applying common styles via body and overriding where needed */
/* Or, wrap content in a main container div if preferred */

/* Applying styles similar to the previous body block but allowing header/footer to span */
.content-wrapper { /* Hypothetical wrapper if needed */
  max-width: 900px;
  margin: 20px auto;
  background-color: #fff;
  padding: 30px 40px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

/* Applying styles directly to body and relevant elements */
body {
    padding-top: 20px; /* Space above first element */
    padding-bottom: 20px; /* Space below last element */
}

header, section {
    background-color: #fff; /* White background for content blocks */
    padding-top: 30px;
    padding-bottom: 1px; /* Adjust based on content */
    margin-bottom: 20px; /* Space between sections */
    box-shadow: 0 1px 4px rgba(0,0,0,0.05); /* Subtle shadow */
    border-radius: 8px; /* Rounded corners */
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
}
/* Adjust padding for header specifically */
header {
    padding-bottom: 15px; /* Padding below header content */
    border-bottom: none; /* Remove bottom border if sections have background/shadow */
    box-shadow: none; /* Remove shadow if desired for header */
    background: none; /* Remove background if desired for header */
    border-radius: 0;
    margin-bottom: 30px; /* Restore original spacing */
}

header p {
  font-size: 1.1em;
  color: #555;
  margin-bottom: 0; /* Remove margin below header paragraph */
}

section {
  margin-bottom: 30px; /* Space between sections */
  /* Re-apply section styles if header style is changed */
   background-color: #fff;
   padding-top: 20px;
   padding-bottom: 20px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   border-radius: 8px;
}


h1 {
  color: #2c3e50;
  border-bottom: 2px solid #3498db;
  padding-bottom: 10px;
  margin-top: 0; /* Remove default top margin */
  margin-bottom: 20px;
}

h2 {
  color: #34495e;
  margin-top: 10px; /* Reduced top margin */
  margin-bottom: 15px;
  border-bottom: 1px solid #bdc3c7;
  padding-bottom: 5px;
}

h3 {
  color: #7f8c8d;
  margin-top: 20px;
  margin-bottom: 10px;
}

p {
  margin-bottom: 15px;
}

ul,
ol {
  margin-left: 0; /* Reset default */
  margin-bottom: 15px;
  padding-left: 30px; /* Indentation for lists */
}

/* Style nested lists */
ul ul,
ol ul,
ul ol,
ol ol {
  margin-top: 8px;
  margin-bottom: 8px;
  padding-left: 25px; /* Further indent nested lists */
}

li {
  margin-bottom: 8px;
}

code {
  background-color: #ecf0f1;
  padding: 0.2em 0.4em;
  margin: 0 0.1em;
  font-size: 85%;
  border-radius: 3px;
  font-family: monospace;
  color: #c0392b; /* Adjusted color for better contrast */
  border: 1px solid #dde; /* Subtle border */
}

pre {
  background-color: #ecf0f1;
  padding: 15px;
  border-radius: 5px;
  overflow-x: auto;
  border: 1px solid #bdc3c7;
  margin-bottom: 15px;
}

pre code {
  background-color: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  color: inherit; /* Inherit color from pre */
  font-size: 100%; /* Reset font size within pre */
  border: none;
}

/* Style links */
a {
  color: #2980b9; /* Slightly darker blue */
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  color: #1f618d;
}

/* Style blockquotes if used for notes or emphasis */
blockquote {
  border-left: 5px solid #bdc3c7;
  padding-left: 15px;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 15px;
  color: #7f8c8d;
  font-style: italic;
  background-color: #fdfefe; /* Slight background tint */
}

/* Basic table styling if needed */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 15px;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
  font-weight: bold;
}

/* Style for emphasis like bold text in README */
strong, b {
    font-weight: bold;
    color: #2c3e50; /* Match h1 color for strong emphasis */
}

/* Style for emphasis like italic text */
em, i {
    font-style: italic;
    color: #555; /* Slightly muted color for italics */
}

/* Styles for the dynamically added footer */
footer {
  max-width: 900px; /* Match content width */
  margin: 40px auto 20px auto; /* Top margin, auto horizontal, bottom margin */
  padding: 20px 40px; /* Vertical and horizontal padding */
  border-top: 1px solid #eee; /* Light separator line */
  font-size: 0.9em; /* Smaller text */
  color: #666; /* Muted text color */
  text-align: center; /* Center the footer text */
  background-color: #fff; /* Match section background */
  box-shadow: 0 -1px 4px rgba(0,0,0,0.05); /* Subtle shadow top */
  border-radius: 0 0 8px 8px; /* Round bottom corners if sections are rounded */
}

footer p {
  margin-bottom: 5px; /* Reduce space between footer paragraphs */
  color: #777; /* Slightly lighter text */
}

/* Responsive adjustments if needed */
@media (max-width: 768px) {
  body > header,
  body > section,
  body > footer {
    padding-left: 20px;
    padding-right: 20px;
  }

  header, section {
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 0; /* Remove rounding on smaller screens */
  }

  footer {
     padding-left: 20px;
     padding-right: 20px;
     border-radius: 0;
  }

  h1 {
    font-size: 1.8em;
  }

  h2 {
    font-size: 1.4em;
  }
}