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

*:focus,
input[type='checkbox']:focus + label {
	outline: 2px solid var(--blue-light);
	outline-offset: 1px;
}

main:focus {
	outline: none;
}

::selection {
	background: var(--yellow);
	color: var(--neutral-900); /* WebKit/Blink Browsers */
}

::-moz-selection {
	background: var(--yellow);
	color: var(--neutral-900); /* Gecko Browsers */
}

::-webkit-scrollbar {
	width: 0.5rem;
	height: calc(var(--eighth-note) * 0.25);
}

::-webkit-scrollbar,
::-webkit-scrollbar-track {
	/* the "track" of the bar - great for customizing "background" colors */
	background: var(--paper);
}

::-webkit-scrollbar-thumb {
	/* the actual draggable element, the star of the show! */
	background: var(--yellow);
}

body {
	font-family: var(--body-font);
	color: var(--ink);
	margin: 0;
	padding: 0;
}

html,
body {
	scrollbar-color: var(--yellow) var(--paper);
	scrollbar-width: thin;

	// Had this before, but doesn't work well with footnotes.
	// &.smooth-scroll {
		// scroll-behavior: smooth;
	// }
}

:target {
	scroll-margin-block: 2rem;
}

footer :target {
	scroll-margin-block: 16px;
}