/* Global background image */
body {
  background-image: url("PUP_Background.jpg");   /* replace with your actual file name/path */
  background-size: cover;                    /* make it fill the entire screen */
  background-position: center;               /* keep it centered */
  background-repeat: no-repeat;              /* prevent tiling */
  background-attachment: fixed;              /* stay still when scrolling */
}

/* Optional: semi-transparent overlay to dim it slightly */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.1); /* white tint, 30% opacity */
  z-index: -1;  /* keeps the overlay behind all content */
}

/* enabled globally */
* {
  padding: 0;
  margin: 0;
  /*font-family: Cinzel, Arial, Helvetica, sans-serif*/;
}

/* header container */
.header {
  height: 80px;
  width: 100%;
  background-color: #800;
  display: flex;
}

/* pup-logo inside header */
img {
  height: 65px;
  width: 65px;
  margin-left: 20px;
  margin-top: 8px;
}

/* paragraph inside header */
.header p {
  font-family: Cinzel, serif;
  color: rgb(255, 255, 255);
  text-align: center;
  margin: 30px 0 30px 10px;
  font-weight: 700;
  letter-spacing: 0em;
}

h2 {
  font-family: Cinzel, serif;   /* matches site’s main font */
  font-size: 50px;              /* make it larger */
  font-weight: 900;             /* make it extra bold */
  color: #800;                  /* deep red like header */
  letter-spacing: 2px;          /* optional: gives it a refined spacing */
  margin-top: 20px;
  text-align: center;           /* centers it above the lyrics */
}

hr {
    border: 0;
    height: 2px;           /* thickness */
    background-color: #800; /* color */
    width: 50%;            /* length */
    margin: 10px auto;     /* spacing and centering */
}

/* The wrapper takes up full height minus header & footer */
.main-wrapper {
  display: flex;
  justify-content: center; /* center horizontally */
  align-items: center;     /* center vertically */
  min-height: calc(100vh - 145px); /* dynamic height (80 + 65) */
}

/* container for lyrics and audio */
.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 80%;        /* takes up 80% of the page width */
  max-width: 800px;  /* but never wider than 800px */
  min-width: 400px;  /* and never narrower than 400px */
  height: auto;      /* height grows with content */
  margin: 0 auto;    /* centers the container horizontally */
  background-color: rgba(255, 255, 255, 0.65); /* semi-transparent white */
  border-radius: 20px;                        /* optional: soften corners */
  font-family: 'Dancing Script', cursive; 
}

/* lyrics container */
#lyrics-container {
  scrollbar-width: none;        /* for Firefox */
  -ms-overflow-style: none;     /* for old IE/Edge */
  text-align: center;
  height: 300px;
  width: 500px;
  overflow-y: scroll;
  margin-bottom: 20px;
  padding: 20px;
  font-size: 25px;
  transition: scroll-behavior 1s ease-in-out;
}

#lyrics-container::-webkit-scrollbar {
  display: none;                /* Chrome, Safari, Edge */
}

#audio-container audio {
  opacity: 0.8;   /* 1 = fully opaque, 0.8 = 80% visible */
}

/* audio container */
#audio-container {
  text-align: center;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 60px;
  margin: 20px 0 20px 0;
}

/* footer container */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 65px;
  background-color: rgba(226, 226, 226, 0.65);
  text-align: center;
  font-weight: 700;
  letter-spacing: 0em;
}

/* paragraph inside footer */
.footer p {
  padding: 25px 0 0 0;  
  font-weight: lighter;
}

/* style for the highlight of current lyrics */
.highlight {
  color: #800;
  font-weight: bold;
  padding: 20px 0 10px 0;
}

/*Collaborative Work by Rocelie M. Capendit, Arizelle Anna E. De Luna, Mark Joseph Delos Reyes, Nikka Roldan */