body {
  min-height: 100vh; /* Ensures that body takes up at least the viewport height */
  background: #eee4d4; /* Or use a wood texture image */
  padding: 50px 20px; /* Adjust as needed for spacing */
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0); /* Optional: adds depth */
  /* background-image: url('/pics/webp/wooden-background.webp');
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover; */
  /* Other styles as needed... */
}



/* .bs-container {	
  max-width: 800px;
  margin: 0 auto;
  background:#FFFFFF;	
  overflow:hidden;
  margin-bottom:0px;
  text-align:center;  
} */

.bs-container {
  max-width: 100%;
  margin: 0 auto;
  /* background: #FFFFFF; */
  position: relative; /* Adjust as needed */
  z-index: 1; /* Ensure it's above the bookshelf borders */
  /* Other styles... */
  text-align:center;  
  overflow:hidden;

}


/* Description for BookShelf /*/

.bs-description{
   font-family:Tahoma, Helvetica, sans-serif;
   margin-bottom:18px;
   margin-top:0px;
   color:#333333;	
}

.bs-description h3{
   font-size:30px;
   margin-bottom:20px;
   margin-top:0px;
   font-family:"Raleway";
   font-weight:200;
   color:#1c1c1c;   	
}

.bs-description h2{
  font-size:40px;
  margin-bottom:5px;
  margin-top:0px;
  font-family:"Raleway";
  font-weight:900;
  color:#1c1c1c;   	
}

.bs-description p{
   font-family:"Raleway";
   font-size:14px;
   margin-bottom:6px;
   margin-top:0px; 	
}


/* Shelf /*/

.bs-container .bs-shelf{	
	position:relative;
	height:150px;
	margin-bottom:10%;	
}

/* Shelf - image /*/
.bs-container .bs-shelf-images {
	height:100%;
}

.bs-container .bs-shelf-image {
  width: 140px;
  height: 100%;		
  display: inline-block;  
  vertical-align:bottom;  
  position:relative;  
  margin-top:0px;
  margin-bottom:0px;
  margin-left:0px;
  margin-right:0px;
  max-width: 100%;
  
  
}

.bs-container .bs-shelf-image:hover {
   
}

.bs-container .bs-shelf-image:last-child {
   
}

.bs-container .bs-shelf-image:first-child {
  
}

.bs-container .bs-shelf-image img {
  max-width:100%;
  max-height:100%;
  box-shadow: 0px 0px 3px #666666;  
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%); 
}


/* Image - textbox /*/

.bs-container .bs-shelf-image .bs-mask {	
	width:100%;
	height:100%;	
	pointer-events: none;
	overflow:hidden;
	position:relative;
}

.bs-container .bs-shelf-image .bs-textbox {
   position:absolute; 	
   background:#FFFFFF;
   width:100%;
   bottom:-100px;
   left:50%;  
    -webkit-transform: translateX(-50%);
   transform: translateX(-50%); 
   opacity:1; 
   padding:5px 0;
   pointer-events: none;     
}

.bs-container .bs-shelf-image .bs-textbox p {
  color:#000000;
  font-family:"Raleway";
  /* font-family:Tahoma, Helvetica, sans-serif; */
  font-size:11px;
  font-weight:1000; 
  margin:0;
  line-height:1.5;    
}



/* Shelf - background /*/

.bs-container .bs-shelf-background{
	position:absolute;
	border:0px solid #FF0000;
	left:0;
	bottom:-15px;
	width:100%;
	height:35px;
}

.bs-container .bs-shelf-background .bs-rectangle {
	    width:100%;
		height:100%;		
		border:0px solid #FFF000;
		position:absolute;
		top:0;
		left:0;		
		-webkit-transform: perspective(100px) rotateX(15deg);
        -webkit-transform-origin: 50% 100% 0;
		-ms-transform: perspective(100px) rotateX(15deg);
        -ms-transform-origin: 50% 100% 0;		
	   
	   
	    box-shadow: 0px 7px 1px #CCCCCC;			
		background: -moz-linear-gradient(top,  rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.06) 100%); 
		background: -webkit-linear-gradient(top,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.06) 100%); 
		background: linear-gradient(to bottom,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.06) 100%); 
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40000000', endColorstr='#0f000000',GradientType=0 );
}


.book {
  /* Styling for books on the shelf */
  cursor: pointer;
  transition: transform 1s ease;
}

/* Animation for 'opening' the book */
.book.open {
  transform: perspective(600px) rotateY(-360deg);
}

.bookshelf-top, .bookshelf-bottom, .bookshelf-left, .bookshelf-right {
  background-color: #E1BB77; /* A wood color */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Adds depth */
}

.bookshelf-top, .bookshelf-bottom {
  height: 20px; /* Thickness of top and bottom panels */
  width: 100%;
  position: absolute;
  left: 0;
}

.bookshelf-top {
  top: 0;
}

.bookshelf-bottom {
  bottom: 0;
}

.bookshelf-left, .bookshelf-right {
  width: 20px; /* Width of side panels */
  height: calc(100% - 40px); /* Adjust based on top and bottom panel height */
  position: absolute;
  top: 20px; /* Adjust based on top panel height */
}

.bookshelf-left {
  left: 0;
}

.bookshelf-right {
  right: 0;
}


.invisible-navbar {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: transparent;
	display: flex;
	justify-content: space-between;
	/* align-items: center; */
	padding: 80px;
	box-sizing: border-box;
	z-index: 1000;
}

.moon-icon img {
	height: 100%; /* Adjust as needed */
	transition: all 0.3s ease;
	position: absolute;
  top: 30px; 
  right: 30px; 
  /* transition: box-shadow 0.3s ease; */
}
.moon-icon {
	z-index: 1002;
}

.moon-icon img:hover {
	filter: drop-shadow(0 0 20px #37346F); /* Adjust color for the glow effect */
}

.email-icon img {
	height: 100%; /* Adjust as needed */
	transition: all 0.3s ease;
	position: absolute;
  top: 30px; 
  left: 30px; 
  /* transition: box-shadow 0.3s ease; */
}
.email-icon {
	z-index: 1002;
}

.email-icon img:hover {
	filter: drop-shadow(0 0 20px #97667B); /* Adjust color for the glow effect */
}

@media only screen and (max-width: 1400px) {
	.moon-icon img {
		height: 40%;

	}

	.email-icon img {
		height: 40%;
	}

}