@font-face {
	font-family: 'Martian';
	font-style: normal;
	font-weight: normal;
	src: url('../fonts/MartianMono-sWdxLt.woff2') format('woff2');
}

@font-face {
	font-family: 'Martian';
	font-style: normal;
	font-weight: bold;
	src: url('../fonts/MartianMono-sWdxLt.woff2') format('woff2');
}

:root {
	--color-accent-1: #b31114;
	--color-accent-2: #d36b6c;
	--color-accent-3: #9a0e0e;

	--color-text-1: #000;
	--color-text-2: #878787;

	--color-background-1: #fff;
	--color-background-2: #e3e3e3;
	--color-background-3: #f8f8f8;
	--color-transparent-background-1: #000000e6;

	--color-success-1: #00c851;
	--color-warning: #ffbb33;
	--color-error: #e23636;
	--color-error-2: #e2363633;
	--color-information: #4a90e2;
	--color-information-2: #4a90e233;
	--color-silver-gradient-1: linear-gradient(
		45deg,
		oklch(53.4% 0.007 27.69) 0%,
		oklch(67.4% 0.009 2.99) 39%,
		oklch(81.4% 0.006 325.52) 55%,
		oklch(93.2% 0.002 275.49) 66%,
		oklch(81.4% 0.006 325.52) 76%,
		oklch(67.4% 0.009 2.99) 86%,
		oklch(53.4% 0.007 27.69) 100%
	);
	--color-silver-gradient-2: linear-gradient(
		45deg,
		oklch(53.4% 0.007 27.69) 1%,
		oklch(64.6% 0.008 356.67) 31%,
		oklch(75.3% 0.005 326.43) 43%,
		oklch(87.6% 0.003 275.01) 52%,
		oklch(87.6% 0.003 275.01) 60%,
		oklch(75.3% 0.005 326.43) 69%,
		oklch(64.6% 0.008 356.67) 78%,
		oklch(53.4% 0.007 27.69) 100%
	);
	--color-gold-gradient-1: linear-gradient(
		45deg,
		oklch(0.6119 0.1217 74.67) 0%,
		oklch(0.6774 0.125 80.36) 39%,
		oklch(0.778 0.1275 88.98) 55%,
		oklch(0.9045 0.1192 98.29) 66%,
		oklch(0.778 0.1275 88.98) 76%,
		oklch(0.6774 0.125 80.36) 86%,
		oklch(0.6119 0.1217 74.67) 100%
	);
	--color-gold-gradient-2: linear-gradient(
		45deg,
		oklch(0.6119 0.1217 74.67) 0%,
		oklch(0.6801 0.1218 80.94) 11%,
		oklch(0.7391 0.1204 85.66) 21%,
		oklch(0.8087 0.1195 91.14) 31%,
		oklch(0.8757 0.1178 95.68) 41%,
		oklch(0.9443 0.1174 100.66) 51%,
		oklch(0.8757 0.1178 95.68) 61%,
		oklch(0.8039 0.1218 91.04) 70%,
		oklch(0.7336 0.1221 85.46) 80%,
		oklch(0.658 0.1198 78.83) 90%,
		oklch(0.5921 0.1214 71.79) 100%
	);

	--top-bar-height: 80px;
	--navigation-height: 50px;

	--shadow-low:
		0.3px 0.6px 0.8px oklch(0 0 0 / 30%),
		0.5px 1px 1.3px -1.2px oklch(0 0 0 / 10%),
		1.3px 2.4px 3.1px -2.5px oklch(0 0 0 / 10%);

	--shadow-medium:
		0.3px 0.5px 0.7px oklch(0 0 0 / 7%),
		0.8px 1.6px 2px -0.8px oklch(0 0 0 / 7%),
		2.1px 4.1px 5.2px -1.7px oklch(0 0 0 / 7%),
		5px 10px 12.6px -2.5px oklch(0 0 0 / 7%);

	--shadow-high:
		-1px -1px 5px oklch(0 0 0 / 10%), 0.3px 0.5px 0.7px oklch(0 0 0 / 10%),
		1.5px 2.9px 3.7px -0.4px oklch(0 0 0 / 10%),
		2.7px 5.4px 6.8px -0.7px oklch(0 0 0 / 10%),
		4.5px 8.9px 11.2px -1.1px oklch(0 0 0 / 10%),
		7.1px 14.3px 18px -1.4px oklch(0 0 0 / 10%),
		11.2px 22.3px 28.1px -1.8px oklch(0 0 0 / 10%),
		17px 33.9px 42.7px -2.1px oklch(0 0 0 / 10%);
}

*,
*:before,
*:after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--color-information);
}

::selection {
	background-color: #7f7f7f80;
	text-shadow: none;
}

html {
	font-family: 'Martian', Arial, sans-serif;
	font-size: 16px; /* in html (not in body) for the CSS 'rem' unit */
	text-size-adjust: none; /* property controls the text inflation algorithm used on some smartphones and tablets. Other browsers will ignore this property. We don't want to automatically resize on mobile. */
	line-height: 1.5;
	height: 100%;
	interpolate-size: allow-keywords;
	scrollbar-width: thin;
	scrollbar-color: #aaa #eee;
}

body {
	background: var(--color-background-1);
	color: var(--color-text-1);
	height: 100%;
	scrollbar-color: var(--color-text-2) transparent;
}

html:has(dialog[open]) {
	/* When dialog is shown, show scrollbar to avoid page flicker if scrollbar would disappear */
	scrollbar-gutter: stable;
	body {
		overflow: hidden;
	}
}

a {
	color: inherit;
	text-decoration: underline;
	-webkit-tap-highlight-color: transparent;
}

/* not([class]): Do not apply opacity to any tags with classes (e.g. buttons) */
a:not([class]):active {
	color: var(--color-accent-1);
}

ul {
	padding: 0 0 0 24px;
	list-style-type: square;
}

ol {
	padding: 0 0 0 24px;
}

img {
	vertical-align: text-bottom;
}

h1 {
	font-size: 1.6rem;
}

h1.page-headline {
	text-align: center;
	padding: 32px 0 32px 0;
}

h2 {
	font-size: 1.3rem;
}

h2.page-headline {
	text-align: center;
	padding: 24px 0 24px 0;
}

h3 {
	font-size: 1.25rem;
}

h4 {
	font-size: 0.9rem;
	text-transform: uppercase;
	color: var(--color-text-2);
}

p {
	padding-bottom: 16px;
}

hr {
	border: none;
	height: 2px;
	margin: 0;
	background: var(--color-background-2);
}

footer {
	padding: 32px;
	font-size: 0.8rem;
	max-width: 1024px;
	margin: 0 auto;
	display: flex;
	gap: 16px;
	justify-content: space-between;
	flex-direction: column;
}

footer a,
footer span {
	padding: 8px 0;
	text-decoration: none;
	white-space: nowrap;
}