:root {
	--tech-gap: 4svw;
}
.tech-cat {
	/* border: 1px solid salmon; */
	padding: 0px 1svw;
	padding-bottom: 2svh;
	margin-bottom: 3svh;
	flex: 1 1 auto;
	background-color: var(--card-background-color);
	border-radius: var(--card-border-radius);
}

.tech-cat h3 {
	border-bottom: var(--underlineTitle);
	border-radius: var(--underlineTitleBorderRadius);
	margin: 2svh 1svw;

	padding-left: 2svw;
	padding-bottom: 1svh;
}

.tech-row {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-evenly;
	/* column-gap: 0.5svw; */
	row-gap: 1svh;
}

.tech-card {
	/* border: 1px solid whitesmoke; */

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

	flex: 0 1 70px;
	text-decoration: none;
	color: inherit;
	padding: 0px 0.5svw;
	padding-top: 2svh;
	padding-bottom: 0.5svh;
	background-color: var(--card-background-color);
	border-radius: var(--card-border-radius);
}

.tech-card img {
	width: 32px;
	height: 32px;
	aspect-ratio: 1;
	object-fit: contain;
}

.tech-card progress {
	width: 90%;
	margin-bottom: 0.5svh;
	overflow: hidden;
	appearance: none;
	border-radius: 999px;
	justify-self: flex-end;
	align-self: center;
}

.tech-card h4 {
	margin: 1svh 0.5svw;
	width: 80px;
	text-align: center;
	font-weight: normal;
}

/* for chromium browsers */
.tech-card progress::-webkit-progress-value {
	background-color: steelblue;
	/* border-radius: 999px; */
}

/* for firefox browsers */
.tech-card progress::-moz-progress-bar {
	background-color: steelblue;
	/* border-radius: 999px; */
}

/* 48.19 , 68.58*/