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

html, body {
	margin:0;
	font-family:'Libre Baskerville', serif;
}
body{
	background:#080808;
	color:#fff;
	padding-bottom:160px;
}
#header {
	background: url("images/head.jpg"), url("images/bg1.jpg");
	background-position:center;
	height:537px;
	width:100%;
	position:relative;
	background-repeat:no-repeat, repeat-x;
}
b,strong{
	color:#000;
	padding:2px 10px;
	border-radius:10px;
	background:linear-gradient(120deg,#fff,#ccc,#fff);
	border:1px solid #fff;
	box-shadow:0 0 12px rgba(255,255,255,.25);
}
i,em{
	background:rgba(255,255,255,.08);
	padding:2px 8px;
	border-radius:8px;
	color:#fff;
	border:1px solid rgba(255,255,255,.15);
}
#layout-container{
	width:100%;
	max-width:1200px;
	margin:-30px auto 0;
	display:block !important;
	padding:50px;
	position:relative;
	z-index:5;
}
#navigation{
	position:fixed;
	bottom:20px;
	left:50%;
	transform:translateX(-50%);
	display:flex;
	justify-content:center;
	align-items:center;
	gap:14px;
	width:min(900px,90%);
	padding:20px 30px;
	background:linear-gradient(145deg,rgba(20,20,20,.95),#000);
	border-radius:40px;
	border:1px solid #444;
	box-shadow:0 20px 60px rgba(0,0,0,.95),inset 0 0 25px rgba(255,255,255,.08);
	backdrop-filter:blur(12px);
	z-index:999;
}
#navigation a{
	flex:1;
	display:flex;
	justify-content:center;
	align-items:center;
	text-align:center;
	padding:16px 10px;
	color:#fff;
	text-decoration:none;
	font-size:13px;
	letter-spacing:.1em;
	text-transform:uppercase;
	border-radius:25px;
	background:linear-gradient(145deg,#151515,#000);
	border:1px solid #555;
	box-shadow:inset 0 0 15px rgba(255,255,255,.08),0 10px 25px rgba(0,0,0,.9);
	transition:.35s ease;
}

#navigation a::before{
	content:"";
	position:absolute;
	top:-8px;
	left:18px;
	width:16px;
	height:16px;
	background:#fff;
	transform:rotate(45deg);
	opacity:.25;
	transition:.4s;
}
#navigation a:hover{
	color:#000;
	background:#fff;
	border-color:#fff;
	transform:translateY(-6px);
	box-shadow:0 0 35px rgba(255,255,255,.6),0 15px 40px rgba(0,0,0,.9);
}
#navigation a:hover::before{
	opacity:1;
	box-shadow:22px 0 #fff;
}
#navigation a.active{
	color:#000;
	background:#fff;
	box-shadow:0 0 40px rgba(255,255,255,.7);
}
.contentx{
	text-align:justify;
	padding:30px;
	font-size:21px;
	line-height:1.9;
	background:linear-gradient(145deg,#111,#000);
	border-radius:28px;
	border:1px solid #333;
	color:#eee;
	box-shadow:0 20px 60px rgba(0,0,0,.9),inset 0 0 20px rgba(255,255,255,.05);
	width:100% !important;
	flex:none !important;
}
h1{
	font-family:'Cinzel Decorative','Cormorant Garamond',serif;
	font-size:42px;
	letter-spacing:.25em;
	text-align:center;
	padding:18px 40px;
	color:#fff;
	background:linear-gradient(145deg,#151515,#000);
	border-radius:50px;
	border:1px solid #555;
	box-shadow:inset 0 0 20px rgba(255,255,255,.08),0 15px 50px rgba(0,0,0,.9);
	text-shadow:0 0 10px #fff;
	position:relative;
	overflow:hidden;
}
h1::after{
	content:"";
	position:absolute;
	left:50%;
	bottom:10px;
	width:0;
	height:2px;
	background:linear-gradient(90deg,transparent,#fff,transparent);
	transform:translateX(-50%);
	transition:.5s;
}
h1:hover::after{
	width:60%;
}
h1::before{
	content:"";
	position:absolute;
	top:0;
	left:-100%;
	width:100%;
	height:100%;
	background:linear-gradient(120deg,transparent,rgba(255,255,255,.2),transparent);
	transition:.8s;
}
h1:hover::before{
	left:100%;
}
h1 span{
	display:block;
	font-size:14px;
	opacity:.6;
	margin-top:10px;
}
blockquote{
	margin:70px auto;
	padding:50px;
	max-width:750px;
	background:linear-gradient(145deg,#111,#000)!important;
	border-left:6px solid #fff;
	border-radius:30px;
	color:#fff;
	box-shadow:0 20px 50px rgba(0,0,0,.9);
	position:relative;
}
blockquote::before{
	content:"☾ 🐾";
	font-size:38px;
	position:absolute;
	left:20px;
	top:10px;
	color:#fff;
	opacity:.5;
}
.contentx a{
	color:#fff;
	text-decoration:none;
	position:relative;
}
.contentx a::after{
	content:"";
	position:absolute;
	left:0;
	bottom:-3px;
	width:100%;
	height:2px;
	background:linear-gradient(90deg,#fff,#555);
	transform:scaleX(.4);
	transition:.3s;
}
.contentx a:hover::after{
	transform:scaleX(1);
}
textarea,input,select{
	width:80%;
	max-width:400px;
	padding:1.6rem;
	border-radius:40px;
	background:#000;
	color:#fff;
	border:1px solid #555;
}
textarea:focus,input:focus,select:focus{
	outline:none;
	border-color:#fff;
	box-shadow:0 0 20px rgba(255,255,255,.4);
}
#footer{
	text-align:center;
	margin:170px auto 60px;
	letter-spacing:.3em;
	text-transform:uppercase;
	color:#777;
}
#footer a{
	color:#fff;
	text-decoration:none;
	padding:6px 5px;
	margin:0 6px;
	border-radius:30px;
	background:rgba(255,255,255,.05);
	border:1px solid #444;
	transition:.3s;
}
#footer a:hover{
	background:#fff;
	color:#000;
	transform:translateY(-3px);
}
@media(max-width:768px){
	#navigation{
		grid-template-columns:repeat(2,1fr);
		width:90%;
		padding:15px;
	}
	#navigation a{
		font-size:13px;
		padding:14px 10px;
	}
	#layout-container{
		padding:30px;
	}
	.contentx{
		font-size:18px;
		padding:25px;
	}
}
@media(max-width:768px){
	#layout-container{
		flex-direction:column;
		padding:30px;
	}
	#navigation{
		width:90%;
	}
	.contentx{
		padding:30px;
		font-size:18px;
	}
	textarea,input,select{
		width:80%;
	}
}