/* Center the main title */
h1 {
  text-align: center;
}

/* Center the navigation menu */
nav ul {
  list-style-type: none; /* Removes the bullet points */
  padding: 0;
  display: flex;         /* Turns the list into a row */
  justify-content: center; /* Centers the items horizontally */
  gap: 20px;            /* Adds space between the links */
}

/* Optional: Make the links look a bit cleaner */
nav a {
  text-decoration: none;
  font-weight: bold;
  color: #333;
}

body {
  background-color: #FFFFF0;
}
#Ablproject {
  text-align: center;
  margin-top: 20px; /* Adds some space above the text */
}

/* If you want the actual text inside to be a specific color or size */
#Ablproject p {
  color: indianred; /* Ableton gold */
  font-size: 1.2rem;
}

.music-row {
  display: flex;            /* Turns on the horizontal layout */
  justify-content: space-between; /* Pushes one to the left, one to the right */
  align-items: flex-start;  /* Keeps them aligned at the top */
  width: 100%;              /* Ensures it uses the full width of the page */
  gap: 20px;                /* Prevents them from touching if the screen is small */
}

.track-item {
  flex: 1;                  /* Allows both sides to share space equally */
  max-width: 45%;           /* Prevents them from getting too wide and overlapping */
}

audio {
  width: 100%;              /* Makes the player fill its half of the row */
}

.navigation-footer {
  margin-top: 40px;
  padding-bottom: 20px;
  text-align: center; /* Centers the button */
}

.back-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #333; /* Dark grey like Ableton */
  color: #00ff00;         /* Neon green text */
  text-decoration: none;  /* Removes the underline */
  border: 2px outset #555; /* Gives it a 3D "button" look */
  font-family: monospace;
  font-weight: bold;
}

.back-button:hover {
  background-color: #444;
  border: 2px inset #222; /* Makes it look "pressed" when you hover */
  color: #fff;
}

.main-banner {
  width: 35%;           /* Fills the container */
  max-width: 200px;      /* Prevents it from getting too huge */
  display: block;
  margin: 20px 0;     /* Centers the GIF */
  border: 4px double #00ff00; /* A "Neon Green" double border */
  image-rendering: pixelated; /* Keeps pixel art looking sharp, not blurry */
  box-shadow: 5px 5px 0px rgba(0,0,0,0.5); /* Retro "Hard" shadow */
}

.update-log p {
  background: #1a1a1a;    /* Dark background */
  border-left: 4px solid #00ff00; /* Neon "Active" strip */
  padding: 10px;
  margin-bottom: 5px;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
}

/* Make the first word or specific text pop */
.update-log strong {
  color: #ff00ff; /* Hot pink for versions/updates */
}

/* Styling the Details/Summary boxes */
details {
  background: #3c3c3c;
  border: 1px solid #222;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
}

summary {
  font-weight: bold;
  color: #ffd700; /* Ableton Yellow */
  outline: none;
}

details[open] {
  background: #4a4a4a;
  border: 1px solid #ffd700;
}

details p {
  margin-top: 10px;
  color: #e0e0e0;
  line-height: 1.5;
  background: #2b2b2b;
  padding: 10px;
  border-radius: 2px;
}

/* Style the code snippets */
code {
  background: #000;
  color: #00ff00;
  padding: 2px 5px;
  font-family: monospace;
}