.top-bar {
	transition: transform 0.4s ease-in-out;
	transform: scale(1);

	font-family: sans-serif;
	font-size: 20px;

	background-color: navy;
	color: white;

	position: relative;
	padding-top: 5px;
	padding-bottom: 5px;


	/* Initial appearance of texts. */
	.home {
		color: orange;

		padding-left: 60px;
		padding-right: 30px;
	}

	.about {
		color: orange;

		padding-left: 30px;
		padding-right: 30px;
	}

	.projects {
		color: lightgreen;
		
		padding-left: 30px;
		padding-right: 30px;
	}

	.contact {
		color: orange;

		padding-left: 30px;
		padding-right: 60px;
	}


	/* Appearance of texts when hovered over. */
	.home:hover {
		font-size: 23px;

		color: navy;
		background-color: orange;
	}

	.about:hover {
		font-size: 23px;

		color: navy;
		background-color: orange;
	}

	.projects:hover {
		font-size: 23px;

		color: navy;
		background-color: orange;
	}

	.contact:hover {
		font-size: 23px;

		color: navy;
		background-color: orange;
	}
}

.top-bar:hover {
	transition: transform 0.3s ease-in-out;
	transform: scale(1.015);
}