:root {
	--myth-bg: #070604;
	--myth-bg-2: #120d09;
	--myth-panel: rgba(28, 20, 13, .94);
	--myth-panel-2: rgba(43, 30, 18, .96);
	--myth-line: rgba(210, 154, 72, .34);
	--myth-line-strong: rgba(239, 190, 97, .72);
	--myth-gold: #f0c468;
	--myth-gold-deep: #a86a28;
	--myth-red: #8f2f24;
	--myth-text: #f4e5c7;
	--myth-muted: #c8ad82;
	--myth-shadow: rgba(0, 0, 0, .58);
}

* {
	box-sizing: border-box;
}

html {
	scrollbar-color: var(--myth-gold-deep) #150f0b;
}

body {
	background:
		radial-gradient(circle at 50% -120px, rgba(240, 196, 104, .18), transparent 330px),
		linear-gradient(rgba(7, 6, 4, .74), rgba(7, 6, 4, .92)),
		url("../layout/images/global/header/background-artwork.jpg") center top / cover fixed,
		var(--myth-bg) !important;
	color: var(--myth-text) !important;
	font-family: Georgia, "Times New Roman", serif !important;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(0, 0, 0, .42), transparent 18%, transparent 82%, rgba(0, 0, 0, .42)),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .025) 1px, transparent 1px, transparent 4px);
	mix-blend-mode: soft-light;
	z-index: -1;
}

a {
	color: var(--myth-gold) !important;
}

.site-header,
.header {
	position: relative;
	overflow: hidden;
	background:
		linear-gradient(180deg, rgba(20, 12, 7, .35), rgba(7, 6, 4, .96)),
		url("../layout/images/global/header/background-artwork.jpg") center 24% / cover !important;
	border-bottom: 2px solid var(--myth-line-strong) !important;
	box-shadow: 0 18px 45px var(--myth-shadow);
}

.site-header::after,
.header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: linear-gradient(90deg, transparent, var(--myth-gold), transparent);
	opacity: .82;
}

.header-inner {
	padding-top: 46px !important;
	padding-bottom: 30px !important;
}

.header-title h1,
.header h1 {
	color: var(--myth-gold) !important;
	font-family: Georgia, "Times New Roman", serif !important;
	font-size: clamp(34px, 5vw, 58px) !important;
	font-weight: 700;
	text-shadow: 0 3px 0 #271306, 0 0 24px rgba(240, 196, 104, .36);
}

.header-title p,
.header p {
	color: var(--myth-muted) !important;
	font-size: 16px;
}

.header-title p::before {
	content: "Codex dos Reinos - ";
	color: var(--myth-gold);
}

.searchbar,
.sidebar,
.article-card,
.stat,
.content,
.tutorial-section,
.no-results {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 42%),
		var(--myth-panel) !important;
	border: 1px solid var(--myth-line) !important;
	border-radius: 6px !important;
	box-shadow: 0 14px 32px var(--myth-shadow), inset 0 0 0 1px rgba(255, 235, 185, .06);
}

.layout,
.container {
	width: min(1180px, 94%) !important;
}

.sidebar {
	position: sticky;
	top: 18px;
}

.sidebar h2,
.category h2,
.content h1,
.content h2,
.content h3,
.content h4,
.tutorial-section h1,
.tutorial-section h2,
.tutorial-section h3,
.tutorial-section h4 {
	color: var(--myth-gold) !important;
	font-family: Georgia, "Times New Roman", serif !important;
	text-shadow: 0 1px 0 #1d0e06;
}

.sidebar h2::before,
.category h2::before {
	content: "◆ ";
	color: var(--myth-red);
}

.sidebar a {
	background: linear-gradient(90deg, rgba(143, 47, 36, .18), rgba(255, 255, 255, .025)) !important;
	border: 1px solid rgba(210, 154, 72, .14);
	color: var(--myth-text) !important;
}

.sidebar a:hover,
.article-card:hover {
	background:
		linear-gradient(180deg, rgba(240, 196, 104, .08), rgba(143, 47, 36, .12)),
		var(--myth-panel-2) !important;
	border-color: var(--myth-line-strong) !important;
	transform: translateY(-2px);
}

.searchbar {
	background:
		linear-gradient(90deg, rgba(143, 47, 36, .24), rgba(28, 20, 13, .96)) !important;
}

.searchbar label {
	color: var(--myth-gold) !important;
	font-weight: 700;
}

.searchbar input {
	color: var(--myth-text) !important;
	font-family: Arial, Helvetica, sans-serif;
}

.stat {
	min-width: 118px;
}

.stat strong {
	color: var(--myth-gold) !important;
}

.stat span,
.category-header span,
.article-card p,
.content p,
.content li,
.content td,
.content th,
.tutorial-section p,
.tutorial-section li,
.tutorial-section td,
.tutorial-section th,
.source {
	color: var(--myth-muted) !important;
}

.category-header {
	border-bottom: 1px solid var(--myth-line) !important;
}

.article-grid {
	grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)) !important;
}

.article-card {
	position: relative;
	min-height: 132px !important;
}

.article-card::before {
	content: "";
	position: absolute;
	inset: 8px;
	border: 1px solid rgba(240, 196, 104, .09);
	pointer-events: none;
}

.article-card h3 {
	color: var(--myth-gold) !important;
	font-family: Georgia, "Times New Roman", serif;
}

.article-card h3::before {
	content: "✦ ";
	color: var(--myth-red);
}

.content table,
.tutorial-section table {
	background: rgba(12, 8, 5, .78) !important;
	border: 1px solid var(--myth-line) !important;
	border-radius: 6px !important;
}

.content table th,
.content table td,
.tutorial-section table th,
.tutorial-section table td {
	border-color: rgba(210, 154, 72, .22) !important;
}

.content table th,
.tutorial-section table th {
	background: rgba(143, 47, 36, .24);
	color: var(--myth-gold) !important;
}

.content code,
.tutorial-section code {
	background: rgba(0, 0, 0, .38) !important;
	border: 1px solid rgba(240, 196, 104, .18);
	color: var(--myth-gold) !important;
}

.source {
	background: rgba(143, 47, 36, .16) !important;
	border-left-color: var(--myth-gold) !important;
}

.sidebar a[href="tutorial.php"]::before {
	content: "← ";
}

@media (max-width: 860px) {
	.site-header,
	.header {
		background-position: center top !important;
	}

	.sidebar {
		position: static;
	}
}