html {
    background-color: #121212;
}

body {
    background-color: #121212; /* Keeps the center charcoal */
    color: #E0E0E0;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    margin: 0 auto;       /* This centers the container */
    max-width: 1200px;    /* The cap you requested */
    width: 100%;          /* Full width on mobile */
}

#nav-container {
    background-color: #1D1D1F;
    border-bottom: 2px solid #D4AF37; /* Brass Accent Line */
    padding: 15px 0;
    text-align: center;
}

#nav-container a {
    color: #B0B0B0;
    text-decoration: none;
    padding: 10px 20px;
    font-weight: bold;
    transition: color 0.3s;
}

#nav-container a:hover {
    color: #D4AF37; /* Brass Gold on hover */
}

/* PHP 'Active' Highlight */
#nav-container a.active {
    color: #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
}

/* Music Card Style for Score Previews */
.score-card {
    background: #1E1E1E;
    border: 1px solid #333;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 4px;
}

td.footer {
  font: small-caps;
  font-family:  Verdana, Geneva, sans-serif;
  font-size: 9px;
  color: #E0E0E0;

}

/* Styles for the main content table container */
table[name="inner"] {
    border-collapse: collapse; /* Merges borders for a cleaner look */
    width: 100% !important; /* Make the table fully responsive within its container */
    font-family: sans-serif; /* A more modern default font */
}

/* Styles for the table data cells */
table[name="inner"] td {
    padding: 10px 15px; /* Ample padding for better spacing (top/bottom and left/right) */
    border: 1px solid #ddd; /* Lighter, subtle borders */
    vertical-align: middle; /* Centers content vertically */
    color: #333; /* Slightly softer text color */
}

/* Zebra striping for improved readability on alternating rows */
table[name="inner"] tr:nth-child(even) td {
    background-color: #f9f9f9; /* A light gray background for even rows */
}

/* Add a hover effect for better user interaction */
table[name="inner"] tr:hover td {
    background-color: #e9e9e9;
}

/* Ensure text inside the span classes also benefits from the new font and color */
.newtext, .newtext2, .newtext3 {
    font-family: inherit !important; /* Use the new sans-serif font */
    color: inherit !important; /* Use the new text color */
}

H1 {
  font-family:  Verdana, Geneva, sans-serif;
  font-size:  10px;
  color: #E0e0e0;
}

h2 {
 color: #D4AF37; /* Use the existing brass accent color */
 font-family: 'Helvetica Neue', Arial, sans-serif; /* Match the body font stack */
 font-size: 18px; /* Slightly larger than standard text, smaller than a typical H1 */
 margin-top: 25px; /* Add some space above the heading */
 margin-bottom: 10px; /* Add space below the heading before the list starts */
 border-bottom: 1px solid #333; /* A subtle separator line */
 padding-bottom: 5px; /* Space between text and line */
}

/* Styling specifically for the link with class 'footer' */
a.footer {
 color: #E0E0E0; /* Matches your footer text color */
 text-decoration: underline;
 font-family: Verdana, Geneva, sans-serif;
 font-size: 10px; /* Slightly larger than your 9px footer text for readability */
 transition: color 0.3s;
}

a.footer:hover {
 color: #D4AF37; /* Changes to your Brass Accent Gold on hover */
}








/* Responsive adjustments for mobile screens */
@media screen and (max-width: 800px) {
  /* Make the holder and inner table expand to full width */
  table[name="holder"],
  table[name="inner"],
  table[name="footer"] {
    width: 100% !important;
  }

  /* Stack the main header images vertically */
  tr:first-child td {
    display: block;
    width: 100% !important;
    text-align: center;
  }

  /* Make table rows behave like cards for better mobile reading */
  table[name="inner"] td {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid #333;
    text-align: center; /* Center text for a cleaner mobile look */
  }

  /* Add extra spacing between song 'cards' */
  table[name="inner"] tr {
    display: block;
    margin-bottom: 20px;
    border: 1px solid #D4AF37; /* Add a brass border around each song group */
  }
}