@import url('https://fonts.googleapis.com/css2?family=Lora&family=Cinzel+Decorative&family=Merriweather&family=Spectral&display=swap');

html,body{
	height:100%;
	margin:0;
	padding:0;
	background-image:url(images/bg.jpg);
	background-attachment:fixed;
	background-repeat:repeat;
	color:#ece7e4;
	font-size:18px;
	font-family:"Lora",serif;
	overflow-x:hidden;
}
::selection{
	background:#a30016;
	color:white;
}
::-moz-selection{
	background:#a30016;
	color:white;
}
::-webkit-scrollbar{
	width:14px;
}
::-webkit-scrollbar-track{
	background:#090909;
}
::-webkit-scrollbar-thumb{
	background:linear-gradient(#2b0000,#7b0000,#2b0000);
	border-radius:20px;
	border:2px solid #090909;
}
::-webkit-scrollbar-thumb:hover{
	background:linear-gradient(#520000,#b00000,#520000);
}
#wrapper{
	width:100%;
	min-height:100%;
	position:relative;
}
hr{
	border:none;
	height:1px;
	background:linear-gradient(to right,transparent,#700000,#d1001f,#700000,transparent);
	margin:40px 0;
}
img{
	max-width:100%;
	height:auto;
	display:block;
}
table{
	border-collapse:collapse;
	width:100%;
}
td{
	padding:8px;
}
#header{
	position:relative;
	width:100%;
	height:568px;
	overflow:hidden;
	background-image:url("images/head.jpg"),url("images/bg.jpg");
	background-repeat:no-repeat,repeat;
	background-position:center center,top left;
}
#navigation{
	width:64%;
	margin:-45px auto 50px;
	padding:22px;
	position:relative;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	gap:18px;
	z-index:50;
	border:1px solid #5b0000;
	border-top:5px solid #b00000;
	border-radius:0 0 18px 18px;
	background:linear-gradient(180deg,rgba(20,20,20,.96),rgba(6,6,6,.98));
	box-shadow:0 18px 45px rgba(0,0,0,.75),0 0 25px rgba(130,0,0,.35),inset 0 0 35px rgba(130,0,0,.10);
}
#navigation::before{
	content:"";
	position:absolute;
	inset:0;
	pointer-events:none;
	border-radius:inherit;
	box-shadow:inset 0 0 40px rgba(180,0,0,.10);
}
#navigation::after{
	content:"";
	position:absolute;
	inset:0;
	opacity:.05;
	pointer-events:none;
	background-image:linear-gradient(45deg,transparent 48%,rgba(255,255,255,.15) 50%,transparent 52%);
}
#navigation a{
	position:relative;
	overflow:hidden;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	min-width:170px;
	padding:14px 26px;
	text-decoration:none;
	text-transform:uppercase;
	letter-spacing:2px;
	font-size:20px;
	font-weight:700;
	font-family:'Cinzel Decorative',serif;
	color:#ece7e3;
	background:linear-gradient(180deg,#1a1a1a,#070707);
	border:1px solid #570000;
	border-radius:6px;
	transition:.35s;
	text-shadow:0 0 6px rgba(255,0,0,.20);
	box-shadow:inset 0 0 20px rgba(255,0,0,.05);
}
#navigation a::before{
	content:"ᛉ";
	color:#c00000;
	font-size:20px;
	transition:.35s;
	text-shadow:0 0 8px red;
}
#navigation a span{
	position:relative;
	z-index:3;
}
#navigation a::after{
	content:"";
	position:absolute;
	top:-100%;
	left:-35%;
	width:30px;
	height:250%;
	background:rgba(255,255,255,.18);
	transform:rotate(25deg);
	transition:.7s;
}
#navigation a:hover{
	color:white;
	border-color:#d1001f;
	background:linear-gradient(180deg,#380000,#120000);
	transform:translateY(-5px);
	box-shadow:0 0 20px rgba(255,0,0,.45),inset 0 0 18px rgba(255,0,0,.15);
}
#navigation a:hover::before{
	color:#ff4040;
	text-shadow:0 0 18px red,0 0 30px red;
}
#navigation a:hover::after{
	left:140%;
}
#navigation a.active{
	background:linear-gradient(#4d0000,#1a0000);
	border-color:#ff2d2d;
	color:white;
	box-shadow:0 0 25px rgba(255,0,0,.60);
}
#navigation a .blood{
	position:absolute;
	top:-3px;
	right:22px;
	width:5px;
	height:18px;
	background:#8b0000;
	border-radius:0 0 12px 12px;
	animation:menuBlood 3s infinite;
}
h1{
	font-family:'Cinzel Decorative',serif!important;
	font-size:23px;
	text-transform:uppercase;
	letter-spacing:4px;
	margin-bottom:30px;
	padding-bottom:14px;
	position:relative;
	color:#f4dcdc;
	text-shadow:0 0 6px #8b0000,0 0 15px rgba(180,0,0,.45),2px 2px 5px #000;
	border-bottom:4px double #4a0000;
}
h1::after{
	content:"☩";
	position:absolute;
	left:0;
	bottom:-12px;
	font-size:24px;
	color:#d60000;
	text-shadow:0 0 10px #ff0000,0 0 20px #8b0000;
}
a:link,a:visited{
	color:#d53a3a;
	font-size:24px;
	font-family:'Alumni Sans Pinstripe',sans-serif;
	font-weight:700;
	letter-spacing:1px;
	text-decoration:none;
	display:inline-block;
	position:relative;
	transition:.4s;
}
a::after{
	content:'';
	position:absolute;
	left:0;
	bottom:-3px;
	width:100%;
	height:2px;
	background:linear-gradient(to right,#4b0000,#ff1f1f,#4b0000);
	transform:scaleX(0);
	transform-origin:left;
	transition:.4s;
}
a:hover::after{
	transform:scaleX(1);
}
a:hover{
	color:#fff4f4;
	text-shadow:0 0 8px #ff2d2d,0 0 15px #8b0000;
}
.drip-symbol{
	display:inline-block;
	position:relative;
	font-family:'Cinzel Decorative',serif;
	font-size:34px;
	color:#c40000;
	text-shadow:0 0 10px #ff0000,0 0 18px #700000;
	animation:pulse 2s infinite;
}
.drip-symbol::after{
	content:"🩸";
	position:absolute;
	top:100%;
	left:50%;
	transform:translateX(-50%);
	font-size:18px;
	animation:drip 2.5s infinite ease-in;
}
@keyframes pulse{
	0%,100%{
		text-shadow:0 0 8px #8b0000,0 0 15px #600000;
	}
	50%{
		text-shadow:0 0 15px red,0 0 30px crimson;
	}
}
@keyframes drip{
	0%{
		opacity:.8;
		transform:translateX(-50%) translateY(0) scale(1);
	}
	50%{
		opacity:1;
		transform:translateX(-50%) translateY(10px) scaleY(1.5);
	}
	100%{
		opacity:0;
		transform:translateX(-50%) translateY(30px);
	}
}
blockquote{
	font-family:'Lora',serif;
	font-size:26px;
	line-height:1.8;
	color:#f0e6e6;
	background:linear-gradient(145deg,#090909,#170707,#090909);
	border-left:8px solid #8b0000;
	border-radius:14px;
	padding:30px 40px;
	box-shadow:0 0 30px rgba(120,0,0,.25),inset 0 0 40px rgba(255,0,0,.05);
	position:relative;
	text-shadow:1px 1px 2px #000;
}
blockquote::before{
	content:"☩";
	position:absolute;
	top:-18px;
	left:18px;
	font-size:42px;
	color:#5a0000;
	opacity:.3;
	text-shadow:0 0 15px red;
}
textarea,input,select{
	width:100%;
	max-width:600px;
	padding:14px 18px;
	background:#090909!important;
	color:#f5e8e8;
	border:2px solid #520000;
	border-radius:12px;
	box-shadow:inset 0 0 12px rgba(255,0,0,.05);
	font-family:'Spectral',serif;
	font-size:17px;
	transition:.3s;
	caret-color:#ff2d2d;
}
textarea:focus,input:focus,select:focus{
	outline:none;
	border-color:#b00000;
	background:#050505;
	box-shadow:0 0 18px rgba(255,0,0,.4),inset 0 0 12px rgba(255,0,0,.08);
}
#content{
	width:66%;
	margin:30px auto;
	padding-bottom:80px;
}
.contentx{
	margin:0 0 130px;
	padding:30px;
	font-family:'Lora',serif;
	font-size:18px;
	line-height:30px;
	letter-spacing:3px;
	text-align:justify;
	color:#ece0e0;
	background:linear-gradient(145deg,rgba(10,10,10,.95),rgba(25,0,0,.90),rgba(10,10,10,.95));
	border:1px solid rgba(120,0,0,.45);
	border-radius:28px;
	box-shadow:0 0 30px rgba(80,0,0,.25),inset 0 0 25px rgba(255,0,0,.04);
	backdrop-filter:blur(3px);
}
#navigation a .blood::after{
	content:"";
	position:absolute;
	bottom:-6px;
	left:50%;
	transform:translateX(-50%);
	width:10px;
	height:10px;
	background:#a00000;
	border-radius:50%;
}
#navigation{
	backdrop-filter:blur(6px);
}
@keyframes menuBlood{
	0%{
		transform:translateY(0);
		opacity:.8;
	}
	40%{
		transform:translateY(6px);
	}
	70%{
		transform:translateY(12px);
		opacity:1;
	}
	100%{
		transform:translateY(0);
		opacity:.8;
	}
}
@media (max-width:900px){
	#navigation{
		width:95%;
		padding:15px;
	}
	#navigation a{
		width:100%;
	}
}