body {
 background-image: url(https://bettysgraphics.neocities.org/images/backgrounds/music%20notes%204.gif); 
  display: grid;
  place-items: center; /* Centers both horizontally and vertically */
}

#content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  max-width:900px;
  min-width: 900px;
  padding: 2px;
   box-sizing: border-box;
}


.massholder {
  text-align: center;
 box-sizing: border-box;
 width: 100%;

 min-height: 700px;
 
 overflow: hidden;
 padding: 15px;
 display: flex;
 flex-direction: column;
 gap: 10px;

}

.title-box {
  box-sizing: border-box;
  font-size: 40px;
  background: #ffbb00;
background: linear-gradient(0deg, rgba(255, 187, 0, 1) 0%, rgba(255, 187, 0, 1) 50%, rgba(255, 204, 64, 1) 100%);
  padding: 20px;
  width: 100%;
  font-family: comic sans ms;
  border: 5px solid;
  border-color: #292259;
  border-radius:15px;
  color: #A31300;
}

.responsive-flex {
 box-sizing: border-box;
 width: 100%;
 display: flex;
 flex-direction: row;
 height: 700px;
 background-color: #292259;
 padding:5px;
 gap: 5px;
 border-radius:15px;
}

.marquee-div {
  border-radius:15px;
  box-sizing: border-box;
 width: 40%;
 background: #352e78;
background: linear-gradient(0deg, rgba(53, 46, 120, 1) 0%, rgba(53, 46, 120, 1) 50%, rgba(76, 65, 171, 1) 100%);
 height: 100%;
 padding: 5px;
}
.marquee {
 height: 100%; 
 border-radius: 15px;
}

.marquee img {
 border-radius:15px; 
}

.info-div {
  border-radius:15px;
 width: 60%; 
 box-sizing: border-box;
 height: 100%;
  background: #ffbb00;
background: linear-gradient(0deg, rgba(255, 187, 0, 1) 0%, rgba(255, 187, 0, 1) 50%, rgba(255, 204, 64, 1) 100%);
 padding: 15px;
 font-family: comic sans ms;
 font-size: 20px;
  color: #A31300;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-box {
 font-size: 20px;
 font-weight: bold;
 font-style: italic;
 font-family: comic sans ms;
 color:#292259;
}

.button-flex-box {
 box-sizing: border-box;
 display: flex;
 flex-direction: row;
 width: 100%;
 padding: 30px;
}

.icon-div {
  box-sizing: border-box;
 width: 100%; 
}

a {
  box-sizing: border-box;
 width: 50%; 
 display: flex;
 flex-direction: column;
 gap: 5px;
 justify-content: center;
 align-items: center;
 text-decoration: none;
 color: inherit;
}

.icon-div:hover {
  transform: scale(1.05); 
  cursor:pointer;
}

 @media screen and (max-width: 768px) {
  
   #content {
       width: 100%; 
       min-width: 0;
      }
      
      #massholder {
       width: 100%; 
       max-height: none;
       min-height: 0;
       height: auto;
      }
      
      .responsive-flex {
       flex-direction: column; 
       height: auto;
      } 
      
    .marquee-div {
     width: 100%; 
     height: 300px; 
    }
    
    .info-div {
     width: 100%; 
    }
    
 }