Custom CSS that shapes this website

The custom boxes used for showcasing the projects in a nice and clean list are displayed using the following styles:

/** Projects **/
div.projects {
	display: grid;
	grid-template-columns: minmax(auto, 150px) auto;
	grid-gap: 1em;
	grid-auto-rows: minmax(150px, auto);
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

div.projects > div {
	background-color: rgb(244, 244, 244);
	text-align: center;
}

div.description {
	text-align: left;
}

div.project-icon {
	align-self: center;
}

I’ve seen a nice article which showed how to reverse an email address to reduce spam without any JavaScript required:

/** Anti Spam **/
span.reverse {
  unicode-bidi: bidi-override;
  direction: rtl;
}

Each project has a fancy top bar displaying the time it took and additional information about the project using these styles:

/** project details **/
div.projectInfoView {
	display: flex;
	text-align: center;
}

div.projectDate {
	background-color: #222;
	color: white;
	flex: 1;
}

div.projectTime {
	background-color: #00a0d2;
	color: white;
	flex: 1;
}

div.projectLanguage {
	background-color: #0073aa;
	color: white;
	flex: 1;
}

div.projectLOC {
	background-color: #333;
	color: white;
	flex: 1;
}

Maximizing the YouTube video player:

/** Youtube Player Maximization **/
div.youtube-container{
	 position: relative;
         padding-bottom: 56.25%;
         height: 0;
         overflow: hidden;
}

div.youtube-container iframe {
	position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
}