/* ------------------------------ */
/* Base                           */
/* ------------------------------ */

html {
	box-sizing: border-box;
	background: black;
}

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

body {
	margin: 0;
	line-height: 1.4;
	tab-size: 4;
}

main {
	display: block; /* Fix IE rendering main as inline */
	max-width: 42rem;
	min-height: 100vh;
	margin: auto;
	padding: 2rem 1rem 5rem;
	background: white;
}

h1 {
	margin-top: 0;
}

/* ------------------------------ */
/* 🔮 Overflow Scrolling          */
/* ------------------------------ */

/*
1. Use vw + % to break the element outside of its container.
2. Make the overflow scrollable.
3. Prevent the elements from wrapping.
4. Reset font-size to avoid extra whitespace rendering between list items.
	- Note: You *could* add HTML comments to remove the space too, but... ¯\_(ツ)_/¯
5. Use inline-block to have all the items sit on the same line.
6. Reset font-size back to its natural size.
 */
.overflow-scrolling {
	display: block;
	margin: 0 calc(50% - 50vw); /* 1 */
	padding: 0 calc(50vw - 50%);
	overflow: auto; /* 2 */
	white-space: nowrap; /* 3 */
	font-size: 0; /* 4 */
	list-style: none;
}

.overflow-scrolling li {
	display: inline-block; /* 5 */
	font-size: 1rem; /* 6 */
}

.overflow-scrolling li:not(:last-child) {
	margin-right: 1rem;
}

.overflow-scrolling a {
	display: block;
	min-width: 10rem;
	padding: 1rem;
	background: yellow;
	text-align: center;
}