html {
	scroll-behavior: smooth;

	@media (prefers-reduced-motion: reduce) {
		scroll-behavior: auto;
	}
}

body {
	background-color: var(--color-white);
	color: var(--color-black);
	font-size: var(--font-size-md);
	font-family: var(--font-family-body);
	line-height: var(--line-height-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-family-heading);
	line-height: var(--line-height-heading);
}

a {
	color: var(--color-black);
	text-decoration-color: var(--color-green);
	text-decoration-thickness: 2px;

	&:hover {
		color: var(--color-green);
	}
}