html {
    background: white;
    scroll-behavior: smooth;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/**
 * Layout
 */
 body {
	margin: 0 auto;
	max-width: 40em;
	width: 88%;
}

.section {
	color: #ffffff;
	height: 75vh;
	margin: 0;
    scroll-margin-top: 1em;
}

#a { background-color: #0074d9; }
#b { background-color: #2ecc40; }
#c { background-color: #ff851b; }
#d { background-color: #b10dc9; }

h2 {
	margin: 0;
	padding: 0;
}

/**
 * Sticky navigation
 */
.sticky {
	background-color: #ffffff;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
}

/**
 * Display lists on a single line.
 * @bugfix Prevent webkit from removing list semantics
 * 1. Add a non-breaking space
 * 2. Make sure it doesn't mess up the DOM flow
 */
.list-inline {
	list-style: none;
	margin-left: -0.5em;
	margin-right: -0.5em;
	padding: 0;
}

.list-inline > li {
	display: inline-block;
	margin-left: 0.5em;
	margin-right: 0.5em;
}

.list-inline > li:before {
	content: "\200B"; /* 1 */
	position: absolute; /* 2 */
}