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

html,body{
	margin:0;
	padding:0;
	color:#3c3024;
	font-family:'Libre Baskerville', serif;
	background-image:url("images/bg.jpg");
	background-repeat:repeat;
}
.divider{
	display:flex;
	align-items:center;
	justify-content:center;
	margin:70px 0;
	opacity:.9;
}
.divider::before,.divider::after{
	content:"";
	flex:1;
	height:2px;
	background:linear-gradient(to right,transparent,#8b6b2f,#d7b979,#8b6b2f,transparent);
}
.divider span{
	margin:0 18px;
	color:#6a5330;
	font-family:'Cinzel', serif;
	letter-spacing:.15em;
	text-transform:uppercase;
}
#header{
	background-image:url("images/head.jpg"),url("images/bg1.jpg");
	background-repeat:no-repeat, repeat-x;
	height:844px;
	background-position:center;
	width:100%;
	position:relative;
}
b,strong{
	color:#4d3817;
	padding:3px 12px;
	background:linear-gradient(#f5e6bc,#d9bf7c);
	border:1px solid #8b6b2f;
	border-radius:6px;
}
i,em{
	padding:2px 8px;
	border-radius:4px;
	background:rgba(139,107,47,.08);
	color:#71572f;
}
#layout-container{
	width:70%;
	max-width:1300px;
	margin:-60px auto 0;
	padding:50px;
	display:block !important;
	position:relative;
	z-index:5;
}
#navigation{
	position:absolute;
	bottom:-5%;
	right:15%;
	opacity:0.7;
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:14px;
	width:720px;
	padding:28px 36px;
	background:linear-gradient(rgba(235,224,196,.85),rgba(223,208,176,.85));
	border:1px solid #b89a5d;
	border-radius:10px;
	box-shadow:0 8px 20px rgba(0,0,0,.12);
	overflow:hidden;
	z-index:10;
}
#navigation a{
	position:relative;
	overflow:hidden;
	display:block;
	padding:14px 18px;
	font-family:'Cinzel', serif;
	font-size:15px;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:#5b4526;
	background:linear-gradient(#f5edd8,#e7d8b5);
	border:1px solid #c0a46a;
	border-radius:8px;
	text-decoration:none;
	text-align:center;
	transition:.25s ease;
}
#navigation a:hover{
	background:linear-gradient(#fbf5e8,#efdfbb);
	color:#3f2f1b;
	transform:translateY(-1px);
	box-shadow:0 4px 12px rgba(0,0,0,.08);
}
#navigation a::after{
	content:"";
	position:absolute;
	left:50%;
	bottom:6px;
	width:0;
	height:1px;
	background:#b89a5d;
	transform:translateX(-50%);
	transition:.3s ease;
}
#navigation a:hover::after{
	width:60%;
}
#navigation a::before{
	display:none;
}
.contentx{
	width:100% !important;
	flex:none !important;
	margin-top:80px;
	text-align:justify;
	padding:40px;
	font-size:21px;
	line-height:1.9;
	color:#3a2f24;
	border-radius:14px;
	opacity:0.7;
}
h1{
	position:relative;
	margin:0 auto 50px;
	padding:0 0 18px;
	text-align:center;
	text-transform:uppercase;
	font-family:'Cinzel Decorative', serif;
	font-weight:400;
	font-size:34px;
	letter-spacing:.22em;
	line-height:1.2;
	color:#5b4526;
	background:none;
	border:none;
	box-shadow:none;
	text-shadow:0 1px 0 rgba(255,255,255,.8),0 2px 8px rgba(139,107,47,.15);
}
h1::after{
	content:"❦";
	display:block;
	margin-top:14px;
	font-size:22px;
	color:#b89a5d;
	letter-spacing:0;
}
h1::before{
	content:"";
	position:absolute;
	left:50%;
	bottom:0;
	width:240px;
	height:1px;
	background:linear-gradient(90deg,transparent,#c9a867,transparent);
	transform:translateX(-50%);
}
h1 span{
	display:block;
	margin-top:10px;
	font-family:'Cormorant Garamond', serif;
	font-size:16px;
	font-style:italic;
	text-transform:none;
	letter-spacing:.12em;
	color:#8c6d3b;
}
blockquote{
	margin:70px auto;
	max-width:700px;
	padding:50px;
	font-family:'Lora', serif;
	font-size:30px;
	font-style:italic;
	color:#4b3923;
	background:linear-gradient(#f8efdc,#eadab5);
	border-left:8px solid #8b6b2f;
	border-radius:12px;
	box-shadow:0 10px 25px rgba(0,0,0,.12);
	position:relative;
}
blockquote::before{
	content:"❝";
	position:absolute;
	left:18px;
	top:10px;
	font-size:42px;
	color:#8b6b2f;
	opacity:.5;
}
.contentx a{
	color:#7a5521;
	text-decoration:none;
	position:relative;
}
.contentx a::after{
	content:"";
	position:absolute;
	left:0;
	bottom:-3px;
	width:100%;
	height:2px;
	background:linear-gradient(#d2af65,#8b6b2f);
	transform:scaleX(.4);
	transition:.3s;
}
.contentx a:hover::after{
	transform:scaleX(1);
}
textarea,input,select{
	width:88%;
	max-width:800px;
	padding:1.4rem;
	font-family:'Libre Baskerville', serif;
	color:#3a2f24;
	background:#f5edd7;
	border:1px solid #a98a4d;
	border-radius:40px;
	box-shadow:inset 0 2px 8px rgba(0,0,0,.06);
}
textarea:focus,input:focus,select:focus{
	outline:none;
	border-color:#8b6b2f;
	box-shadow:0 0 12px rgba(139,107,47,.2);
}
#footer{
	text-align:center;
	margin:120px auto 60px;
	letter-spacing:.25em;
	text-transform:uppercase;
	color:#6a5330;
}
#footer::before{
	content:"⚔ ❖ ⚔ ❖ ⚔";
	display:block;
	margin-bottom:15px;
	font-size:22px;
}
#footer a{
	text-decoration:none;
	color:#4d3817;
	padding:8px 18px;
	margin:0 6px;
	background:#ece0c3;
	border:1px solid #a37a36;
	border-radius:30px;
	transition:.3s;
}
#footer a:hover{
	background:#f6ecd4;
	color:#2d2115;
	transform:translateY(-2px);
}
@media(max-width:768px){
	#layout-container{
		padding:25px;
	}
	#navigation{
		position:relative;
		width:100%;
		right:auto;
		bottom:auto;
		margin:0 auto 30px;
		grid-template-columns:1fr;
	}
	.contentx{
		padding:28px;
		font-size:18px;
	}
	h1{
		font-size:32px;
		letter-spacing:.1em;
	}
	blockquote{
		font-size:24px;
		padding:35px;
	}
	textarea,input,select{
		width:100%;
	}
}