@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&display=swap');

html,body {
	margin: 0;
	padding: 0;
	min-height: 100%;
	font-family: 'Lora', serif;
	font-size: 20px;
	line-height: 1.8;
	background-image:url('images/bg.jpg');
	background-repeat:repeat;
	color: #cfcfcf;
}
body::before {
	content: '';
	position: fixed;
	inset: 0;
	pointer-events: none;
	background:radial-gradient(circle at 15% 20%, rgba(122,16,16,.12), transparent 250px),radial-gradient(circle at 85% 75%, rgba(122,16,16,.10), transparent 300px),radial-gradient(circle, rgba(255,255,255,.02) 1px, transparent 1px);
	background-size: auto, auto, 8px 8px;
	opacity: .8;
	z-index: 1;
}
#header {
	height: 662px;
	width: 100%;
	position: relative;
	overflow: hidden;
	background-position: center;
	background-image:url('images/head.jpg'),url('images/bg.jpg');
	background-repeat: no-repeat,repeat;
	margin-top: -1px;
}
#footer {
	height: 100px;
}
#main-container {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 30px;
	width: 90%;
	max-width: 1300px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}
#navigation {
	width: 220px;
	flex: none;
	margin-top:-120px;
	padding: 35px 30px 60px;
	position: relative;
	background-image:url('images/nav.png');
	background-repeat:no-repeat;
	background-color: #141010;
	border: 1px solid #5a5a5a;
	border-radius: 0;
	box-shadow:0 0 50px rgba(0,0,0,.8),inset 0 0 30px rgba(122,16,16,.08);
	overflow: visible;
}
#navigation::before {
	content:'';
	position:absolute;
	width:10px;
	height:22px;
	background:#8b0000;
	border-radius:0 0 20px 20px;
	left:72%;
	bottom:-18px;
	box-shadow:-110px 8px 0 #7a0000,-45px -2px 0 #920000,60px 12px 0 #760000;
	animation: drip 4s infinite ease-in-out;
}
@keyframes drip {
	0%,100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(12px);
	}
}
#navigation::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -55px;
	height: 60px;
	background:linear-gradient(#6f0000,#4a0000);
	clip-path: polygon(0 0,100% 0,100% 18px,94% 18px,94% 50px,91% 60px,88% 50px,88% 18px,76% 18px,76% 42px,73% 55px,70% 42px,70% 18px,57% 18px,57% 35px,54% 50px,51% 35px,51% 18px,34% 18px,34% 55px,31% 60px,28% 55px,28% 18px,12% 18px,12% 45px,9% 55px,6% 45px,6% 18px,0 18px);
	box-shadow:0 0 15px rgba(150,0,0,.5),0 8px 20px rgba(0,0,0,.5);
}
#navigation a {
	display: block;
	margin: 14px 0;
	padding: 12px 16px;
	position: relative;
	color: #d6d6d6;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 14px;
	font-weight: 700;
	border-left: 2px solid transparent;
	background:linear-gradient(90deg,rgba(122,16,16,0),rgba(122,16,16,0));
	transition: .35s;
}
#navigation a:hover {
	color: #ffffff;
	padding-left: 24px;
	border-left: 2px solid #aa1111;
	background:linear-gradient(90deg,rgba(122,16,16,.55),rgba(122,16,16,.15),transparent);
	text-shadow:0 0 8px rgba(255,50,50,.6);
	box-shadow:inset 0 0 20px rgba(122,16,16,.15);
}
#navigation a::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background:linear-gradient(90deg,#5a0000,#c51616,#5a0000);
	transition: .4s;
}
#navigation a:hover::before {
	width: 100%;
}
@keyframes bloodpulse {
	0% {
		filter:drop-shadow(0 0 5px rgba(139,0,0,.5));
	}
	50% {
		filter:drop-shadow(0 0 14px rgba(180,0,0,.9));
	}
	100% {
		filter:drop-shadow(0 0 5px rgba(139,0,0,.5));
	}
}
.contentx {
	flex: 1;
	opacity:0.8;
	margin-top: -40px;
	padding: 60px;
	position: relative;
	overflow: hidden;
	background:linear-gradient(135deg,#d4d8dc 0%,#c4c9ce 30%,#b4bac0 70%,#a5acb3 100%);
	color: #1c1c1c;
	border: 1px solid #7b8288;
	box-shadow:0 20px 40px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.5);
}
.contentx::before {
	content:'';
	position:absolute;
	inset:12px;
	border:1px solid rgba(170,180,190,.15);
	box-shadow:inset 0 0 20px rgba(255,255,255,.03),0 0 15px rgba(0,0,0,.4);
	pointer-events:none;
}
.contentx::after {
	content:'';
	position:absolute;
	right:-150px;
	top:-150px;
	width:450px;
	height:450px;
	background:radial-gradient(circle,rgba(110,0,0,.15) 0%,rgba(110,0,0,.05) 35%,transparent 70%);
	pointer-events:none;
}
h1 {
	font-family: 'Cinzel', serif;
	font-size: 64px;
	letter-spacing: 10px;
	text-transform: uppercase;
	text-align: center;
	color: #e1e4e7;
	text-shadow:0 1px 0 rgba(255,255,255,.08),0 2px 0 rgba(0,0,0,.5),0 0 20px rgba(120,0,0,.25);
	border-top: 1px solid rgba(120,0,0,.3);
	border-bottom: 1px solid rgba(120,0,0,.3);
	padding: 18px 0;
	background:linear-gradient(90deg,transparent,rgba(120,0,0,.08),transparent);
}
h1::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 280px;
	height: 3px;
	transform: translateX(-50%);
	background:linear-gradient(90deg,transparent,#5a0000,#a10000,#5a0000,transparent);
	box-shadow:0 0 10px rgba(160,0,0,.6);
}
h1::before {
	content: '✠';
	position: absolute;
	left: 50%;
	top: -25px;
	transform: translateX(-50%);
	font-size: 18px;
	color: #8b0000;
	text-shadow:0 0 10px rgba(139,0,0,.6);
}
.contentx .blood-seam {
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:4px;
	background:linear-gradient(90deg,#3d0000,#a00000,#3d0000);
	box-shadow:0 0 12px rgba(180,0,0,.8);
}
p {
	margin-bottom: 1.2em;
}
strong,b {
	color: #f0f0f0;
	font-weight: 600;
}
em,i {
	color: #9c9c9c;
	font-style: italic;
}
a {
	color: #b53a3a;
	text-decoration: none;
	border-bottom: 1px dotted rgba(181,58,58,.45);
	transition: .25s ease;
}
a:hover {
	color: #e26b6b;
	border-bottom-color: #e26b6b;
}
.manga-separator {
	text-align: center;
	margin: 30px 0;
	color: rgba(122,16,16,.5);
	font-size: 22px;
	letter-spacing: 12px;
}
.manga-separator::before,.manga-separator::after {
	content: '';
	display: block;
	width: 40%;
	height: 1px;
	margin: 18px auto;
	background: linear-gradient(to right,transparent,rgba(122,16,16,.6),transparent);
}
blockquote {
	position: relative;
	margin: 35px 0;
	padding: 35px 40px;
	background:linear-gradient(135deg,rgba(52,52,52,.97),rgba(32,32,32,.97));
	border-left: 4px solid #7a1010;
	border-radius: 18px;
	box-shadow:0 0 30px rgba(0,0,0,.7),inset 0 0 20px rgba(122,16,16,.08);
	color: #d7d7d7;
}
blockquote::before {
	content: '❝';
	position: absolute;
	left: 18px;
	top: -10px;
	font-size: 64px;
	color: rgba(122,16,16,.18);
	line-height: 1;
}
blockquote h1 {
	text-align: left;
	font-size: 30px;
}
table {
	width: 100%;
	border-collapse: collapse;
	background: #2c2c2c;
	border-radius: 12px;
	overflow: hidden;
}
th {
	font-family: 'Cinzel', serif;
	font-weight: 400;
	letter-spacing: 2px;
	background: #3b3b3b;
	color: #e0e0e0;
}
table,th,td {
	border: 1px solid #4a4a4a;
}
th,td {
	padding: 14px;
}
input,select,textarea {
	width: 50%;
	padding: 14px 18px;
	margin: 12px 0;
	font-family: inherit;
	font-size: 17px;
	color: #000000;
	background: #222;
	border: 1px solid #4a4a4a;
	border-radius: 14px;
	transition: .3s ease;
}
input:focus,select:focus,textarea:focus {
	outline: none;
	border-color: #7a1010;
	box-shadow: 0 0 15px rgba(122,16,16,.35);
}
hr {
	border: none;
	height: 1px;
	background: linear-gradient(to right,transparent,rgba(122,16,16,.7),transparent);
	margin: 50px 0;
}
@media (max-width: 1024px) {
	#main-container {
		flex-direction: column;
		align-items: center;
	}
	#navigation {
		width: 90%;
	}
	.contentx {
		width: calc(100% - 40px);
	}
}
@media (max-width: 768px) {
	.contentx {
		padding: 35px 25px;
		margin-top: -40px;
	}
	h1 {
		font-size: 30px;
		letter-spacing: 2px;
	}
	input,select,textarea {
		width: 100%;
	}
}
@media (max-width: 480px) {
	html,body {
		font-size: 18px;
	}
	#header {
		height: 360px;
	}
	h1 {
		font-size: 26px;
	}
}