html, body{
	height:100%;
	margin:0;
}
body{
	background-color:#FCE6D9;
	overflow-x:hidden;
	position:relative;
	font-family:'Lora', serif;
}
#header{
	background-image:url("images/head.jpg");
	background-color:#FCE6D9;
	background-repeat:no-repeat;
	background-position:center;
	height:608px;
	width:100%;
	position:relative;
}
#navigation{
	position:relative;
	z-index:3;
	width:52%;
	margin-top:-10px;
	padding:56px 44px;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	gap:34px;
	background:rgba(248,244,234,.88);
	backdrop-filter:blur(5px);
	border:1px solid rgba(73,106,82,.12);
	border-radius:999px;
	box-shadow:0 12px 32px rgba(40,45,35,.06),inset 0 1px rgba(255,255,255,.75);
}
#navigation::before{
	content:"";
	position:absolute;
	inset:8px;
	border-radius:inherit;
	border:1px solid rgba(73,106,82,.06);
	pointer-events:none;
}
#navigation a{
	position:relative;
	padding:20px 25px;
	font-family:'Cormorant Garamond', serif;
	font-size:23px;
	font-weight:500;
	font-variant:small-caps;
	letter-spacing:.8px;
	color:#5f715f;
	text-decoration:none;
	transition:color .25s ease,letter-spacing .25s ease;
}
#navigation a:not(:last-child)::before{
	content:"|";
	position:absolute;
	right:-20px;
	top:48%;
	transform:translateY(-50%);
	color:#b7b09d;
	font-size:16px;
	font-weight:300;
	opacity:.7;
}
#navigation a::after{
	content:"";
	position:absolute;
	left:50%;
	bottom:-4px;
	width:0;
	height:2px;
	transform:translateX(-50%);
	border-radius:999px;
	background:linear-gradient(90deg,transparent 0%,rgba(91,114,94,.35) 15%,#5b725e 50%,rgba(91,114,94,.35) 85%,transparent 100%);
	transition:width .35s ease;
}
#navigation a:hover::after{
	width:95%;
}
.contentx{
	width:67%;
	margin:18px 0;
	padding:0;
	background:none;
	border:none;
	box-shadow:none;
	backdrop-filter:none;
	color:#5c5344;
	font:19px/2 'Lora',serif;
	text-align:justify;
	hyphens:auto;
}
.contentx::before{
	content:"❦";
	display:block;
	margin:0 auto 24px;
	text-align:center;
	color:#70876b;
	font-size:18px;
}
a{
	color:#355540;
	text-decoration:none;
	position:relative;
	transition:.3s ease;
}
a:hover{
	color:#1f3a28;
}
i,em{
	font-family:'Lora',serif;
	font-style:italic;
	color:#7d6546;
	letter-spacing:.4px;
	position:relative;
}
i::after,em::after{
	content:"";
	position:absolute;
	left:0;
	bottom:-1px;
	width:100%;
	height:1px;
	background:rgba(125,101,70,.25);
}
b,strong{
	color:#2f4d39;
	font-weight:600;
	letter-spacing:.6px;
	position:relative;
}
b::after,strong::after{
	content:"❦";
	position:absolute;
	left:50%;
	bottom:-16px;
	transform:translateX(-50%);
	font-size:11px;
	color:#70876b;
	opacity:.75;
}
a::after{
	content:"";
	position:absolute;
	left:50%;
	bottom:-5px;
	width:0;
	height:2px;
	background:#496a52;
	border-radius:999px;
	transition:.35s ease;
	transform:translateX(-50%);
}
a:hover::after{
	width:100%;
}
a::before{
	content:"❦";
	position:absolute;
	left:50%;
	bottom:-13px;
	transform:translateX(-50%) scale(.6);
	color:#70876b;
	font-size:10px;
	opacity:0;
	transition:.35s ease;
}
a:hover::before{
	opacity:1;
	transform:translateX(-50%) scale(1);
}
h1{
	display:inline-block;
	position:relative;
	padding:18px 52px;
	font-family:'Lora',serif;
	font-size:40px;
	font-weight:500;
	letter-spacing:5px;
	color:#33523d;
	background:linear-gradient(to bottom,#faf6ee,#ede3d2);
	border:1px solid rgba(73,106,82,.18);
	border-radius:999px;
	box-shadow:0 14px 32px rgba(50,60,40,.08),inset 0 1px rgba(255,255,255,.75);
	text-shadow:0 1px 0 rgba(255,255,255,.7);
	transition:.35s ease;
}
h1::before,h1::after{
	content:"❦";
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	color:#70876b;
	font-size:22px;
}
h1::before{
	left:18px;
}
h1::after{
	right:18px;
}
h1:hover{
	transform:translateY(-2px);
	box-shadow:0 18px 38px rgba(50,60,40,.12),inset 0 1px rgba(255,255,255,.8);
}
textarea,input,select{
	width:40%;
	max-width:40%;
	padding:16px 22px;
	margin:16px 0;
	font:18px 'Lora',serif;
	color:#4f4738;
	background:#f8f4ea;
	border:1px solid rgba(73,106,82,.22);
	border-radius:18px;
	box-shadow:inset 0 1px 2px rgba(255,255,255,.75),0 8px 18px rgba(50,60,40,.05);
	transition:.3s ease;
	caret-color:#33523d;
}
textarea:hover,input:hover,select:hover{
	border-color:#496a52;
	background:#faf7f0;
}
textarea:focus,input:focus,select:focus{
	outline:none;
	background:#fffdf8;
	border-color:#33523d;
	box-shadow:0 0 0 4px rgba(73,106,82,.10),0 12px 24px rgba(50,60,40,.08);
}
textarea::placeholder,input::placeholder{
	color:#938870;
	font-style:italic;
}
textarea:disabled,input:disabled,select:disabled{
	background:#ece5d8;
	color:#9b927f;
	cursor:not-allowed;
}
.forest-footer{
	position:relative;
	margin-top:110px;
	padding:70px 20px;
	text-align:center;
	background:linear-gradient(to bottom,transparent,rgba(239,231,214,.75));
	color:#496a52;
	font-family:'Cinzel',serif;
}
.footer-ornament{
	width:260px;
	height:1px;
	margin:0 auto 34px;
	background:linear-gradient(to right,transparent,rgba(73,106,82,.35),transparent);
	position:relative;
}
.footer-ornament::before,.footer-ornament::after{
	content:"❦";
	position:absolute;
	top:-13px;
	color:#70876b;
	font-size:18px;
}
.footer-ornament::before{
	left:-18px;
}
.footer-ornament::after{
	right:-18px;
}
.footer-title{
	font-size:22px;
	letter-spacing:4px;
	color:#33523d;
	margin-bottom:18px;
	text-shadow:none;
}
.footer-links{
	display:flex;
	justify-content:center;
	gap:30px;
	margin-bottom:22px;
}
.footer-links a{
	color:#496a52;
	font-size:17px;
}
.footer-links a:hover{
	color:#274232;
}
.footer-copy{
	color:#867b67;
	font-size:14px;
	letter-spacing:1px;
	font-style:italic;
}
.forest-footer::after{
	display:none;
}
blockquote{
	position:relative;
	margin:50px auto;
	padding:42px 56px;
	font:italic 21px/1.9 'Lora',serif;
	color:#5b5142;
	background:#f8f4ea;
	border-left:5px solid #496a52;
	border-radius:22px;
	box-shadow:0 14px 30px rgba(50,60,40,.08);
	overflow:visible;
}
blockquote::before{
	content:"“";
	position:absolute;
	left:20px;
	top:-18px;
	font-size:72px;
	color:rgba(73,106,82,.18);
	font-family:'Cinzel Decorative',serif;
}
blockquote::after{
	content:"❦";
	position:absolute;
	right:24px;
	bottom:16px;
	color:#70876b;
	font-size:18px;
}
@media (max-width:1024px){
	#navigation{
		width:82%;
		padding:28px 22px;
		gap:14px;
	}
	#navigation a{
		padding:12px 22px;
		font-size:14px;
		letter-spacing:1.5px;
	}
	#content{
		width:86%;
		margin:-20px auto 0;
	}
	.contentx{
		padding:28px;
		font-size:18px;
	}
	h1{
		font-size:34px;
		letter-spacing:3px;
		padding:16px 40px;
	}
	textarea,input,select{
		width:70%;
		max-width:70%;
		font-size:17px;
	}
	blockquote{
		padding:34px 38px;
		font-size:19px;
	}
	.footer-links{
		gap:20px;
		flex-wrap:wrap;
	}
}
@media (max-width:768px){
	#header{
		height:340px;
		background-position:center;
		background-size:cover;
	}
	#navigation{
		width:92%;
		margin:20px auto 0;
		padding:20px;
		display:flex;
		flex-direction:column;
		align-items:stretch;
		gap:12px;
	}
	#navigation a{
		width:100%;
		justify-content:center;
		padding:14px;
		font-size:15px;
	}
	#content{
		width:94%;
		margin:20px auto;
	}
	.contentx{
		padding:22px;
		font-size:17px;
		line-height:1.8;
		text-align:left;
		hyphens:none;
	}
	h1{
		display:block;
		width:100%;
		box-sizing:border-box;
		text-align:center;
		font-size:28px;
		letter-spacing:2px;
		padding:18px 22px;
	}
	h1::before,h1::after{
		display:none;
	}
	textarea,input,select{
		width:100%;
		max-width:100%;
		box-sizing:border-box;
		font-size:16px;
	}
	blockquote{
		margin:34px 0;
		padding:28px 24px;
		font-size:18px;
		line-height:1.75;
	}
	blockquote::before{
		left:12px;
		top:-12px;
		font-size:52px;
	}
	blockquote::after{
		right:16px;
		bottom:10px;
	}
	.footer-title{
		font-size:18px;
		letter-spacing:2px;
	}
	.footer-links{
		flex-direction:column;
		gap:12px;
	}
	.footer-ornament{
		width:180px;
	}
}
@media (max-width:480px){
	#navigation{
		width:96%;
		padding:16px;
	}
	#content{
		width:96%;
	}
	.contentx{
		padding:18px;
		font-size:16px;
	}
	h1{
		font-size:24px;
		letter-spacing:1px;
		padding:16px;
	}
	textarea,input,select{
		padding:14px 16px;
		font-size:16px;
	}
	blockquote{
		padding:22px 18px;
		font-size:17px;
	}
	.footer-title{
		font-size:17px;
	}
	.footer-copy{
		font-size:13px;
	}
}
