/*!

-------------------------------------------------------------- */
*{ margin:0; padding:0;}

/* = Global
-------------------------------------------------------------- */
body {
    font-family: 'Cardo', Arial, sans-serif;
    background: url() no-repeat center center fixed;
    background-size: cover; /* Ensure the background covers the entire page */
	background-color: rgb(94, 13, 128);
}
	.txt-right{
		text-align:right;
	}
	.demo-title{
		height:32px;
		font-size:32px; color:#0c5e26; text-align:center;
		margin:30px 0 44px 0;
		text-shadow:0 2px 4px rgba(41,48,58,0.3); 
	}
#book {
    width: 420px;
    height: 560px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transition-duration: .5s;
    -moz-transition-duration: .5s;
    -ms-transition-duration: .5s;
    -o-transition-duration: .5s;
    transition-duration: .5s;
    -webkit-perspective: 2000px;
    -moz-perspective: 2000px;
    -ms-perspective: 2000px;
    -o-perspective: 2000px;
    perspective: 2000px;
}
#book::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    z-index: -1; /* Ensures the glow is behind the book */
    background: rgba(255, 215, 0, 0.6); /* Golden glow color */

    filter: blur(15px); /* Adjust the blur for the size of the glow */
    border-radius: 10px; /* If your book has rounded corners, adjust accordingly */
}
.main {
    width: 420px;
    height: 560px;
    color: #0c5523;
    position: relative;
    transform-style: preserve-3d;
    transition-duration: .5s;
}

/* = Book Font
-------------------------------------------------------------- */
	.book-font{
		width:420px; height:560px;
		position:absolute; top:0; bottom:0;
		font-size:15px; text-align:center;
		text-shadow:0 2px 0 rgba(30,35,45,1);
		box-shadow:inset 3px 0 10px rgba(0,0,0,0.1); /* 给书本添加光照阴影 */
		z-index:10;
		-webkit-transform-style:preserve-3d;
		-moz-transform-style:preserve-3d;
		-ms-transform-style:preserve-3d;
		-o-transform-style:preserve-3d;
		transform-style:preserve-3d;

		-webkit-transform-origin:0% 50%;
		-moz-transform-origin:0% 50%;
		-ms-transform-origin:0% 50%;
		-o-transform-origin:0% 50%;
		transform-origin:0% 50%;

		-webkit-transition-duration:.5s;
		-moz-transition-duration:.5s;
		-ms-transition-duration:.5s;
		-o-transition-duration:.5s;
		transition-duration:.5s;

		-webkit-transform:translate3d(0,0,25px); /* 对应关系-1 */
		-moz-transform:translate3d(0,0,25px);
		-ms-transform:translate3d(0,0,25px);
		-o-transform:translate3d(0,0,25px);
		transform:translate3d(0,0,25px);
	}
.book-cover {
    width: 420px;
    height: 560px;
    overflow: hidden;
    position: absolute;
    top: 0;
    bottom: 0;
    background: #7BFFA5; /* Cool green color */

}

	.book-cover-back{
		width:420px; height:560px;
		position:absolute; top:0; bottom:0;
		background: #7BFFA5;
		-webkit-transform-style:preserve-3d;
		-moz-transform-style:preserve-3d;
		-ms-transform-style:preserve-3d;
		-o-transform-style:preserve-3d;
		transform-style:preserve-3d;

		-webkit-backface-visibility:hidden;
		-moz-backface-visibility:hidden;
		-ms-backface-visibility:hidden;
		-o-backface-visibility:hidden;
		backface-visibility:hidden;

		-webkit-transform:rotate3d(0,1,0,-180deg);
		-moz-transform:rotate3d(0,1,0,-180deg);
		-ms-transform:rotate3d(0,1,0,-180deg);
		-o-transform:rotate3d(0,1,0,-180deg);
		transform:rotate3d(0,1,0,-180deg);
	}
	.title{
		margin:0px 0 0px 0;
		height:38px;
		font-size:38px;
	}
	.author{
		height:20px;
		font-size:20px;
	}
	.publisher{
		width:100%;
		position:absolute;
		bottom:22px;
	}

