Template:Job description/styles.css

.job-description {
	margin: 1em 0;
	border: 1px solid #a2a9b1;
	box-sizing: border-box;
}

.job-description-title,
.job-description-experience {
	background: linear-gradient(to bottom, #FCFCFC 0%, #F5F5F5 100%);
	padding: 0.7em 0.4em;
	border-bottom: 1px solid #a2a9b1;
}

.job-description-experience > div > span,
.job-description-minititle {
	font-weight: bold;
}

.job-description-description,
.job-description-skills,
.job-description-links {
	font-size: 90%;
	padding: 0.5em;
}

.job-description-title h3 {
	margin: 0;
	padding: 0;
}

.job-description-minititle {
	margin-top: 0.2em;
	margin-bottom: 0.5em;
}

.job-description-all {
	color: green;
}

.job-description-intermediate {
	color: darkgoldenrod;
}

.job-description-advanced {
	color: firebrick;
}

.job-description-ambitious {
	color: darkred;
}

@media (min-width: 720px) {
	.job-description {
		display: grid;
		grid-template-columns: 50% 18% 32%;
	}
	
	.job-description-title {
		grid-column: 1 / 3;
	}
	
	.job-description-experience {
		justify-content: center;
	}
	
	/* hack to get vertical aligned center in grid */
	.job-description-title,
	.job-description-experience {
		display: flex;
    	align-items: center;
	}
	
	.job-description-experience > div {
		text-align: center;
	}
	
	.job-description-title,
	.job-description-description,
	.job-description-skills {
		border-right: 1px solid #a2a9b1;
	}
}

@media screen {
	html.skin-theme-clientpref-night .job-description-title,
	html.skin-theme-clientpref-night .job-description-experience {
		background: linear-gradient(to bottom, #0a0a0a 0%, #202122 100%);
	}
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .job-description-title,
	html.skin-theme-clientpref-os .job-description-experience {
		background: linear-gradient(to bottom, #0a0a0a 0%, #202122 100%);
	}
}