:root {
	--foreground: #fafafa;
	--background: #09090b;
	--primary: #ff6900;
	--secondary: #27272a;
	--card: #18181b;
}

* {
	font-family: Arial, Helvetica, sans-serif;
	box-sizing: border-box;
	margin: 0;
}

body {
	color: var(--foreground);
	background-color: var(--background);
}

.page-container {
	max-width: 80rem;
	margin: 0px auto;
	display: flex;
}

.page-content {
	padding: 40px 8px;
	min-width: 20rem;
	min-height: 100vh;
	flex-grow: 1;
}

@media (max-width: 1024px) {
	.page-content {
		grid-column-start: 1;
		grid-column-end: 3;
	}
}

a {
	border-radius: 4px;
	color: var(--primary);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:focus-visible,
summary:focus-visible,
label:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 4px;
}

.icon {
	width: 20px;
	height: 20px;
}

.credits {
	display: flex;
	flex-direction: column;
	gap: 8px;

	p {
		margin: 0 !important;
	}
}