*{
	font-family: Arial;
	margin:1px;
	padding:0;
	border:0;
}

:root {
	--body-background-color: hsla(202, 70%, 85%, 1);
	--chart-background-color: hsla(202, 70%, 80%, 1);
	--land-color: darkgrey;

	--cheap-city-color: #762a83;
	--average-city-color: white;
	--expensive-city-color: #1b7837;

	--cost-living-color: #e41a1c;
	--rent-color: #377eb8;
	--groceries-color: #4daf4a;
	--restaurants-color: #984ea3;
	--purchasing-pwr-color: #ff7f00;
}

.container{ display: flex; }
.horizontal{ flex-direction: row; }
.vertical{ flex-direction: column; }

body{
	background: var(--body-background-color);
}

#outerContainer{
	margin: 10px 10px;
	display: inline-block;
}

#filterContainer{
	width: 250px;
	height: 400px;
	background: var(--chart-background-color);
	border-radius: 10px;
}

#mapContainer{
	position: relative;
	width: 950px;
	height: 400px;
	background: var(--chart-background-color);
	border-radius: 10px;
}

#barContainer{
	width: 400px;
	height: 300px;
	background: var(--chart-background-color);
	border-radius: 10px;
}

#scatterContainer{
	width: 800px;
	height: 300px;
	background: var(--chart-background-color);
	border-radius: 10px;
}

h1{
	margin: 10px 10px;
	font-size: 20px;
	font-weight: normal;
}

h2{
	margin: 10px 10px;
	font-size: 18px;
	font-weight: normal;
}

p{
	margin: 5px 10px;
	font-size: 14px;
	color: black;
}

li {
    font-size: 14px;
    margin-left: 30px;
 }