body {
        background: #b8e1ff;
background: linear-gradient(0deg, rgba(184, 225, 255, 1) 0%, rgba(232, 245, 255, 1) 50%, rgba(240, 248, 255, 1) 100%);
        display: grid;
        background-size: cover;
        background-repeat: no-repeat;
         background-attachment: fixed; 
        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;
}

#mass-holder {
 box-sizing: border-box;
 width: 100%;
background: #8f8fb8;
background: linear-gradient(0deg, rgba(143, 143, 184, 1) 0%, rgba(109, 109, 181, 1) 50%, rgba(109, 109, 181, 1) 100%);
 border: 2px inset;
 border-color: #4B67A3;
 border-radius:15px;
 overflow: hidden; 
 padding: 15px;
}

.column-flex {
  width: 100%;
  box-sizing: border-box;
 display: flex;
 flex-direction: column;
 gap: 10px;
 }
 
 #title-div {
   box-sizing: border-box;
   text-align: center;
  width: 100%;
  font-size: 40px;
  font-weight: bold;
  background-color: lightyellow;
  padding: 20px;
  border-radius: 20px;
 }
 
 #game-holder-div {
  box-sizing: border-box;
  text-align: center;
  width: 100%;
  background-color: lightyellow;
  padding: 10px;
  border-radius: 20px;
 }
 
 .responsive-flex {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
 }
 
 .direction-text-box {
  box-sizing: border-box;
   width: 100%;
  background-color: lightyellow;
  padding: 10px;
  border-radius: 20px;
  font-size: 20px;
 }
 
 #footer {
   box-sizing: border-box;
   width: 100%;
  background-color: lightyellow;
  padding: 10px;
  border-radius: 20px;
  display: flex;
  flex-direction: row;
  gap: 10px;
 }
 
 #rhb-div {
  box-sizing: border-box;
   width: 100%; 
 }
 
 #return-home-button {
   box-sizing: border-box;
   width: 100%;
  font-family: tahoma; 
  font-size: 20px;
  height: 100%;
  border-radius: 20px;
 }
 
 span {
  font-family: tahoma;  
 }