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%); } }