@font-face {
  	font-family: 		"JetBrains Mono";
	src: 			url("../fonts/JetBrainsMono-Regular.woff2") format("woff2");
	font-weight: 		400;
	font-style: 		normal;
	font-display: 		swap;
}

body {
	background:		#16161D;

	font-family:		"JetBrains Mono", monospace;
	color:			#FFF8E7;

	display: 		flex;
	flex-direction: 	column;
	align-items: 		center;
	justify-content: 	center;
}

body::-webkit-scrollbar {
  	display: 		none;
}

a {
	text-decoration: 	none;
}

.asciiArt {
  	font-family: 		"JetBrains Mono", monospace;
	white-space: 		pre;
	line-height: 		0.5;
	font-size: 		16px;	
	padding-top:		20px;
}
 
.aboutSection {
	display: 		flex;
	flex-direction: 	column;
	align-items: 		center;
	justify-content: 	center;
	text-align:		center;
}


.technologiesSection {
	display: 		flex;
	flex-direction: 	column;
	align-items: 		center;
	justify-content: 	center;
}
.technologiesContainer {
	display:		grid;
	width:			550px;
	grid-template-columns:  auto auto auto auto auto auto;
	align-items:		center;
	justify-content:	center;
	gap:			4px;
}

.technologiesContainer > div {
	width:			100px;
	height:			30px;
	display: 		flex;
	align-items:		center;
	justify-content:	center;
	background-color:	rgba(0,0,0,0.25);
}

.projectsSection {
	display: 		flex;
	flex-direction: 	column;
	align-items: 		center;
	justify-content: 	center;
}

.projectsContainer {
	display:		grid;
	grid-template-columns:  auto auto auto;
	align-items:		center;
	justify-content:	center;
	gap:			10px
}

.projectsContainer > div {
	width:			420px;
	height:			575px;
	display: 		flex;
	flex-direction: 	column;
	align-items:		center;
	justify-content:	flex-start;
	border:			1px solid rgba(210,230,255,0.2);
	background-color:	rgba(0,0,0,0.25);
	color:			#fff;
}

.projectsHeader {
	display: 		flex;
	flex-direction: 	horizontal;
	justify-content:	space-between;
	width: 			400px;
	height: 		45px;
	box-sizing: 		border-box;

}

.projectsTitle {
	width: 			250px;
	color:			rgba(255,250,220,1)
}

.openSource,
.closedSource {
	display: 		flex;
	text-align:		right;
	width:			auto;
	height:			18px;
	color: 			#0C0C0F;
	font-weight: 		bold;
	padding-left: 		2px;
	padding-right: 		2px;
	padding-bottom: 	1px;
}

.openSource {
	background-color:	rgba(15,255,125,1)

}

.closedSource {
	background-color:	rgba(255,125,25,1)

}

.projectsThumbnail {
	width:			402px;
	height:			263px;
	background-color:	#fff;
}

.projectsDescription {
	height:			200px;
	text-align: 		justify;
	padding-left: 		12px;
	padding-right: 		12px;
	color:			rgba(200,190,190,1);

}

.projectsFooter {
	display: 		flex;
	flex-direction: 	row;
	flex-wrap: 		wrap;
	height: 		45px;
	width: 			400px;
	padding-left: 		12px;
	padding-right: 		12px;
	align-content: 		flex-end;
	align-items: 		flex-start;
	justify-content: 	flex-start;
	gap: 			2px 2px;
	padding-bottom:		12px;
}


.footer {
	display: 		flex;
	flex-direction: 	horizontal;
	height: 		150px;

}