/* = Book Page
-------------------------------------------------------------- */
	.book-page{
    
    overflow-y: auto;
		width:415px; height:550px;
		line-height:20px;
		position:absolute; top:5px;
		z-index:9;
		box-shadow:inset 3px 0 10px rgba(0,0,0,0.1);



		-webkit-transform:translate3d(0,0,24px); /* 这里的Z坐标 一定要比封面页的低 否则旋转的时候 渲染时会导致层叠*/
		-moz-transform:translate3d(0,0,24px);
		-ms-transform:translate3d(0,0,24px);
		-o-transform:translate3d(0,0,24px);
		transform:translate3d(0,0,24px);
	}

	.book-page {
    /* display: flex; */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.book-page h2 {
    margin-bottom: 1rem;
	margin-top: -2.5rem; /* Adjust the value to add desired space */
}

.book-page p {
    margin-top: 0px; /* Adjust the value to add desired space */
	margin-bottom: 3rem;
	width: 80%;
	margin-right: auto;
	margin-left: auto;
	font-size: 2rem;
}

.book-page img {
	width:80%; /* Adjust the value to resize the image */
	height: auto; /* Adjust the value to resize the image */
	margin-bottom: 1rem;;
	margin-top: 2rem;
	border: #d29a0b 3px solid;
} /* Adjust the value to add desired space */

.book-page a {
	text-decoration: none;
	color: #d29a0b;
	font-size: 1rem;
	font-weight: bold;
	border: #d29a0b 3px solid;
	padding: 0.5rem 1rem;
	/* border-radius: 999px; */
	margin-top: -3rem;
	background-color: white;
}

.book-page a:hover{
	background-color: #d29a0b;
	color: white;
}

.book-page a:active{
	background-color: whitesmoke;
	color: black;
	border: #EEEFE9;
	transform: scale(0.95);
}

.book-cover-back p {
	color: #0c4c20;
	text-shadow: none;
}

#view-back {
	width: 12rem;
	height: 3rem;
	/* border-radius: 999px; */
	border: #7BFFA5 3px solid;
}

#view-back:hover {
	background-color: #7BFFA5;
	color: white;
}

#view-back:active {
	background-color: whitesmoke;
	color: black;
	border: #EEEFE9;
	transform: scale(0.95);
}

	.book-page h2{
		font-size:20px;
		margin-bottom:20px;
	}

	.page-number{
		width:100%;
		font-size:14px;
		text-align:center;
		position:absolute;
		bottom:10px;
	}

	.page{
		height:500px;
		margin:30px 40px;
		overflow:hidden;
	}
	.book-page h3{
		font-size:14px;
		text-align:center;
		margin-bottom:14px;
	}
	.book-page p{
		font-size:13px;
		margin-bottom:14px;
	}
	.page-number{
		width:100%;
		font-size:13px;
		text-align:center;
		position:absolute;
		bottom:10px;
	}

/* = Book Back
-------------------------------------------------------------- */
	.book-back{
		width:420px;
		background:#7BFFA5
;
		text-align: center;
		position:absolute; top:0; bottom:0;
		color:#0c4c20;
		-webkit-transform:rotate3d(0,1,0,-180deg) translate3d(0,0,25px);
		-moz-transform:rotate3d(0,1,0,-180deg) translate3d(0,0,25px);
		-ms-transform:rotate3d(0,1,0,-180deg) translate3d(0,0,25px);
		-o-transform:rotate3d(0,1,0,-180deg) translate3d(0,0,25px);
		transform:rotate3d(0,1,0,-180deg) translate3d(0,0,25px);
		z-index:8;
	}
	.book-back .description{
		font-size:14px;
		line-height:20px;
		margin-top:50px;
		padding:10px 20px 10px 30px;
		background:rgba(255,255,255,0);

	}
	.book-back p{
		padding:5px 0;
	}
	.isbn{
		position:absolute;
		bottom:20px; left:30px;
	}

	.book-back a {
		color: #0c4c20
		;
	}

