body {
 background-image: url(https://bettysgraphics.neocities.org/images/backgrounds/pattern%20360.jpg);
   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%;
background: #6987c7;
background: linear-gradient(0deg, rgba(105, 135, 199, 1) 0%, rgba(105, 135, 199, 1) 50%, rgba(184, 206, 255, 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;
 }
 
 .responsive-flex {
   width: 100%;
  display: flex;
  flex-direction: row;
   box-sizing: border-box;
   gap: 10px;
 }
 
 
 .rfi {
  height: 800px; 
 }
 
 .rfi-shelf {
  box-sizing: border-box;
  width: 60%;
  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;
 }
 
 .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;
 }
 .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;
 }
 
 
 .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; 
 }
 
 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);
 }
 
 .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;
 }
 
.rfi-info {
   box-sizing: border-box;
  width: 40%;
  background-color: pink;
  padding: 15px;
}

/* BOOK INFORMATION STYLE */

#large-cover {
  width: 100%;
  height: 450px;
 box-sizing: border-box;
 background-color: white;
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center;
 
}

/* BOOK INFORMATION STYLE */

@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-shelf {
       width: 100%; 
      }
      
      .rfi-info {
       width: 100%; 
      }
    
      
}