.projects-tag {
	width: 100%;
	display: flex;
	justify-content: space-evenly;
	max-width: 480px;
	flex-wrap: wrap;
	margin-left: 5vh;
	margin-right: 5vh;
	margin-bottom: 3vh;
}

.projects-tag button {
	font-size: 1.5rem;
	padding: 0.5rem 1rem;
	margin: 0.5rem;
	border-radius: 2em;
}

.projects-tag button:hover {
	color: var(--text);
}

.projects-tag button.c-button:hover {
	background-color: var(--c-tag);
}

.projects-tag button.cpp-button:hover {
	background-color: var(--cpp-tag);
}

.projects-tag button.devops-button:hover {
	background-color: var(--devops-tag);
}

.projects-tag button.web-button:hover {
	background-color: var(--web-tag);
}


.projects-container {
	width: 100%;
	max-width: 1140px;
}

.project {
	display: flex;
	justify-content: center;
	flex-direction: row;
	margin-bottom: 3em;
}

.project-title {
	display: flex;
	justify-content: left;
	width: 40%;
	padding-left: 2em;
	padding-right: 2em;
}

.project-title h2::after {
	content: "";
	display: flex;
	align-items: right;
	height: 5px; 
	width: 100%;
	max-width: 1.7em;
}

.c-project div.project-title h2::after {
	background-color: var(--c-tag);
}

.cpp-project div.project-title h2::after {
	background-color: var(--cpp-tag);
}

.devops-project div.project-title h2::after {
	background-color: var(--devops-tag);
}

.web-project div.project-title h2::after {
	background-color: var(--web-tag);
}


.project-desc {
	display: flex;
	justify-content: left;
	text-align: left;
	width: 60%;
}

.project-desc img, .project-desc video {
	max-width: 100%;
	max-height: 100px;
	margin: 1em;
	/* display image at middle */
	margin-left: auto;
	margin-right: auto;
}

.project-desc p {
	text-align: left;
}

.hide {
	display: none;
}

@media (max-width: 1120px) {
	.project {
		flex-direction: column;
	}

	.project-title {
		width: 100%;
		padding-left: 3em;
	}

	.project-desc {
		width: 100%;
		padding: 2em;
	}
}