body {
        background-image: url(https://i.postimg.cc/mknnHFCN/trees-blur.png);
        background-size: cover;
        background-repeat: no-repeat;
        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 ridge;
 border-color: #23303D;
 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 ridge;
 border-color: #23303D;
}

#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: #3C546B;
background: linear-gradient(0deg, rgba(60, 84, 107, 1) 0%, rgba(60, 84, 107, 1) 50%, rgba(121, 156, 189, 1) 100%);
 border-bottom: 4px ridge;
 padding: 10px;
 color: #EDF7FF;
 font-size:28px;
 border-color: #23303D;
}

#title-strip-top {
 border-bottom: none;
 border-top: 4px ridge;
 font-size:20px;
  border-color: #23303D;
}

#middle-stuff {
 box-sizing: border-box;
 width: 100%;
 height: 800px;
 background-image: url(https://i.postimg.cc/pVjLXYvW/dark-ice.png);
 padding: 20px;
}

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

.responsive-row-item {
  border-radius: 10px;
background: #17293b;
background: linear-gradient(0deg, rgba(23, 41, 59, 1) 0%, rgba(23, 41, 59, 1) 50%, rgba(42, 69, 102, 1) 100%);
 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 {
  text-align: left;
 box-sizing: border-box;
 padding: 15px;
 width: 100%;
 background: #5A7896;
background: linear-gradient(0deg, rgba(90, 120, 150, 1) 0%, rgba(90, 120, 150, 1) 50%, rgba(126, 172, 207, 1) 100%);
 font-size: 25px;
 border-radius: 20px;
 border: 2px solid;
 border-color: black;
 color: #EBFAFF;
}

.info-section {
  text-align: left;
 box-sizing: border-box;
 padding: 15px;
 width: 100%;
 background: #dedaad;
background: linear-gradient(0deg, rgba(222, 218, 173, 1) 0%, rgba(222, 218, 173, 1) 50%, rgba(240, 237, 201, 1) 100%);
 font-size: 20px;
 border-radius: 20px;
 border: 2px solid;
 border-color: black;
 color: #326632;
}

.about-textbox {
 box-sizing: border-box;
 width:100%; 
 background: #dedaad;
background: linear-gradient(0deg, rgba(222, 218, 173, 1) 0%, rgba(222, 218, 173, 1) 50%, rgba(240, 237, 201, 1) 100%);
 color: #326632;
 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: #5A7896;
background: linear-gradient(0deg, rgba(90, 120, 150, 1) 0%, rgba(90, 120, 150, 1) 50%, rgba(126, 172, 207, 1) 100%);
 height:20%;
 padding: 15px;
 border-radius: 20px;
 border: 2px solid;
 border-color: black;
}

#play-button {
  box-sizing: border-box;
 width: 100%;
 height: 100%;
 border: 4px outset;
 border-radius: 20px;
 border-color: #0E1A21;
font-size: 30px;
font-family: times;
font-weight: bold;
color: #A9BAC4;
}


#footer-box {
  padding: 30px;
  box-sizing: border-box;
 width: 100%;
 background-image: url(https://i.postimg.cc/L5kSkD4W/bed-linen-striped-dark.jpg);
 border-top: 4px ridge;
  border-color: #23303D;
 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%;
 
}

button {
background: #0e1a21;
background: linear-gradient(0deg, rgba(14, 26, 33, 1) 0%, rgba(14, 26, 33, 1) 50%, rgba(40, 59, 71, 1) 100%);
border-color: #0E1A21;
font-family: times;
font-weight: bold;
color: #A9BAC4;
font-size: 20px;
}

button:hover {
 cursor: pointer; 
 background: #080e12;
background: linear-gradient(0deg, rgba(8, 14, 18, 1) 0%, rgba(8, 14, 18, 1) 50%, rgba(25, 44, 56, 1) 100%);
}

span {
 font-family: times; 
}


/* 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 {
  
         padding: 10px;
       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%; 
      }
    
    }