html,body{
	margin:0;
	padding:0;
	min-height:100%;
	font-family:'Libre Baskerville',serif;
	font-size:17px;
	color:#d6d0cb;
	background:#0A0A0A;
	overflow-x:hidden;
}
body::before{
	content:"";
	position:fixed;
	inset:0;
	pointer-events:none;
	background:radial-gradient(circle at top,rgba(95,10,22,.18),transparent 45%),radial-gradient(circle at bottom,rgba(40,0,10,.35),transparent 65%);
	mix-blend-mode:screen;
	opacity:.45;
	z-index:-2;
}
#header{
	width:100%;
	height:560px;
	position:relative;
	background-image:url("images/head.jpg");
	background-position:center;
	background-repeat:no-repeat;
	overflow:hidden;
	background-color:#0A0A0A;
}
.main-container{
	position:relative;
	width:min(1600px,80%);
	margin:auto;
	margin-top:-40px;
	display:flex;
	flex-direction:column;
	gap:40px;
	z-index:5;
}
#navigation{
	display:grid;
	grid-template-columns:repeat(3, 220px);
	justify-content:center;
	gap:20px 24px;
	width:100%;
	margin:-40px auto 45px;
	animation:interference 8s infinite;
}
#navigation a{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	width:220px;
	height:92px;
	padding:0;
	text-align:center;
	text-decoration:none;
	text-transform:uppercase;
	letter-spacing:3px;
	font-family:"Cinzel Decorative",serif;
	color:#ece5df;
	background:linear-gradient(180deg,#64111d,#3b0c13 55%,#170608);
	border:1px solid #832434;
	border-radius:5px;
	box-shadow:inset 0 1px rgba(255,255,255,.05),0 10px 24px rgba(0,0,0,.45);
	transition:.35s;
}
#navigation a::after{
	content:"";
	position:absolute;
	left:-140%;
	top:0;
	width:80%;
	height:100%;
	background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
	transition:.7s;
}
#navigation a:hover::after{
	left:140%;
}
#navigation a::before{
	content:"✠";
	margin-bottom:10px;
	font-size:18px;
	color:#bf4255;
	transition:.35s;
}
#navigation a:hover{
	color:white;
	transform:translateY(-4px);
	border-color:#c54055;
	background:linear-gradient(180deg,#8b1b2b,#57101b,#25080d);
	box-shadow:0 12px 30px rgba(0,0,0,.7),0 0 28px rgba(170,20,45,.45);
	animation:scatter .4s ease;
}
#navigation a:hover::before{
	color:#ff8798;
	text-shadow:0 0 10px rgba(255,100,120,.6);
}
@keyframes scatter{
	0%{
		letter-spacing:3px;
		transform:translateY(0);
	}
	30%{
		letter-spacing:7px;
	}
	60%{
		letter-spacing:1px;
		transform:translateY(-2px);
	}
	100%{
		letter-spacing:3px;
	}
}
@keyframes interference{
	0%,100%{
		filter:none;
	}
	40%{
		filter:brightness(1.05) contrast(1.04);
	}
	42%{
		filter:brightness(.95);
	}
	44%{
		filter:none;
	}
}
@media (max-width:900px){
	#navigation{
		grid-template-columns:repeat(2, 220px);
	}
}
@media (max-width:600px){
	#navigation{
		grid-template-columns:1fr;
	}
	#navigation a{
		width:100%;
		max-width:320px;
		justify-self:center;
	}
}
#content{
	width:71%;
	max-width:1300px;
	margin:auto;
}
.contentx{
	opacity:0.7;
	position:relative;
	padding:48px;
	background:linear-gradient(180deg,rgba(42,10,16,.96),rgba(18,10,12,.96));
	border:1px solid #6b1d29;
	border-left:10px solid #8d2635;
	border-radius:6px;
        text-align:justify;
	color:#ddd7d1;
	line-height:1.95;
	letter-spacing:.4px;
	box-shadow:inset 0 0 40px rgba(255,255,255,.02),0 0 35px rgba(0,0,0,.65),0 0 22px rgba(80,5,15,.25);
}
.contentx::before{
	content:"";
	position:absolute;
	inset:10px;
	border:1px solid rgba(255,255,255,.03);
	pointer-events:none;
}
h1{
	display:inline-block;
	padding:22px 60px;
	margin-bottom:40px;
	font-family:"Cinzel Decorative",serif;
	font-size:32px;
	letter-spacing:7px;
	text-transform:uppercase;
	color:#f4efea;
	background:linear-gradient(180deg,#701421,#34080f);
	border:1px solid #9f3345;
	border-radius:3px;
	text-shadow:0 0 10px rgba(255,90,120,.25);
	box-shadow:0 10px 30px rgba(0,0,0,.55);
}
h2{
	font-family:"Cinzel",serif;
	font-size:28px;
	letter-spacing:3px;
	color:#f2e6df;
	margin-top:60px;
	border-bottom:1px solid #6e2631;
	padding-bottom:10px;
}
h3{
	font-family:"Cinzel",serif;
	color:#d4aab0;
	letter-spacing:2px;
	margin-top:45px;
}
p{
	margin:22px 0;
}
strong,b{
	background:#681723;
	color:white;
	padding:2px 8px;
	border-radius:3px;
	font-family:"Cinzel",serif;
	letter-spacing:1px;
}
em,i{
	color:#d79ca5;
	font-style:italic;
}
ul{
	padding-left:35px;
}
li{
	margin:10px 0;
}
li::marker{
	color:#b1384a;
}
a{
	color:#e4d6d0;
	text-decoration:none;
	border-bottom:1px solid #873140;
	transition:.3s;
}
a:hover{
	color:white;
	border-color:#d34d61;
	text-shadow:0 0 8px rgba(255,90,120,.35);
}
::selection{
	background:#8d2635;
	color:white;
}
blockquote{
	position:relative;
	margin:45px 0;
	padding:40px 55px;
	background:linear-gradient(135deg,#2b0b12,#171112);
	border-left:8px solid #a02f42;
	border-right:1px solid #56202a;
	border-top:1px solid #56202a;
	border-bottom:1px solid #56202a;
	border-radius:6px;
	color:#d7cdc7;
	font-style:italic;
	box-shadow:0 0 25px rgba(0,0,0,.55);
}
blockquote::before{
	content:"❝";
	position:absolute;
	top:12px;
	left:18px;
	font-size:56px;
	color:#8b2535;
	opacity:.4;
}
blockquote::after{
	content:"❞";
	position:absolute;
	bottom:8px;
	right:18px;
	font-size:56px;
	color:#8b2535;
	opacity:.4;
}
textarea,input,select{
	width:100%;
	max-width:650px;
	padding:18px;
	margin:15px 0;
	font-size:16px;
	font-family:inherit;
	color:#ece5df;
	background:linear-gradient(180deg,#221214,#171112)!important;
	border:1px solid #6f2430;
	border-radius:4px;
	transition:.35s;
	box-shadow:inset 0 0 14px rgba(0,0,0,.55);
}
textarea{
	min-height:180px;
	resize:vertical;
}
textarea:focus,input:focus,select:focus{
	outline:none;
	border-color:#c23f53;
	background:#241416;
	box-shadow:0 0 18px rgba(170,30,50,.35),inset 0 0 18px rgba(0,0,0,.45);
}
button,input[type="submit"]{
	padding:15px 28px;
	background:linear-gradient(180deg,#821c2c,#4d1019);
	border:1px solid #b13d50;
	color:white;
	font-family:"Cinzel",serif;
	letter-spacing:2px;
	text-transform:uppercase;
	cursor:pointer;
	transition:.35s;
}
button:hover,input[type="submit"]:hover{
	background:linear-gradient(180deg,#a32639,#61131f);
	box-shadow:0 0 20px rgba(180,20,45,.45);
}
hr{
	border:none;
	height:1px;
	margin:50px 0;
	background:linear-gradient(90deg,transparent,#822838,transparent);
}
img{
	max-width:100%;
	height:auto;
	display:block;
	border:1px solid #61202d;
	padding:8px;
	background:#161112;
	box-shadow:0 0 30px rgba(0,0,0,.55);
}
table{
	width:100%;
	border-collapse:collapse;
	margin:40px 0;
	background:#191214;
}
th{
	padding:16px;
	background:linear-gradient(180deg,#721727,#4a1018);
	color:white;
	font-family:"Cinzel",serif;
	letter-spacing:2px;
}
td{
	padding:16px;
	border:1px solid #492129;
	color:#ddd4ce;
}
tr:nth-child(even){
	background:#201618;
}
tr:hover{
	background:#2d171b;
}
code{
	padding:2px 7px;
	background:#2a181b;
	color:#ffb8c3;
	border-radius:3px;
	font-family:Consolas, monospace;
}
pre{
	padding:25px;
	overflow:auto;
	background:#161112;
	border-left:6px solid #912838;
	box-shadow:inset 0 0 20px rgba(0,0,0,.55);
}
#footer{
	position:relative;
	margin-top:120px;
	padding:120px 40px 45px;
	text-align:center;
	color:#cfc8c2;
	font-family:"Libre Baskerville",serif;
	font-size:15px;
	letter-spacing:.8px;
	line-height:1.9;
	background:transparent;
	overflow:hidden;
}
#footer::before{
	content:"";
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:180px;
	background:linear-gradient(to bottom,transparent 0%,rgba(18,8,10,.15) 20%,rgba(18,8,10,.45) 55%,rgba(12,6,8,.85) 100%);
	z-index:-2;
}
#footer::after{
	content:"";
	position:absolute;
	top:55px;
	left:50%;
	transform:translateX(-50%);
	width:320px;
	height:22px;
	background:radial-gradient(circle,#8b2d3f 1px,transparent 2px)center/18px 18px repeat-x;
	opacity:.45;
}
#footer a{
	color:#d8d2cc;
	border-bottom:1px solid rgba(145,45,60,.25);
	transition:.35s;
}
#footer a:hover{
	color:white;
	border-color:#b9475a;
}
::-webkit-scrollbar{
	width:12px;
}
::-webkit-scrollbar-track{
	background:#120d0f;
}
::-webkit-scrollbar-thumb{
	background:linear-gradient(#7d1d2e,#481019);
	border-radius:20px;
}
::-webkit-scrollbar-thumb:hover{
	background:#a32d42;
}
@keyframes slowFade{
	from{
		opacity:0;
		transform:translateY(20px);
	}
	to{
		opacity:1;
		transform:none;
	}
}
.contentx{
	animation:slowFade .8s ease;
}
h1,h2,blockquote{
	transition:.35s;
}
h1:hover{
	text-shadow:0 0 18px rgba(180,40,70,.55);
}
blockquote:hover{
	border-left-color:#c63f52;
	transform:translateX(6px);
}
@media (max-width:900px){
	#header{
		height:380px;
	}
	.main-container{
		width:95%;
		margin-top:-50px;
	}
	.contentx{
		padding:28px;
	}
	h1{
		font-size:24px;
		letter-spacing:3px;
		padding:18px 30px;
	}
	#navigation{
		gap:10px;
	}
	#navigation a{
		min-width:140px;
		font-size:13px;
		padding:14px 18px;
	}
}
@media (max-width:650px){
	#navigation{
		flex-direction:column;
	}
	#navigation a{
		width:100%;
	}
	.contentx{
		padding:22px;
	}
}
