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

/* Full-page background */
body {
  background-image: url('4da58edc652191c446838d10fcfdb172.jpg');
  background-size: cover;
  background-position: center;
  margin: 0;
  padding: 0;
  
  display: flex;
  justify-content: center;  /* centers the middle page horizontally */
  align-items: flex-start;  /* aligns it from top */
  min-height: 100vh;
}

/* Middle Page Container */
.page-container {
  width: 800px;       /* width of the middle page + banner */
  margin-top: 50px;   /* distance from top */
  text-align: center;
}

/* Top Banner */
.top-banner img {
  width: 100%;      /* full width of container */
  height: auto;
  display: block;
}

/* Middle Page Image */
.middle-page img {
  width: 100%;      /* fills width of container */
  height: auto;
  display: block;
  margin-top: 10px; /* spacing below banner */
  border-radius: 10px; /* optional rounded corners */
  box-shadow: 0 0 20px rgba(0,0,0,0.2); /* optional floating effect */
}


.music-player {
  background: #fdf2f8;
  padding: 20px;
  border-radius: 15px;
  width: 300px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  font-family: Arial, sans-serif;
}

.music-player h2 {
  text-align: center;
  margin-bottom: 15px;
  color: #d63384;
}

.music-player audio {
  width: 100%;
  margin-bottom: 12px;
}