/* Same colors and font as the talent calculator (talents/index.html) */

:root
{
	--bg: #16130f;
	--panel: #221d17;
	--panel-edge: #4a3f30;
	--text: #ddd5c4;
	--text-dim: #9a907e;
	--gold: #ffd84a;
	--link: #e8c070;
}

*
{
	box-sizing: border-box;
}

body
{
	max-width: 720px;
	margin: 0 auto;
	padding: 32px 16px;
	background: var(--bg);
	color: var(--text);
	font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

a
{
	color: var(--link);
	text-decoration: none;
}

a:hover
{
	text-decoration: underline;
}

header
{
	margin-bottom: 20px;
}

.logo
{
	display: inline-block;
	margin-bottom: 12px;
	font-size: 32px;
	font-weight: 700;
	color: var(--gold);
}

.logo:hover
{
	text-decoration: none;
}

nav
{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

nav a, a.button
{
	display: inline-block;
	padding: 4px 12px;
	background: var(--panel);
	border: 1px solid var(--panel-edge);
	border-radius: 3px;
	color: var(--text);
}

nav a:hover, a.button:hover
{
	border-color: var(--link);
	text-decoration: none;
}

a.button
{
	padding: 8px 16px;
	border-color: var(--gold);
	color: var(--gold);
	font-weight: 600;
}

.panel
{
	padding: 16px;
	background: var(--panel);
	border: 1px solid var(--panel-edge);
	border-radius: 4px;
}

.panel h1
{
	margin: 0 0 8px 0;
	font-size: 22px;
	font-weight: 600;
	color: var(--gold);
}

.panel p
{
	margin: 0 0 16px 0;
}

img.cover
{
	display: block;
	max-width: 100%;
	height: auto;
	margin-bottom: 16px;
	border: 1px solid #000;
}

footer
{
	margin-top: 16px;
	color: var(--text-dim);
	font-size: 12px;
}