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

#mass-holder {
  box-sizing: border-box;
 width: 100%;
 text-align: center;
 display: flex;
 flex-direction: column;
 border: 4px solid;
 border-color: white;
 color: white;
 border-radius: 25px;
 overflow: hidden;
}

.column-flex {
  width: 100%;
 display: flex;
 flex-direction: column;
 height: 100%;
 background-color: pink;
}

.together-div {
 box-sizing: border-box; 
}

#top-banner {
 box-sizing: border-box;
 width: 100%; 
 background-color: black;
 height: 200px;
 border-bottom: 4px solid;
}

#contain-img {
 width: 100%;
 height: 100%;
 overflow: hidden;
}

#contain-img img {
 width: 100%;
  height: 100%;
  object-fit: cover;
}

.title-strip {
  box-sizing: border-box;
 width: 100%; 
 background-color: black;
 border-bottom: 4px solid;
 padding: 10px;
 color: white;
 font-size:30px;
}

#middle-stuff {
 box-sizing: border-box;
 width: 100%;
 height: 800px;
 background-color: red;
 padding: 20px;
}

.responsive-row {
 display: flex;
 flex-direction: row;
 gap: 10px;
 height: 100%;
 width: 100%;
}

.responsive-row-item {
  border-radius: 10px;
 background-color: lightyellow;
 height: 100%;
 box-sizing: border-box;
 display: flex;
 flex-direction: column;
 gap: 5px;
 padding: 7px;
 border: 2px solid;
 border-color: black;
}

#left-section {
  box-sizing: border-box;
 width: 40%; 
 display: flex;
 flex-direction: column;
 gap: 5px;
}

.header {
 box-sizing: border-box;
 padding: 15px;
 width: 100%;
 background-color: blue;
 font-size: 25px;
 border-radius: 20px;
 border: 2px solid;
 border-color: black;
}

.info-section {
 box-sizing: border-box;
 padding: 15px;
 width: 100%;
 background-color: lightblue;
 font-size: 20px;
 border-radius: 20px;
 border: 2px solid;
 border-color: black;
}

.about-textbox {
 box-sizing: border-box;
 width:100%; 
 background-color: pink;
 color: black;
 height: 100%;
 overflow: auto;
 padding: 15px;
 font-size: 20px;
 border-radius: 20px;
 text-align: left;
 border: 2px solid;
 border-color: black;
}

#right-section {
 box-sizing: border-box;
 width: 60%; 
}

.game-img {
 box-sizing: border-box;
 width: 100%;
 height:80%;
 border-radius: 20px;
}

.game-img img {
  box-sizing: border-box;
 width: 100%;
 height: 100%;
 object-fit: cover;
 border-radius: 20px;
 border: 2px solid;
 border-color: black;
}

.play-button-div {
 box-sizing: border-box;
 width: 100%;
 background-image: url(https://i.postimg.cc/NFRnCdT5/tile-flash.gif);
 height:20%;
 padding: 15px;
 border-radius: 20px;
 border: 2px solid;
 border-color: black;
}

#play-button {
 width: 100%;
 height: 100%;
 border-radius: 20px;
}

#footer-box {
  padding: 30px;
  box-sizing: border-box;
 width: 100%;
 background-color: black;
 border-top: 4px solid;
 border-color: white;
 display: flex;
 flex-direction: row;
 gap: 10px;
}

audio {
 box-sizing: border-box; 
}

.bottom-button {
 border-radius: 20px; 
}

#rhg-div {
  width: 100%;
 box-sizing: border-box;
}

#return-game-button {
 width: 100%;
 height: 100%;
 box-sizing: border-box;
}

#rhb-div {
 width: 100%;
 box-sizing: border-box;
}

#return-home-button {
 box-sizing: border-box;
 width: 100%;
 height: 100%;
}

/* style for smaller devices */
    
    @media screen and (max-width: 768px) {
      
      #content {
       width: 100%; 
       min-width: 0px;
      }
      
      #mass-holder {
       width: 100%; 
       max-height: none;
      }
      
      #footer-box {
       flex-direction: column; 
      }
      
      audio {
       width: 100%; 
      }
      
      .responsive-flex {
       flex-direction: column; 
      }
      
      #play-button {
        height: 50px; 
         padding: 5px;
       flex-shrink: 0;
      }
      
      #return-home-button {
       height: 50px; 
       padding: 5px;
       flex-shrink: 0;
      }
      
      #return-game-button {
       height: 50px; 
       padding: 5px;
       flex-shrink: 0;
      }
      
      .about-textbox {
       max-height: 300px; 
      }
      
      #middle-stuff {
       height: auto; 
      }
      
      .responsive-row {
       flex-direction: column; 
      }
      
      #left-section {
       width: 100%; 
      }
      
      #right-section {
       width: 100%; 
      }
    
    }