@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=JetBrains+Mono:wght@400&family=Merriweather:ital,wght@0,300;0,400;0,700;1,400&family=Outfit:wght@300;400;600;700&display=swap");

:root {
	--font-ui: "Outfit", sans-serif;
	--font-p: "Merriweather", serif;
	--font-mono: "JetBrains Mono", monospace;

	--font-title: "Cormorant Garamond", serif;
	--font-alt: "Cinzel", serif;

	--bg: #f9f7f1;
	--backdrop: #e0e0e0;
	--heading: #2c2825;
	--p: #403b38;
	--link: #c04216;
	--navbar: #ebe7de;
	--menu: #2c2825;
	--footer: #ebe7de;
}

.entry-content {
	width: 100%;
	height: 100%;

	overflow-x: hidden;
	overflow-y: scroll;

	border: 1px solid rgba(0, 0, 0, 0.2);

	background-color: var(--bg);

	border-radius: 0.5rem 0 0 0.5rem;

	padding: 1rem;

	display: flex;
	flex-direction: column;
	gap: 1rem;

	position: relative;
}

.e-titles-container {
	width: 65%;
	height: 100px;

	display: flex;
	flex-direction: column;
}

.e-title {
	font-family: var(--font-title);
	letter-spacing: 1.6px;
	font-size: 60px;
	text-transform: uppercase;
}

.e-alt-titles {
	width: 100%;
	height: 100%;

	font-family: var(--font-alt);
	letter-spacing: 1.2px;
	font-weight: 400;
	font-size: 18px;
	text-transform: uppercase;
}

.e-gallery {
	position: absolute;
	top: 1rem;
	right: 1rem;

	width: 560px;
	height: 350px;

	user-select: none;
}

.e-description {
	width: 65%;
	min-height: 241px;
}

.e-ph {
	width: 100%;
	height: max-content;
}

.e-description,
.e-ph {
	display: flex;
	flex-direction: column;
}

.e-titles-container,
.e-description,
.e-ph {
	padding-left: 0.5rem;

	border-left: 3px solid var(--heading);
}

.e-heading {
	width: 100%;
	min-height: 5%;

	font-family: var(--font-title);
	font-size: 40px;

	margin-bottom: 0.5rem;

	text-transform: uppercase;
}

.e-text {
	min-width: 100%;
	height: max-content;

	color: var(--p);

	font-family: var(--font-p);
	font-size: 15px;
	letter-spacing: 1.2px;

	text-indent: 2rem;
}

/* Text Decorations */

.e-cite {
	color: inherit;
}

.e-cite:hover {
	color: var(--link);
}

.new-p {
	border: 1px solid var(--link);
	border-radius: 2px;

	background-color: var(--link);
	color: var(--bg);

	padding: 2px 0;
}

.new-p::before,
.new-p::after {
	content: "NEW";

	width: fit-content;
	height: inherit;

	padding: 2px 0.75rem 2px 0.5rem;
	margin: 0 0.5rem;

	border: 3px solid var(--link);
	border-radius: 7px;

	background-color: var(--heading);
	color: var(--navbar);

	font-size: 20px;
	font-weight: 600;
	text-transform: uppercase;
	font-family: var(--font-mono);
}

/* Focus Mode */

.entry-content section,
.entry-content .e-titles-container {
	transition: opacity 400ms var(--t-f);

	opacity: 1;
}

body:has(#focus-mode:checked) .entry-content:hover section,
body:has(#focus-mode:checked) .entry-content:hover .e-titles-container {
	opacity: 0.4;

	filter: blur(2px);
}

body:has(#focus-mode:checked) .entry-content section:hover,
body:has(#focus-mode:checked) .entry-content .e-titles-container:hover {
	opacity: 1;

	filter: blur(0);
}