@font-face {
  font-family: Enchanted Land;
  src: url(https://files.catbox.moe/dnrmh0.otf);
}

body {
	color: black;
	background-image: url("https://files.catbox.moe/cb86v0.gif");
	font-family: "Times New Roman", serif;
	margin: 0px;
}

h3 {
	font-family: "Enchanted Land", "Times New Roman", serif;
	font-size: 30px;
	margin-top:10px;
	color: #830025;
}

a {
	color: #830025;
	transition-duration: 0.2s;
}
a:hover {
	letter-spacing: 1px;
	color: #778c2e;
	font-weight: bold;
}


header {
	height: 100px;
	margin-bottom: -50px;
	background-color: red;
	background-image: url(https://files.catbox.moe/qhu5g8.gif);
	filter: drop-shadow(1px 1px 3px black);
}

header img {
	filter: drop-shadow(1px 1px 3px black);	
}

.vertical-text{
	position: absolute;
	z-index: 1;
	left: 10px;
	top: 10px;
	font-size: 36px;
	writing-mode: vertical-rl;
	text-orientation: upright;
	color:white;
	text-shadow: 0 0 3px black, 0 0 5px black;
	font-family: "Enchanted Land", "Times New Roman", serif;
}

.flying-button {
	position: relative;
	z-index: 1;
	right: 40px;
	height: 50px;
	transition-duration: 0.2s;
	filter: drop-shadow(1px 1px 3px black);
	top: 80px;
	left: 95px;
	display: inline-block;
}
.flying-button:hover {
	transform: scale(1.15);
}

#book-layout {
	position: relative;
	width: 850px;
	height: 600px;
	background-image: url("https://files.catbox.moe/gg3rmp.jpg");
	background-size: contain;
	background-repeat: no-repeat;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	filter: drop-shadow(4px 4px 4px black);
	margin: auto;
	margin-top: -40px;

}

.book-decoration {
	position: absolute; 
	z-index: 2;
}

#left-page {
	width: 330px;
	height: 480px;
	position: relative;
	left: 70px;
	top: 50px;
}

.intro {
	width: 200px;
	position:relative;
	left: 105px;
	top: 40px;
	text-align: center;
	padding: 5px;
}

#right-page {
	width: 310px;
	height: 500px;
	position: relative;
	right: 70px;
	top: 30px;
}

#reading_iframe {
	width: 100%;
	height: 500px;
	border: none;
}

footer {
	height: 10px;
}

.mobile-button {
	display: none;
}

@media screen and (max-width: 800px) {
	header {
		margin-bottom: 0px;
	}
	
	#book-layout {
		background-image: none;
		width: 100%;
		justify-content: center;
		margin-top: 20px;
		gap: 20px;
		margin-bottom: 20px;
		height: auto;
	}
	
	.book-decoration {
		display: none;
	}
	
	#left-page {
		position: static;
		background-image: url("https://files.catbox.moe/h4tltp.html");
		width: 75%;
		height: auto;
	}
	
	.intro {
		width: 90%;
		position: static;
		margin: auto;
	}
	
	#right-page {
		position: static;
		background-image: url("https://files.catbox.moe/h4tltp.html");
		width: 75%;
	}
	
	iframe {
		margin: 5px;
	}
	
	.flying-button {
		display: none;
	}
	
	.mobile-button {
		display: block;
		text-align: center;
		margin-bottom: 10px;
	}
	
	.no-mobile {
		display: none;
	}
}