@import '$lib/atkinson-hyperlegible.css';

:root {
	--background-color: #010502;
	/* used for gradients */
	--background-color-transparent: #01050200;

	--background-color-alt: #111;
	--background-color-alt-2: #222;
	--background-color-alt-3: #333;

	--text-color: #f7f4f4;
	--text-color-alt: #ddd;
	--text-color-alt-2: #bbb;
	--text-color-alt-3: #999;

	--accent-color: #0dc7f9;

	--text-font: 'Atkinson Hyperlegible';
}

html,
body,
#page {
	height: 100%;
	width: 100%;
	scroll-behavior: smooth;
}

body {
	background-color: var(--background-color);
	color: var(--text-color);
	font-family: var(--text-font);
	margin: 0;
}

button,
.button {
	background-color: var(--background-color-alt);
	border: 1px solid var(--background-color-alt-3);
	color: var(--text-color);
	font-size: inherit;
	border-radius: 0.25em;
	padding: 0.2em 0.6em;
	cursor: pointer;
	font-family: inherit;
	box-shadow: 0 0.1em 0.2em #000;
	text-decoration: none;
	transition: background-color 200ms;
}
button:hover,
.button:hover {
	background-color: var(--background-color-alt-2);
}

p {
	margin-top: 0;
}

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

.center {
	width: fit-content;
	margin: 0 auto;
}

hr {
	background-color: var(--background-color-alt);
	border-color: var(--background-color-alt);
	width: 90%;
	margin: 1rem auto;
}

img {
	max-height: 100%;
}
