body {
   background-image: url(https://i.postimg.cc/XqfzSGfq/puzzle-house-tv-room-blur.png);
        background-size: cover;
        background-repeat: no-repeat;
   display: grid;
   place-items: center; 
}

#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%;
 overflow: hidden; 
 padding: 15px;
}

.column-flex {
  width: 100%;
  box-sizing: border-box;
 display: flex;
 flex-direction: column;
 gap: 10px;
 }
 
 #tv {
   box-sizing: border-box;
  width: 100%;
  height: 700px;
  background: #212121;
background: linear-gradient(0deg, rgba(33, 33, 33, 1) 0%, rgba(33, 33, 33, 1) 50%, rgba(66, 66, 66, 1) 100%);
border: 5px outset;
border-color: #212121;
border-radius: 5px;
display: flex;
flex-direction: column;
padding: 30px;
gap: 15px;
 }
 
 #title-div {
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  background: #573831;
  background: linear-gradient(0deg, rgba(87, 56, 49, 1) 0%, rgba(143, 88, 54, 1) 50%, rgba(166, 113, 80, 1) 100%);
  padding: 10px;
  font-size: 40px;
  font-family: impact;
  border-radius: 10px;
  border: 7px outset;
  border-color: #573831;
  color:#120606;
 }
 
 #instruction-div {
    box-sizing: border-box;
  width: 100%;
  text-align: center;
  background: #573831;
  background: linear-gradient(0deg, rgba(87, 56, 49, 1) 0%, rgba(143, 88, 54, 1) 50%, rgba(166, 113, 80, 1) 100%);
  padding: 10px;
  font-size: 20px;
  font-family: impact;
  border-radius: 10px;
  border: 7px outset;
  border-color: #573831;
  color:#120606;
 }
 
 .decor-white {
   box-sizing: border-box;
   width: 100%;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 }
 
 .decor-white-item {
   box-sizing: border-box;
  height: 20px;
  width: 25%;
  background-color: white;
  border-radius: 10px;
  border: 3px outset;
 }
 
 .static-flex-row {
   box-sizing: border-box;
  display: flex;
  flex-direction: row;
  gap: 15px;
 }
 
 .static-flex-row div {
   height: 500px;
 }
 
 #screen {
    box-sizing: border-box;
  background: #0c0d0c;
background: linear-gradient(0deg, rgba(12, 13, 12, 1) 0%, rgba(29, 33, 29, 1) 50%, rgba(47, 54, 42, 1) 100%);
  width: 80%;
  border-radius: 10px;
  border: 3px inset;
  border-color: black;
 }
 
 iframe {
   width: 100%;
   height: 100%;
   border-radius: 10px;
 }
 
 .decor-speaker {
   box-sizing: border-box;
   width: 20%;
   background-color: #000000;
   border-radius: 10px;
   border: 3px outset;
   border-color: black;
 }
 
 .decor-buttons-container {
   width:100%;
   display: flex;
   justify-content: center;
 }
 
 .button-background {
   box-sizing: border-box;
  background-color: black;
  height: 80px;
  width: 550px;
  display: flex;
  justify-content: center;
  padding: 20px;
  gap: 10px;
  border-radius: 10px;
  border: 3px outset;
  border-color: black;
 }
 
 .button {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background: #616161;
background: linear-gradient(0deg, rgba(97, 97, 97, 1) 0%, rgba(138, 138, 138, 1) 50%, rgba(199, 199, 199, 1) 100%);
  border: 3px outset;
  border-color: black;
  
 }
 
 #red-button {
  background: #691010;
background: linear-gradient(0deg, rgba(105, 16, 16, 1) 0%, rgba(201, 28, 28, 1) 50%, rgba(255, 48, 48, 1) 100%);
border-color: #691010;
 }
 
 #shelf {
   box-sizing: border-box;
  width: 100%;
  background: #573831;
background: linear-gradient(0deg, rgba(87, 56, 49, 1) 0%, rgba(143, 88, 54, 1) 50%, rgba(166, 113, 80, 1) 100%);
border-radius: 10px;
border: 7px outset;
border-color: #573831;
display: flex;
justify-content: center;
padding: 20px;
height: 400px;
 }
 
 .shelf-backing {
 background: #2B1F1E;
background: linear-gradient(0deg, rgba(43, 31, 30, 1) 0%, rgba(43, 31, 30, 1) 50%, rgba(20, 17, 17, 1) 100%);
  width: 100%;
  height: 100%;
  overflow: auto;
  border: 5px inset;
  border-color: #1f1615;
  box-sizing: border-box;
 }
 
 .a-shelf {
  box-sizing: border-box;
  height: 200px;
  width:100%;
  display: flex;
  flex-direction: column;
  background-color: red; 
 }
 
  .shelf-container {
   box-sizing: border-box;
  width: 100%;
  height:80%;
  background: #2B1F1E;
background: linear-gradient(0deg, rgba(43, 31, 30, 1) 0%, rgba(43, 31, 30, 1) 50%, rgba(20, 17, 17, 1) 100%);
display: flex;
flex-direction: row;
justify-content:space-between;
padding-right: 15px;
padding-left: 15px;
padding-top: 15px;
 }
 
  .shelf-detail {
    background: #573831;
background: linear-gradient(0deg, rgba(87, 56, 49, 1) 0%, rgba(143, 88, 54, 1) 50%, rgba(166, 113, 80, 1) 100%);
box-sizing: border-box;
height: 20%;
width:100%;
border:2px outset;
border-color: #573831;
 }
 
  .book-cover {
   box-sizing: border-box;
   width: 20%;
   height: 100%;
   display: flex;
   border: 1px solid;
   border-radius: 2px;
   flex-direction: column;
   transition: transform 0.5s ease, filter 0.2s ease; 
 }
 
 a {
  width: 100%;
  height: 100%;
 }
 
 button {
   width: 100%;
   height:100%;
   padding: 0;
   background: none;
   border: none;
 }
 
 button:hover {
  cursor: pointer; 
 }
 
 button img {
   width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
 }
 
 .book-cover:hover {
   transform: scale(1.05);  
   filter: drop-shadow(1px 1px 5px white);
 }
 
 #rhb-div {
  width: 100%; 
 }
 
 #return-home-button {
   box-sizing:border-box;
  width: 100%;
  font-size: 30px;
  font-family: impact;
  background: #573831;
  background: linear-gradient(0deg, rgba(87, 56, 49, 1) 0%, rgba(143, 88, 54, 1) 50%, rgba(166, 113, 80, 1) 100%);
  padding: 10px;
  border-radius: 10px;
  border: 7px outset;
  border-color: #573831;
  color:#120606;
 }
 
 #return-home-button:hover {
   background: #261c19;
background: linear-gradient(0deg, rgba(38, 28, 25, 1) 0%, rgba(61, 41, 36, 1) 50%, rgba(87, 56, 49, 1) 100%);
cursor: pointer;
color: #E6BDB5;
 }
 
 @media screen and (max-width: 768px) {
      
      #content {
       width: 100%; 
       min-width: 0;
      }
      
      #mass-holder {
       width: 100%; 
       max-height: none;
       min-height: 0;
       padding: 5px;
      }
      
      .responsive-flex {
       flex-direction: column; 
      }
      
      #shelf {
       width: 100%; 
       height: 400px;
      }
      
      .decor-speaker {
       display: none; 
      }
      
      #screen {
       width: 100%;
      }
      
      iframe {

      }
}