/* 1. Enable smooth scrolling */
html {
	scroll-behavior: smooth;
}

/* 2. Make nav sticky */
main > nav {
	position: sticky;
	top: 10rem;
	align-self: start;
}

/* 3. ScrollSpy active styles (see JS tab for activation) */
.section-nav li.active > a {
	color: #333;
	font-weight: 600;
}

/* Sidebar Navigation */
.section-nav {
	padding-left: 0;
	border-left: 1px solid #efefef;
	font-size: 18px;
}

.section-nav a {
	text-decoration: none;
	display: block;
	padding: .425rem 0;
	color: #ccccccfa;
	transition: all 50ms ease-in-out; /* 💡 This small transition makes setting of the active state smooth */
}

.section-nav a:hover,
.section-nav a:focus {
	color: #666;
}

/** Poor man's reset **/
* {
	box-sizing: border-box;
}

html, body {
	background: #fff;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

ul, ol {
	list-style: none;
	margin: 0;
	padding: 0;
}
li {
	margin-left: 1rem;
}

h1 {
	font-weight: 300;
}

h2 {
	color:#343844;
}

/** page layout **/
main {
	display: grid;
	grid-template-columns: 85% 15em;
	max-width: 100%;
	width: 95%;
	margin: 0 auto;
}

/** enlarge the sections for this demo, so that we have a long scrollable page **/
section {
	margin-bottom: 1rem;
	padding-left: 1rem;
	padding-right: 0.5rem;
	border-style: solid;
	border-width: 2px;
	border-color: #343844;
	border-radius: 5px;
}

#expanders-wrapper {
	display: flex;
	justify-content: center;
}

#bubble-chart, #chNum {
	display: flex;
	justify-content: center;
}