body {
	margin: 0;
	background-color: #000;
	color: #fff;
	font-family: Monospace;
	font-size: 13px;
	line-height: 24px;
	overscroll-behavior: none;
	overflow: hidden;
    margin: 0;
}
	
canvas {
	display: block;
}
#container:focus {
	outline: none;
  }
canvas:focus {
	outline: none;
  }
.header{
	position:absolute;
	z-index: 21;
	top:0px;
	/* width:100px; */
	padding-bottom: 10px;
	padding-right:20px;;
	/* background-color: #3b3d3b; */
	opacity: 0.7;
	
}
#bottomLine{
	
	position:absolute;
	z-index:20;
	bottom:30px;
	/* background: rgb(35, 47, 58); */
	height: 72px;
	width: 100%;
	vertical-align: middle;
	align-items: center;
	display:inline-flex;
	opacity:.9;
	/* right:vw; */
	display:none;
	
  }
  ul{
	list-style-type:none;
}
#cube{
	/* align-items: center; */
	padding:10px 13px 10px 13px;
	border-radius: 50%;
	background-color: grey;
	margin-left:50px;
	margin-top:15px;
}
#cube:hover{
	background-color: white;
}
#cube:active{
	background-color: white;
}
#eye{
	/* align-items: center; */
	/* padding:5px 10px 5px 10px; */
	border-radius:50%;
	background-color:grey;
	margin-left:20px;
	margin-top:15px;
	padding:9px;
}
#eye:hover{
	background-color: white;
}
#eye:active{
	background-color:white;
}

i{
	padding:3px;
	font-size:27px;
	 color:black;
}
.guideSign{
	padding:1px;
	background-color: white;
	position:absolute;
	z-index:20;
	top:calc(50% - 150px);
	left: calc(50% - 150px);
	width: 300px;
	align-items: center;
	opacity:.9;
	display: none;
	
}
.close{
	z-index:21;
	position: absolute;
	cursor: pointer;
	right:-15px;
	top:-15px;
	width:20px;
	height: 30px;
	border:none;
	border-radius: 50%;
	background-color: black;
	color:white;
	opacity:1;
	padding:9px;
	display:inline-table;
	padding-top:2px;
}
.close:hover{
	background-color:white;
	color:black
}
#title{
	margin:15px;
	margin-left:27px;
	
	color:black;
}
#content{
	color:black;
	font-size: 15px;
	margin:0px 0px 7px 50px;
}
#guideImg{
	width:290px;
	margin-left:3px;
	margin-top: 3px;
}
#startTour{
	margin:auto;
	outline:none;
	background-color:black;
	color:white;
	border:none;
	margin-left:10px;
	margin-right:10px;
	margin-bottom:10px;
	width: -webkit-fill-available;
	font-size:17px;
}
#closeBook{
	z-index:21;
	position: absolute;
	cursor: pointer;
	right:-15px;
	top:-15px;
	width:20px;
	height: 30px;
	border:none;
	border-radius: 50%;
	background-color: black;
	color:white;
	opacity:1;
	padding:1px 9px 1px 9px;
	display:inline-table;
	font-size:20px;
	
}
.bookList{
	padding:1px;
	background-color: white;
	position:absolute;
	z-index:20;
	top:calc(50% - 150px);
	left: calc(50% - 250px);
	width: 500px;
	align-items: center;
	/* opacity:.9; */
	visibility: hidden;
}

