#header {
    background-image: url('images/head.jpg'),url('images/bg.jpg');
    background-repeat: no-repeat, repeat;
    background-position: center;
    height: 495px;
    width: 100%;
    position: relative;
    z-index: 0;
}

@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative&family=Libre+Baskerville&family=Noto+Sans+Runic&family=Alumni+Sans+Pinstripe&display=swap');

body{
	background:radial-gradient(circle at top,rgba(110,0,0,.22) 0%,rgba(20,20,20,.55) 35%,rgba(5,5,5,.82) 70%,rgba(0,0,0,.97) 100%),linear-gradient(to bottom,rgba(30,0,0,.45),rgba(0,0,0,.92)),url("images/bg1.jpg") repeat;
	background-attachment:fixed;
	margin:0;
	padding:0;
	font-family:"Cormorant Garamond", serif;
	color:#ddd7d2;
}
#navigation {
	width: 100%;
	margin-top: 0;
	padding: 48px 0;
	display: flex;
	justify-content: center;
	gap: 40px;
	position: relative;
	background: linear-gradient(to bottom, #1a0000 0%, #090909 100%);
	border-top: 1px solid #5c0000;
	border-bottom: 1px solid #5c0000;
	box-shadow:0 0 20px rgba(120,0,0,.35),inset 0 1px rgba(180,0,0,.15),inset 0 -1px rgba(0,0,0,.8);
}
#navigation a{
	position:relative;
	padding:8px 18px;
	font-family:"Cinzel",serif;
	font-size:17px;
	font-weight:700;
	letter-spacing:3px;
	text-transform:uppercase;
	color:#b31217;
	text-decoration:none;
	transition:.35s;
}
#navigation a::before{
	content:"✠";
	color:#650000;
	margin-right:8px;
	transition:.35s;
}
#navigation a::after{
	content:"";
	position:absolute;
	left:0;
	bottom:-5px;
	width:100%;
	height:1px;
	background:linear-gradient(to right,transparent,#990000,#d10000,#990000,transparent);
	transform:scaleX(0);
	transform-origin:center;
	transition:.35s;
}
#navigation a:hover{
	color:#f5f5f5;
	text-shadow:0 0 6px #990000,0 0 12px #4d0000;
}
#navigation a:hover::before{
	color:#d20000;
	text-shadow:0 0 10px crimson;
}
#navigation a:hover::after{
	transform:scaleX(1);
}
#content{
	width:70%;
	margin:20px auto 0;
	padding-bottom:20px;
	position:relative;
}
.contentx{
	background:rgba(8,8,8,.78);
	color:#d9d4cf;
	border:1px solid #2f0000;
	border-radius:4px;
	box-shadow:0 0 25px rgba(100,0,0,.15);
	padding:35px 45px;
	font-size:19px;
	line-height:1.9;
	letter-spacing:.6px;
	text-align:justify;
}
#content::before,#content::after{
	position:absolute;
	top:20px;
	bottom:20px;
	white-space:pre;
	font-family:"Cinzel",serif;
	color:rgba(120,0,0,.45);
	line-height:1.9;
	font-size:15px;
	content:"✠\A❦\A✠\A❦\A✠\A❦\A✠\A❦\A✠\A❦\A✠";
}
#content::before{
	left:-25px;
}
#content::after{
	right:-25px;
}
blockquote{
	max-width:900px;
	margin:60px auto;
	padding:35px 45px;
	background:rgba(0,0,0,.55);
	border-left:4px solid #770000;
	color:#e0dbd5;
	font-family:"Cormorant Garamond",serif;
	font-size:24px;
	font-style:italic;
	line-height:1.8;
	box-shadow:inset 0 0 25px rgba(120,0,0,.15),0 0 20px rgba(0,0,0,.5);
}
blockquote::before{
	content:"❝";
	color:#8d0000;
	font-size:60px;
	display:block;
	line-height:.4;
	margin-bottom:18px;
}
blockquote::after{
	content:"";
}
h1{
	display:inline-block;
	font-family:"UnifrakturCook",cursive;
	font-size:42px;
	color:#b30000;
	letter-spacing:4px;
	text-shadow:0 0 10px rgba(170,0,0,.6),2px 2px 5px #000;
}
a{
	color:#b51212;
	text-decoration:none;
	position:relative;
	transition:.35s;
}
a::after{
	content:"";
	position:absolute;
	left:0;
	bottom:-2px;
	width:100%;
	height:1px;
	background:linear-gradient(to right,transparent,#8a0000,#d30000,#8a0000,transparent);
	transform:scaleX(0);
	transition:.35s;
}
a:hover{
	color:#ffffff;
	text-shadow:0 0 8px #b00000,0 0 14px #500000;
}
a:hover::after{
	transform:scaleX(1);
}
b,strong{
	font-family:"Cinzel",serif;
	font-weight:700;
	color:#c61a1a;
	padding:2px 5px;
	letter-spacing:1px;
	position:relative;
	text-shadow:0 0 6px rgba(170,0,0,.35);
	transition:.35s;
}
b::before,b::after,strong::before,strong::after{
	content:"✠";
	color:#630000;
	font-size:11px;
	margin:0 3px;
	transition:.35s;
}
b:hover,strong:hover{
	color:#ffffff;
	text-shadow:0 0 10px #b00000,0 0 18px #550000;
}
b:hover::before,b:hover::after,strong:hover::before,strong:hover::after{
	color:#d40000;
	transform:scale(1.15);
}
i,em{
	font-family:"Cormorant Garamond",serif;
	font-style:italic;
	color:#ded8d3;
	position:relative;
	transition:.35s;
}
i::before,i::after,em::before,em::after{
	content:"❦";
	color:#6a0000;
	font-size:11px;
	margin:0 4px;
	transition:.35s;
}
i:hover,em:hover{
	color:#ffffff;
	text-shadow:0 0 8px rgba(170,0,0,.45);
}
i:hover::before,i:hover::after,em:hover::before,em:hover::after{
	color:#bf0000;
	transform:scale(1.2);
}
textarea,input,select{
	width:70%;
	max-width:500px;
	padding:14px 18px;
	margin:16px 0;
	font-family:"Cormorant Garamond",serif;
	font-size:17px;
	color:#e3ddd8;
	background:linear-gradient(#141414,#090909)!important;
	border:1px solid #550000;
	border-radius:3px;
	box-shadow:inset 0 0 10px rgba(120,0,0,.18),0 0 10px rgba(0,0,0,.4);
	caret-color:#d00000;
	transition:.35s;
}
textarea:focus,input:focus,select:focus{
	outline:none;
	border-color:#b10000;
	box-shadow:inset 0 0 10px rgba(170,0,0,.3),0 0 15px rgba(170,0,0,.45);
	background:#111;
}
#footer{
	margin-top:90px;
	padding:55px 20px 35px;
	text-align:center;
	font-family:"Cinzel",serif;
	color:#7f7f7f;
	background:linear-gradient(to bottom,#0d0d0d,#000);
	border-top:1px solid #4d0000;
	box-shadow:inset 0 1px rgba(120,0,0,.15);
}
#footer::before{
	content:"✠ ❦ ✠ ❦ ✠";
	display:block;
	margin-bottom:18px;
	font-size:22px;
	letter-spacing:12px;
	color:#730000;
	text-shadow:0 0 8px rgba(150,0,0,.35);
}
#footer::after{
	content:"❦ ✠ ❦ ✠ ❦";
	display:block;
	margin-top:18px;
	font-size:18px;
	letter-spacing:10px;
	color:#520000;
}
#footer p,#footer a{
	color:#a9a9a9;
	font-family:"Cormorant Garamond",serif;
	text-decoration:none;
	transition:.35s;
}
#footer a::before,#footer a::after{
	content:"✠";
	color:#5d0000;
	margin:0 6px;
	transition:.35s;
}
#footer a:hover{
	color:#ffffff;
	text-shadow:0 0 8px rgba(170,0,0,.5);
}
#footer a:hover::before,#footer a:hover::after{
	color:#c00000;
	transform:scale(1.15);
}
