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

* {
	margin: 0;
}

body {
	background-color: var(--theme-background);
	color: var(--theme-foreground);
	max-width: var(--max-width);
	margin: 0 auto;
	padding: var(--spacing-xl) 16px;
	animation: fade 1s ease-in;
}

@keyframes fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

img,
svg {
	display: block;
	user-select: none;
}

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

a,
img,
li,
button {
	transition: filter var(--transition-fast);
}

a:hover,
img:hover,
li:hover,
button:hover {
	filter: brightness(0.67);
}

button,
[role="button"] {
	color: inherit;
	cursor: pointer;
}

html, body {
	font-size: var(--font-size-base);
}

html, body, pre, code, button {
	font-family:
		"Iosevka Custom Web", "Iosevka Custom", "Iosevka", monospace, sans-serif;
	line-height: 1.7;
}