@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:#44446B;
	font-family:'Libre Baskerville',serif;
	background:#E7E9FD;
}
#header{
	background-image:url("images/head.jpg"),url("images/bg1.jpg");
	background-repeat:no-repeat,repeat-x;
	height:681px;
	background-position:center;
	width:100%;
	position:relative;
}
b,strong{
	display:inline-block;
	padding:5px 14px;
	color:#615b9d;
	font-weight:600;
	background:linear-gradient(180deg,#ffffff 0%,#f3f2ff 55%,#e5e6ff 100%);
	border:1px solid #d8d8ff;
	border-radius:999px;
	box-shadow:0 0 0 1px rgba(255,255,255,.5) inset,0 10px 24px rgba(145,138,235,.16);
}
i,em{
	padding:3px 10px;
	color:#8d84dd;
	font-style:italic;
	background:linear-gradient(90deg,rgba(225,221,255,.36),rgba(199,193,255,.18));
	border-radius:999px;
	backdrop-filter:blur(5px);
}
#layout-container{
	width:65%;
	max-width:1160px;
	margin:-35px auto 0;
	padding:55px;
	display:block !important;
	position:relative;
	z-index:5;
}
#navigation{
	position:fixed;
	top:30px;
	left:50%;
	transform:translateX(-50%);
	display:flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	padding:8px;
	width:fit-content;
	background:rgba(249,248,255,.84);
	backdrop-filter:blur(10px);
	border:1px solid rgba(214,210,255,.75);
	border-radius:12px;
	box-shadow:0 10px 28px rgba(110,105,185,.12),0 1px 0 rgba(255,255,255,.7) inset;
	z-index:9999;
}
#navigation::before{
	content:"";
	position:absolute;
	inset:1px;
	border-radius:10px;
	background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0));
	pointer-events:none;
}
#navigation a{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:12px 20px;
	font-family:'Cinzel',serif;
	font-size:13px;
	letter-spacing:.20em;
	text-transform:uppercase;
	text-decoration:none;
	color:#6a67a9;
	border-radius:8px;
	transition:background .3s,color .3s,transform .3s;
}
#navigation a:hover{
	color:#9b93f2;
	background:linear-gradient(180deg,rgba(239,237,255,.95),rgba(226,223,255,.75));
	transform:translateY(-2px);
}
#navigation a::after{
	content:"";
	position:absolute;
	left:14px;
	right:14px;
	bottom:8px;
	height:1px;
	background:linear-gradient(90deg,transparent,#b2abff,transparent);
	opacity:0;
	transform:scaleX(.6);
	transition:.3s;
}
#navigation a:hover::after{
	opacity:1;
	transform:scaleX(1);
}
.contentx{
	width:100%!important;
	flex:none!important;
	position:relative;
	overflow:hidden;
	margin-top:-42px;
	padding:56px;
	font-size:21px;
	line-height:2;
	text-align:justify;
	color:#5b6188;
	background:linear-gradient(145deg,rgba(253,253,255,.94) 0%,rgba(245,243,255,.92) 45%,rgba(235,233,255,.88) 100%);
	backdrop-filter:blur(10px);
	border:1px solid rgba(215,211,255,.70);
	border-radius:22px;
        opacity:0.7;
	box-shadow:0 12px 32px rgba(118,112,205,.10),0 1px 0 rgba(255,255,255,.75) inset;
}
.contentx::before{
	content:"";
	position:absolute;
	top:-140px;
	right:-120px;
	width:420px;
	height:240px;
	border-radius:50%;
	background:radial-gradient(ellipse at center,rgba(214,210,255,.42) 0%,rgba(233,230,255,.18) 45%,transparent 75%);
	transform:rotate(-18deg);
	filter:blur(18px);
	pointer-events:none;
}
.contentx::after{
	content:"";
	position:absolute;
	left:-140px;
	bottom:-70px;
	width:460px;
	height:140px;
	border-radius:50%;
	background:linear-gradient(90deg,transparent,rgba(224,220,255,.28),rgba(202,195,255,.20),transparent);
	transform:rotate(12deg);
	filter:blur(20px);
	pointer-events:none;
}
h1{
	position:relative;
	margin:0 auto 70px;
	padding:0 0 28px;
	text-align:center;
	text-transform:uppercase;
	font-family:'Cinzel Decorative',serif;
	font-size:30px;
	font-weight:400;
	line-height:1.15;
	letter-spacing:.30em;
	color:#707dc8;
	text-shadow:
		0 1px 0 rgba(255,255,255,.9),
		0 0 12px rgba(180,188,255,.22);
}

