body {
	background-image : url(ChinatownChicagoMap.png);
	background-color : rgb(40, 40, 40);
	background-repeat : no-repeat;
	background-size : cover;
}


#map {
	/*float : right;*/
	height : 560px;
	filter : invert(100%);
}

.v-bar {
	display : flex;
	flex-direction : column;
	justify-content : space-between;
	align-items : flex-start;
	/* You can't have two blurs stacked on top of each other*/
}

.h-bar {
	display : flex;
	flex-direction : row;
	justify-content : space-between;
	align-items : flex-start;
	background-color : rgba(40, 40, 40, 0.85);
	backdrop-filter : blur(4px) invert(100%);
}

#nav-bar {
	display : flex;
	flex-direction : column;
	justify-content : space-between;
	align-items : flex-start;
}

#top-bar {
	display : flex;
	flex-direction : row;
	justify-content : space-between;
	align-items : flex-start;
	height : 10%;
}

.nav-button {
	background-color : rgba(0.0, 0.0, 0.0, 0.0);
	color : rgb(60, 120, 255);
	width : 250px;
	height : 70px;
	border-width : 0px;
	border-color : rgb(60, 120, 255);
}

.nav-button:hover {
	animation-name : nav-button-hover;
	animation-duration : 0.3s;
	animation-fill-mode : forwards;
}

#content-image {

}

#content-paragraph {
	color : rgb(60, 120, 255);
	font-size : 18px;
}

#content-address {
	color : rgb(60, 120, 255);
	font-weight : bold;
}

#content-container {
	width : 500px;	
}

@keyframes nav-button-hover {
	from {
		background-color : rgba(0.0, 0.0, 0.0, 0.0);
		border-width : 0px;
	}
	to {
		background-color : rgba(100, 100, 100, 0.5);
		border-width : 0px 0px 2px 0px;
	}
}

/*flex-grow for cool styling*/