body {
        background-image: url(https://bettysgraphics.neocities.org/images/backgrounds/pattern%20567.gif);
       
        display: grid;
        place-items: center; /* Centers both horizontally and vertically */
        
    }
   
#content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  max-width:1000px;
  min-width: 1000px;
  padding: 2px;
   box-sizing: border-box;
}


#massholder {
 box-sizing: border-box;
 width: 100%;
 min-height: 900px;
 border: 2px inset;
 border-color: #8DACD9;
 border-radius:15px;
 overflow: hidden;
 padding: 15px;
 background: #dbeaff;
background: linear-gradient(0deg, rgba(219, 234, 255, 1) 0%, rgba(235, 251, 255, 1) 50%, rgba(235, 251, 255, 1) 100%);
}

.column-flex {
 display: flex;
 flex-direction: column;
 gap: 5px;
}

.responsive-flex {
 display: flex;
 flex-direction: row;
 width: 100%;
 gap: 5px;
 box-sizing: border-box;
}

.responsive-flex-item {
 box-sizing: border-box;
 display: flex;
 flex-direction:column;
}

.rfi-big {
  width: 65%;
}

.rfi-small {
 width: 35%;
 filter: drop-shadow(1px 1px 2px black);
}

.button-box {
 display:flex;
 flex-direction: row;
 gap: 1px;
 justify-content: space-between; 
 height: 60px;
}

.button-box button {
  flex: 1;
 flex-shrink: 0;
}

.button-box button:hover {
 cursor: pointer; 
 background: #bd1c5c;
background: linear-gradient(0deg, rgba(189, 28, 92, 1) 0%, rgba(235, 42, 119, 1) 50%, rgba(255, 105, 165, 1) 100%);
}

.switchable-graphic-box {
  width: 100%;
 height:450px; 
 background: #b8eb6c;
background: linear-gradient(0deg, rgba(184, 235, 108, 1) 0%, rgba(202, 247, 134, 1) 50%, rgba(225, 255, 181, 1) 100%);
 box-sizing: border-box;
 padding: 10px;
 overflow: auto;
 border:2px inset;
 border-color:#5BC449;
}

.about-box {
 width: 100%;
 background: #ff386d;
background: linear-gradient(0deg, rgba(255, 56, 109, 1) 0%, rgba(255, 97, 139, 1) 50%, rgba(255, 148, 176, 1) 100%);
border: 2px outset;
border-color: #FF386D;
 box-sizing: border-box;
 padding: 10px;
 display: flex;
 flex-direction: column;
 gap: 10px;
 margin-top: 5px;
}

.header-box {
 width: 100%;
 box-sizing: border-box;
 border: 2px dashed;
 border-color:#D42859;
 border-radius: 15px;
 padding: 12px;
background: linear-gradient(0deg, rgba(255, 217, 227, 1) 0%, rgba(255, 217, 227, 1) 50%, rgba(255, 237, 242, 1) 100%);
}

.header-box span {
 font-size: 22px; 
 color: #CF004F;
 text-decoration: underline dashed;
}


.standard-text-box {
  box-sizing: border-box;
 background: linear-gradient(0deg, rgba(255, 217, 227, 1) 0%, rgba(255, 217, 227, 1) 50%, rgba(255, 237, 242, 1) 100%);
 border: 2px dashed;
 border-color:#D42859;
 border-radius: 20px;
 padding: 12px;
 width: 100%;
 height: 150px;
 overflow: auto;
}

.standard-text-box span {
  font-size: 20px;
  color:#E84F8A;
}

#now-playing-box {
 box-sizing: border-box;
 width: 100%;
 height: 40px;
 padding: 10px;
 background: linear-gradient(0deg, rgba(184, 235, 108, 1) 0%, rgba(202, 247, 134, 1) 50%, rgba(225, 255, 181, 1) 100%);
 border: 2px outset;
 border-color:#5BC449;
}

#footer {
 box-sizing: border-box;
 width: 100%;
 height: 100px;
 padding: 20px;
 background: linear-gradient(0deg, rgba(255, 56, 109, 1) 0%, rgba(255, 97, 139, 1) 50%, rgba(255, 148, 176, 1) 100%);
 border: 2px outset;
 border-color: #FF386D;
 display: flex;
 flex-direction: row;
 justify-content: space-between;
}

audio {
 border-radius: 15px; 
}

#return-home-button {
 height: 100%;
 width: 600px;
 border-radius: 40px;
 background: linear-gradient(0deg, rgba(184, 235, 108, 1) 0%, rgba(202, 247, 134, 1) 50%, rgba(225, 255, 181, 1) 100%);
 border: 2px outset;
 border-color:#5BC449;
 box-sizing: border-box;
 color:#DE2154;
}

#return-home-button:hover {
  background: #68cf5d;
background: linear-gradient(0deg, rgba(104, 207, 93, 1) 0%, rgba(158, 252, 121, 1) 50%, rgba(158, 252, 121, 1) 100%);
cursor: pointer;
}



.showcase-box-contents {
  display: flex;
 box-sizing: border-box;
  flex-wrap: wrap;
  padding: 0 4px; 
  justify-content: center;   
}

#graphics-contents {
 display: block;
 text-align: center;
}

.showcase-box-contents img {
  margin: 2px;

}

span {
 font-family: tahoma; 
}

.showcase-header {
 text-align: center; 
 font-size: 20px;
}

.showcase-header span {
  color:#DE2154;
}

.showcase-desc {
 text-align: center; 
 font-style: italic;
}

.showcase-desc span {
 color: #FF386D;

}

.gap {
  display: flex;
  flex-direction: column;
 gap: 10px; 
}

button {
 color: white;
 font-size: 18px;
 background: #ff386d;
background: linear-gradient(0deg, rgba(255, 56, 109, 1) 0%, rgba(255, 97, 139, 1) 50%, rgba(255, 148, 176, 1) 100%);
border: 2px outset;
border-color: #FF386D;
}

.now-playing-text {
 color:#DE2154; 
}


/* IMPORTANT FOR JAVASCRIPT!11!1!!! */

.active {
  display:block;
  }
            
  .inactive {
 display:none;
}

.tabcontent {
            animation: fadeEffect 1s;
            }

            @keyframes fadeEffect {
             from {opacity: 0;}
                to {opacity: 1;}
            }
            


/* IMPORTANT FOR JAVASCRIPT!11!1!!! */


 @media screen and (max-width: 768px) {
      
      #content {
       width: 100%; 
       min-width: 0;
      }
      
      #massholder {
       width: 100%; 
       max-height: none;
       min-height: 0;
       padding: 5px;
      }
      
      .responsive-flex {
       flex-direction: column; 
      }
      
      .rfi-big {
       width: 100%; 
       order: 2;
      }
      
      .rfi-small {
       width: 100%;
       order:1;
      
      }
    
      
      #footer {
       flex-direction: column; 
       height: auto;
      }
      
      audio {
      width: 100%; 
      }
      
      #return-home-button {
       width: 100%; 
       height: 70px;
       font-size: 22px;
      }
 }