/* = Book Bone
-------------------------------------------------------------- */
	.book-bone{
		width:50px;
		background:#7BFFA5
;
		box-shadow:1px 0 0 #d19691,-1px 0 0 #29303A; /* 旋转的时候 拼接处隐隐约约会有个缝隙 所以加上个阴影来填补它 */
		position:absolute;
		top:0; bottom:0; left:-25px;
		-webkit-transform:rotate3d(0,1,0,-90deg);
		-moz-transform:rotate3d(0,1,0,-90deg);
		-ms-transform:rotate3d(0,1,0,-90deg);
		-o-transform:rotate3d(0,1,0,-90deg);
		transform:rotate3d(0,1,0,-90deg);
	}
	.book-bone h2{
		width:530px;
		height:50px; line-height:50px; /* 对应关系-1 */
		font-size:14px; text-align:right;
		padding:0 15px;
		-webkit-transform-origin:0 0;
		-moz-transform-origin:0 0;
		-ms-transform-origin:0 0;
		-o-transform-origin:0 0;
		transform-origin:0 0;

		-webkit-transform:rotate(90deg) translateY(-50px); /* 对应关系-1 */
		-moz-transform:rotate(90deg) translateY(-50px);
		-ms-transform:rotate(90deg) translateY(-50px);
		-o-transform:rotate(90deg) translateY(-50px);
		transform:rotate(90deg) translateY(-50px);
	}
	.book-bone span{ font-size:14px; padding-right:20px;}

/* = Order
-------------------------------------------------------------- */
	.book-cover:after,.book-back:after{ /*  */
		content:"";
		width:3px;
		position:absolute; top:0; left:10px; bottom:0;
		background:rgba(0,0,0,0.06);
		box-shadow:1px 0 3px rgba(255, 255, 255, 0.1);
	}
	.book-page,.book-top,.book-right,.book-bottom{
		background:#EEEFE9;
	}
	.book-right{
		width:50px; height:550px;
		position:absolute; top:5px; right:-20px;
		box-shadow:0 1px 0 #EEEFE9,0 -1px 0 #EEEFE9;
		-webkit-transform:rotate3d(0,1,0,90deg);
		-moz-transform:rotate3d(0,1,0,90deg);
		-ms-transform:rotate3d(0,1,0,90deg);
		-o-transform:rotate3d(0,1,0,90deg);
		transform:rotate3d(0,1,0,90deg);
	}
	.book-top{
		width:415px; height:50px;
		position:absolute; top:-20px; left:0;
		-webkit-transform:rotate3d(1,0,0,90deg);
		-moz-transform:rotate3d(1,0,0,90deg);
		-ms-transform:rotate3d(1,0,0,90deg);
		-o-transform:rotate3d(1,0,0,90deg);
		transform:rotate3d(1,0,0,90deg);
	}
	.book-bottom{
		width:415px; height:50px;
		position:absolute; bottom:-20px; left:0;
		-webkit-transform:rotate3d(1,0,0,-90deg) translate3d(0,0,0);
		transform:rotate3d(1,0,0,-90deg) translate3d(0,0,0);
	}
	.book-right,.book-top,.book-bottom{
		-webkit-backface-visibility:hidden;
		-moz-backface-visibility:hidden;
		-ms-backface-visibility:hidden;
		-o-backface-visibility:hidden;
		backface-visibility:hidden;
	}

