* {
	margin: 0;
	padding: 0;
	font-family: Roboto, sans-serif;
	color: #404040;
	box-sizing: border-box;
}

:root {
	--baby-blue: #11d7d8;
	--baby-pink: #fc9ab6;
	--blue-tint: #aae2df;
	--blue-dark-tint: #63c8c4;
	--pink-tint: #facfd9;
}

/* Add space between Vega-Embed links  */
.vega-actions a {
	margin-right: 5px;
}

/* --------content ----------*/



#vis-parent {
	display: flex;
	justify-content: center;
	padding: 50px 0;
}

#vis-parent div {
	box-shadow: 0px 0px 0px grey;
}


h2 {
	font-size: 36px;
}

h3 {
	font-size: 24px;
}

p {
	padding: 10px 0;
	font-size: 18px;
}

p b {
	color: var(--baby-blue);
}

a {
	color: var(--baby-blue);
}

img {
	width: 80%;
	height: auto;
	margin: 5% 10%;
}

iframe {
	margin: 5% 10%;
}


#banner {
	padding: 40px 150px;
	background-color: #F5F5F5;
	text-align: center;
}
#banner-title {
	padding: 50px;
	color: var(--baby-blue);
}

.section-banner {
	background-color: white;
}

.content-holder {
	width: 1000px;
	margin: 0 auto;
	padding: 50px 0px;
}

.visualization1 {
	background-color: white;
}
.visualization2 {
	background-color: #f6d2d6;
}
.visualization3 {
	background-color: #F5F5F5;
}


#vis1-parent {
	display: flex;
	justify-content: center;
}

footer {
	text-align: center;
	background-color: #404040;
	font-size: 14;
	padding: 10px;
	color: white;
}

footer p {
	color: white;
}

/* ----- Header section ----- */

.navbar {
	background-color: white;
	text-align: center;
	position: -webkit-sticky; /* for safari */
	position: sticky;
	top: 0;
	z-index: 999;
	width: 100%;
	height: auto;
	box-shadow: 0px 0px 5px grey;
}

.navbar h1 {
	align-self: center;
	padding: 10px 0;
}

.navbar h1 a {
	font-weight: 500;
	font-size: 28px;
	text-decoration: none;
	color: #404040;
	text-transform: uppercase;
}

.navbar h1 a:hover {
	color: var(--baby-blue);
}

.nav-toggle {
	display: none;
}

.nav-toggle-label {
	position: absolute;
	top: 0;
	left: 0;
	margin-left: 1em;
	height: 100%;
	display: flex;
	align-items: center;
}

.nav-toggle-label span,
.nav-toggle-label::before,
.nav-toggle-label::after {
	display: block;
	height: 2px;
	width: 2em;
	border-radius: 2px;
	position: relative;
	background-color: black;
} 

.nav-toggle-label::before,
.nav-toggle-label::after {
	content: '';
	position: absolute;
}

.nav-toggle-label::before {
	bottom: 18px;
}

.nav-toggle-label::after {
	top: 18px;
}

nav {
	position: absolute;
	text-align: left;
	top: 100%;
	left: 0;
	background-color: white;
	width: 100%;
	transform: scale(1, 0);
	transform-origin: top;
	transition: transform 300ms ease-in-out;
}
nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

nav li {
	margin: 1em;
	font-size: 0.8em;
}
nav a {
	text-decoration: none;
	color: #404040;
	text-transform: uppercase;
	opacity: 0;
	transition: opacity 150ms ease-in-out;
}
nav a:hover {
	color: var(--baby-blue);
}

.nav-toggle:checked ~ nav {
	transform: scale(1, 1);
}

.nav-toggle:checked ~ nav a {
	opacity: 1;
	transition: opacity 200ms ease-in-out 200ms;
}



@media screen and (min-width: 780px) {
	
	/*----------- Header section --------*/
	.nav-toggle-label{
		display: none;
	}

	.navbar {
		display: grid;
		grid-template-columns: 1fr auto minmax(500px, 3fr) 1fr;
	}

	.navbar h1 {
		grid-column: 2/3;
	}

	nav {
		all: unset;
		grid-column: 3 / 4 ;
		align-self: center;
	}

	nav ul {
		display: flex;
		justify-content: flex-end;

	}

	nav a {
		opacity: 1;
		position: relative;
	}

	nav a::before {
		content: '';
		display: block;
		height: 4px;
		background: var(--baby-blue);
		position: absolute;
		bottom: -0.5em;
		left: 0;
		right: 0;
		transform: scale(0, 1);
		transform-origin: left;
		transition: transform ease-in-out 250ms;
	}

	nav a:hover::before {
		transform: scale(1, 1);
	}