#bookImage{
	margin:20px;
	width:150px;
	height:225px;
}
#bookTitle{
	margin:15px;
	margin-left:27px;
	
	color:black;
}
#author{
	color:black;
	font-size: 15px;
	margin-left:10px;
	margin-right:20px;
}
#bookContent{
	color:black;
	margin:auto;
	/* margin:15px; */
	
}
#buttonList{
	/* margin-left:100px; */
	 /* margin-right:100px; */
	 /* margin:auto; */
	 justify-content: center;
	 display:flex;
}
#contentOutline{
	display:inline-block;
	margin-left:40px;
	margin-right:40px;
}
#readMore{
outline:none;
background-color: black;
color:white;
border:none;
width:15vw;
font-size:20px;
border-radius: 10%;
margin:4px;
padding:8px;
}
#readMore:hover{
	opacity:0.8;
}
#before{
	background-color: #000;
	
	width:40px;
	height:30px;

	border-radius: 16%;
	padding:4px 5px 4px 10px;
	display: inline-table;

	align-items: center;
	margin:6px;
}
#before:hover{
	opacity:0.7;
}
#after{
	background-color: #000;
	
	width:40px;
	height:30px;

	border-radius: 16%;
	padding:4px 5px 4px 10px;
	display: inline-table;

	align-items: center;
	margin:6px;
}
#after:hover{
	opacity:0.7;
}
#right{
	margin-left:10px;
	width:40px;
	height:40px;
	background-color: white;
	border-radius: 16%;
	padding:10px 18px 10px 18px;
	display: inline-table;

	align-items: center;
}
#left{
	margin-right:10px;
	width:40px;
	height:40px;
	background-color: white;
	border-radius: 16%;
	padding:10px 18px 10px 18px;
	display: inline-table;

	align-items: center;
}
#up{
	width:40px;
	height:40px;
	background-color: white;
	border-radius: 16%;
	padding:10px 18px 10px 18px;
	display: inline-table;

	align-items: center;
}
#down{
	width:40px;
	height:40px;
	background-color: white;
	border-radius: 16%;
	padding:10px 18px 10px 18px;
	display: inline-table;

	align-items: center;
}
  
  
@media only screen and (max-width: 1366px) {
	#bottomLine{
		right:40vw;
	}

  }  
@media only screen and (max-width: 1024px) {
	#bottomLine{
		right:50vw;
	}


  }  
	@media only screen and (max-width: 992px) {
		#range {
		  margin-left:2vw;;
		}
		.next{
			margin-right:6vw;
		}
	  }
	  @media only screen and (max-width: 823px) {
		#bottomLine{
			right:50vw;
		}
	
	  }  
	  @media only screen and (max-width: 731px) {
		#bottomLine{
			right:50vw;
		}
		#bookImage{
			margin:8px;
			width:180px;
			height:200px;
		}
		#bookTitle{
			margin:10px;
			/* margin-left:27px; */
			
			color:black;
		}
		#readMore{
			outline:none;
			background-color: black;
			color:white;
			border:none;
			width:40vw;
			font-size:20px;
			border-radius: 10%;
			height:40px;
			margin:6px 5px 9px 5px;
			}
	
		#contentOutline{
			margin:2px;
		}
		#bookContent{
			margin:15px;
		}


	  }  
	@media only screen and (max-width: 640px) {
		#bottomLine{
			right:50vw;
		}
		#bookImage{
			margin:8px;
			width:180px;
			height:200px;
		}
		#bookTitle{
			margin:10px;
			/* margin-left:27px; */
			
			color:black;
		}
		#readMore{
			outline:none;
			background-color: black;
			color:white;
			border:none;
			width:40vw;
			font-size:20px;
			border-radius: 10%;
			height:40px;
			margin:6px 5px 9px 5px;
			}
			
			#dots{
				display:none;
			}

	  }
	@media only screen and (max-width: 414px) {
		#bottomLine{
		right:70vw;
		}
		.bookList{
			padding:1px;
			background-color: white;
			position:absolute;
			z-index:20;
			top:calc(50% - 150px);
			left: calc(50% - 150px);
			width: 300px;
			align-items: center;
			/* opacity:.9; */
			/* visibility: hidden; */
		}
		#bookImage{
			margin:5px;
			width:130px;
			height:200px;
		}
		#bookTitle{
			margin:5px;
			/* margin-left:27px; */
			
			color:black;
		}
		#author{
			color:black;
			font-size: 15px;
			/* margin-left:10px;
			margin-right:20px; */
		}
		#bookContent{
			color:black;
			margin:auto;
			/* margin:15px; */
			
		}
		
		#readMore{
			outline:none;
			background-color: black;
			color:white;
			border:none;
			width:40vw;
			font-size:20px;
			border-radius: 10%;
			height:40px;
			margin:6px 5px 9px 5px;
			}
	  }