/* = Flip
-------------------------------------------------------------- */
	/* Cover */
	.view-cover:hover .main{
		-webkit-transform:rotate3d(0,1,0,-40deg);
		-moz-transform:rotate3d(0,1,0,-40deg);
		-ms-transform:rotate3d(0,1,0,-40deg);
		-o-transform:rotate3d(0,1,0,-40deg);
		transform:rotate3d(0,1,0,-40deg);
	}
	/* Cover Back */
	.view-back .main{
		-webkit-transform:rotate3d(0,1,0,180deg);
		-moz-transform:rotate3d(0,1,0,180deg);
		-ms-transform:rotate3d(0,1,0,180deg);
		-o-transform:rotate3d(0,1,0,180deg);
		transform:rotate3d(0,1,0,180deg);
	}
	.view-back:hover .main{
		-webkit-transform:rotate3d(0,1,0,140deg);
		-moz-transform:rotate3d(0,1,0,140deg);
		-ms-transform:rotate3d(0,1,0,140deg);
		-o-transform:rotate3d(0,1,0,140deg);
		transform:rotate3d(0,1,0,140deg);
	}
	/* Open */
	.open-book{
		-webkit-transform:translate3d(50%,0,0);
		-moz-transform:translate3d(50%,0,0);
		-ms-transform:translate3d(50%,0,0);
		-o-transform:translate3d(50%,0,0);
		transform:translate3d(50%,0,0);
	}
	.open-book  .book-font{
		-webkit-transform:translate3d(0,0,25px) rotate3d(0,1,0,-160deg);
		-moz-transform:translate3d(0,0,25px) rotate3d(0,1,0,-160deg);
		-ms-transform:translate3d(0,0,25px) rotate3d(0,1,0,-160deg);
		-o-transform:translate3d(0,0,25px) rotate3d(0,1,0,-160deg);
		transform:translate3d(0,0,25px) rotate3d(0,1,0,-160deg);
	}
	.open-book:hover .main{
		-webkit-transform:rotate3d(1,1,0,15deg);
		-moz-transform:rotate3d(1,1,0,15deg);
		-ms-transform:rotate3d(1,1,0,15deg);
		-o-transform:rotate3d(1,1,0,15deg);
		transform:rotate3d(1,1,0,15deg);
	}
	/* View Right */
	.view-rotate .main{


		-webkit-transform:rotate3d(0,1,0,360deg);
		-moz-transform:rotate3d(0,1,0,360deg);
		-ms-transform:rotate3d(0,1,0,360deg);
		-o-transform:rotate3d(0,1,0,360deg);
		transform:rotate3d(0,1,0,360deg);
	}
	.view-rotate:hover .main{


		-webkit-transform:rotate3d(0,1,0,-360deg);
		-moz-transform:rotate3d(0,1,0,-360deg);
		-ms-transform:rotate3d(0,1,0,-360deg);
		-o-transform:rotate3d(0,1,0,-360deg);
		transform:rotate3d(0,1,0,-360deg);
	}

/* = Opt
-------------------------------------------------------------- */
	#opt{
		width:150px;
		line-height:30px;
		text-align:center;
		padding:10px 10px 5px 10px;
		background:rgba(255,255,255,0.4);
		position:fixed; top:10%; right:6%;
		z-index:100px;
	}
	#opt:after{
		content:"";
		width:105%; height:104%;
		position:absolute; top:-4%; left:-5%;
		border:4px solid rgba(255,255,255,0.3);
		z-index:-1;
	}
	#opt dt{
		margin-bottom:5px;
		border-bottom:1px solid rgba(0,0,0,0.1);
	}
	#opt dd{
		color:#999;
		cursor:pointer;
		background:rgba(170,170,170,0.1);
		margin-bottom:5px;
	}
	#opt dd:hover{
		color:rgba(255,255,255,0.8);
		box-shadow:inset 2px 0 0 rgba(85,85,85,0.2);
		background:rgba(85,85,85,0.4);
	}
	#opt .cur{
		color:black;
		box-shadow:inset 2px 0 0 rgba(85,85,85,0.2);
		background:rgba(85,85,85,0.2);
	}

#control-panel {
    position: absolute;
    top: calc(50% + 350px); /* Adjust the distance from the top as needed */
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes gifKeepAlive {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(1deg);
    }
}

.gif-animation-keep-alive {
    animation: gifKeepAlive 60s infinite linear;
}


#media-player {
  margin: 20px;
  }
  
  #controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
  }
  
  #controls button,
  #volume {
	padding: 5px 10px;
	margin-right: 10px;
	cursor: pointer;
  }
  
  #progress {
	width: 100%;
	-webkit-appearance: none;
	appearance: none;
  }
  

.book-page-info{
	color: #0c4c20
	;
	font-style: normal;
	margin-top: 150px;
	text-shadow: none;
}

.description a{
	color: #0c4c20 !important;
}


.pagecover {
	position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
	overflow: hidden;
    /* height: 100%; */
    transform: translate(-50%, -50%);
    background: url('./files/background.png') center center / cover no-repeat;
}