@font-face {
	font-family: "Fingerings SS";
	src: url("../fonts/fingerings.woff2") format("woff2"),
		 url("../fonts/fingerings.woff") format("woff"),
		 url("../fonts/fingerings.ttf") format("ttf");
}

grid, flex {
	margin-block: 1.5rem 2rem;
}

grid {
	justify-items: center;
	gap: 1.5rem 1rem;
}

flex {
	justify-content: center;
	gap: 1.5rem 2rem;
}

#fingeringChart {
	margin-top: 3.5rem;
}

fingering {
	font-family: "Fingerings SS";
	margin: 0;
}

item > small {
	font-size: 1.2rem;
	font-family: sans-serif;
}

item > fingering {
	display: block;
}

thumb-hole {
	position: relative;
	bottom: 0.25rem;
	font-size: 0.9rem;
}

double-left {
	display: inline-block;
	transform: scale(0.35) translate(0.2rem, -0.80rem);
}

double-right {
	display: inline-block;
	margin-right: -1.45rem;
	transform: scale(0.55) translate(-2.6rem, 0.5rem);
}

bell-hole {
	display: inline-block;
	margin-right: -0.25rem;
	transform: scaleX(0.5) translateX(-0.5rem);
}