h1::before{
	content:"";
	position:absolute;
	left:50%;
	bottom:0;
	width:180px;
	height:1px;
	transform:translateX(-50%);
	background:linear-gradient(
		90deg,
		transparent,
		#d5d9ff 20%,
		#aeb7ff 50%,
		#d5d9ff 80%,
		transparent);
}
h1::after{
	content:"✦";
	display:block;
	margin-top:18px;
	font-size:18px;
	line-height:1;
	color:#b6beff;
	text-shadow:0 0 10px rgba(190,198,255,.35);
}
h1 span{
	display:block;
	margin-top:14px;
	font-family:'Cormorant Garamond',serif;
	font-size:18px;
	font-style:italic;
	font-weight:400;
	text-transform:none;
	letter-spacing:.18em;
	color:#969fe5;
	text-shadow:0 1px 0 rgba(255,255,255,.8);
}
blockquote{
	position:relative;
	margin:90px auto;
	max-width:760px;
	padding:56px 56px 48px;
	font-family:'Libre Baskerville',serif;
	font-size:23px;
	font-style:italic;
	line-height:1.9;
	color:#5f658f;
	background:linear-gradient(155deg,rgba(253,253,255,.94),rgba(241,239,255,.88));
	backdrop-filter:blur(10px);
	border:1px solid rgba(214,210,255,.70);
	border-radius:22px;
	box-shadow:0 14px 34px rgba(120,112,205,.10),0 1px 0 rgba(255,255,255,.75) inset;
	overflow:hidden;
}
blockquote::before{
	content:"❝";
	position:absolute;
	left:24px;
	top:10px;
	font-size:60px;
	line-height:1;
	color:#b4adff;
	opacity:.22;
}
blockquote::after{
	content:"";
	position:absolute;
	left:50%;
	top:0;
	width:120px;
	height:2px;
	transform:translateX(-50%);
	border-radius:999px;
	background:linear-gradient(90deg,transparent,#b6afff,#ffffff,#b6afff,transparent);
}

.contentx a{
	position:relative;
	color:#7a72c9;
	text-decoration:none;
	transition:color .3s,letter-spacing .3s;
}
.contentx a::after{
	content:"";
	position:absolute;
	left:0;
	right:0;
	bottom:-3px;
	height:1px;
	background:linear-gradient(90deg,transparent,#b3acff 20%,#d8d4ff 50%,#b3acff 80%,transparent);
	transform:scaleX(.45);
	transform-origin:center;
	opacity:.75;
	transition:transform .35s,opacity .35s;
}
.contentx a:hover{
	color:#988ef2;
	letter-spacing:.02em;
}
.contentx a:hover::after{
	transform:scaleX(1);
	opacity:1;
}
textarea,input,select{
	width:88%;
	max-width:800px;
	padding:1.2rem 1.5rem;
	font-family:'Libre Baskerville',serif;
	font-size:16px;
	color:#5e638d;
	background:linear-gradient(180deg,#fdfdff,#f4f2ff);
	border:1px solid #ddd9ff;
	border-radius:14px;
	box-shadow:0 1px 0 rgba(255,255,255,.85) inset,0 8px 18px rgba(118,112,205,.08);
	transition:border-color .3s,box-shadow .3s,background .3s,transform .3s;
}
textarea:hover,input:hover,select:hover{
	border-color:#cfc8ff;
}
textarea:focus,input:focus,select:focus{
	outline:none;
	background:#ffffff;
	border-color:#aaa0ff;
	box-shadow:0 0 0 3px rgba(187,180,255,.18),0 10px 24px rgba(132,122,225,.16);
	transform:translateY(-1px);
}
#footer{        opacity:0.85;
	position:relative;
	margin:30px 0 0;
	padding:30px 40px 45px;
	text-align:center;
	overflow:hidden;
	background:linear-gradient(180deg,#f8f8ff 0%,#efedff 55%,#e2defd 100%);
	border-top:1px solid rgba(210,205,255,.65);
}
#footer::before{
	content:"";
	position:absolute;
	left:0;
	top:-55px;
	width:100%;
	height:30px;
	background:radial-gradient(ellipse at 50% 100%,#f8f8ff 68%,transparent 70%);
	background-size:220px 100%;
	background-repeat:repeat-x;
}
#footer::after{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(180deg,rgba(255,255,255,.45),transparent 35%);
	pointer-events:none;
}
.footer-divider{
	width:120px;
	height:1px;
	margin:0 auto 24px;
	background:linear-gradient(90deg,transparent,#b9b3ff,transparent);
}
.footer-bottom{
	position:relative;
	z-index:2;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:10px;
}
.footer-bottom p{
	margin:0;
	font-family:'Cormorant Garamond',serif;
	font-size:20px;
	line-height:1.5;
	color:#7873b7;
}
.footer-bottom a{
	color:#8584DA;
	text-decoration:none;
	transition:.3s;
}
.footer-bottom a:hover{
	color:#a79fff;
}
.back-to-top{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:11px 26px;
	font-family:'Cinzel',serif;
	font-size:12px;
	font-weight:600;
	letter-spacing:.22em;
	text-transform:uppercase;
	color:#fff!important;
	background:#8584DA;
	border:1px solid rgba(255,255,255,.25);
	border-radius:12px;
	box-shadow:0 8px 20px rgba(110,105,190,.22),inset 0 1px 0 rgba(255,255,255,.35);
}
@media (max-width:1024px){
	#header{
		height:420px;
		background-size:cover;
		background-position:center;
	}
	#layout-container{
		width:92%;
		padding:24px;
		margin:-10px auto 0;
	}
	#navigation{
		position:sticky;
		top:15px;
		width:calc(100% - 24px);
		max-width:700px;
		margin:0 auto 28px;
		flex-wrap:wrap;
		justify-content:center;
		padding:8px;
		gap:6px;
		transform:none;
		left:auto;
	}
	#navigation a{
		padding:10px 16px;
		font-size:12px;
		letter-spacing:.14em;
	}
	.contentx{
		margin-top:0;
		padding:34px;
		font-size:18px;
		line-height:1.9;
	}
	h1{
		font-size:30px;
		letter-spacing:.16em;
	}
	h1::before{
		width:180px;
	}
	blockquote{
		margin:55px auto;
		padding:36px;
		font-size:20px;
	}
	textarea,input,select{
		width:100%;
		max-width:none;
	}
	#footer{
		padding:60px 24px 35px;
	}
	.footer-divider{
		width:100px;
	}
	.footer-bottom p{
		font-size:19px;
	}
}
@media (max-width:768px){
	#header{
		height:300px;
	}
	#layout-container{
		width:100%;
		padding:14px;
	}
	#navigation{
		position:relative;
		top:auto;
		width:100%;
		padding:8px;
		border-radius:14px;
		flex-direction:column;
		align-items:stretch;
		gap:4px;
	}
	#navigation a{
		justify-content:center;
		padding:12px;
		font-size:11px;
	}
	.contentx{
		padding:24px;
		font-size:17px;
		line-height:1.8;
		border-radius:18px;
	}
	h1{
		font-size:24px;
		letter-spacing:.08em;
	}
	h1 span{
		font-size:16px;
		letter-spacing:.08em;
	}
	blockquote{
		margin:40px 0;
		padding:24px;
		font-size:18px;
		line-height:1.7;
	}
	blockquote::before{
		font-size:42px;
		left:18px;
		top:12px;
	}
	b,strong{
		padding:4px 10px;
	}
	i,em{
		padding:2px 7px;
	}
	textarea,input,select{
		width:100%;
		padding:1rem 1.1rem;
		font-size:15px;
		border-radius:12px;
	}
	#footer{
		margin-top:60px;
		padding:45px 18px 30px;
	}
	.footer-bottom{
		gap:8px;
	}
	.footer-bottom p{
		font-size:17px;
	}
	.back-to-top{
		width:100%;
		max-width:220px;
		padding:12px;
	}
}