:root
{
	--texture-leather: url('../images/leather.jpg');
	--texture-parchment: url('../images/parchment.jpg');
	--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	--gradient-gold: linear-gradient(170deg, #fdf3d6, #e7cd8c 30%, #c9a44c 62%, #b08a38);

	/* The same in light and dark. The colors that differ (the background, the golds, panels) are
	   in color_scheme.css. */
	--color-leather: rgb(35, 11, 35);
	--color-parchment: rgb(250, 245, 230);

	--color-ink: #2a1c10;
	--color-ink-red: #8B0000;

	--content-width: 1200px;
	--spacing: 20px;
	--spacing-text: 10px;
}

@media (max-width: 600px)
{
	:root
	{
		--spacing: 14px;
	}
}



*
{
	box-sizing: border-box;
}


html, body,
ul, ol, li, p,
h1, h2, h3, h4, h5, h6
{
	margin: 0;
	padding: 0;
}

body
{
	display: flex;
	min-height: 100vh;
	flex-direction: column;

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

	color: var(--color-gold);
	font-family: var(--font-body);
	font-size: 1.2em;
}

main
{
	flex: 1;
	padding: calc(var(--spacing) * 2) var(--spacing);
}

.container
{
	margin: 0 auto;
	width: 100%;
	max-width: var(--content-width);
}


.grid
{
	display: grid;
	grid-template-columns: repeat(var(--grid-columns, 1), minmax(0, 1fr));
	gap: var(--spacing);
}

.grid-full-width
{
	grid-column: 1 / -1;
}

@media (min-width: 601px)
{
	.grid-col-2 { --grid-columns: 2; }
	.grid-col-3 { --grid-columns: 3; }
}

.top-spaced
{
	margin-top: calc(var(--spacing) * 2) !important;
}

footer
{
	font-size: 0.85em;
	color: var(--color-gold-shaded);
	border-top: 1px solid var(--color-gold-muted);

	& > .container
	{
		display: flex;
		gap: var(--spacing);
		padding: 6px var(--spacing);
	}

	a
	{
		color: var(--color-gold);
	}
}