Beispiel:SELFHTML-Beispiel-Grundlayout.css

/* Grundlayout für SELFHTML-Beispiele */

html {
	background: transparent!important;
  --blue: #337599;
  --green: #93b946;
  --red: #c82f04;
  --yellow: #dfac20;
  --lightblue: #d6e3eb;
  --lightgreen: #ebf5d7; 
  --lightred: #ffebe6;
  --lightyellow: #f9eed2;
}

body {
	margin: 1em auto;
	max-width: 60em;
	font-family: sans-serif;
	color: #333333;
}

h1  {
	border-radius: 0 .5rem .5rem;
	border: thin solid;
	padding: 1rem;
	margin: 1rem;
}

h1 {
	background: #F1F3F4 url("//wiki.selfhtml.org/images/a/ad/Selfhtml-beispiel_150.svg") 10px 5px no-repeat;
	border-color: #d5d5d5;
	font-size: 100%;
	padding-top: 60px;
}

@media(min-width: 20em) {
	h1 {
		font-size: 120%;
	}
}

@media(min-width: 25em) {
	h1 {
		font-size: 100%;
		padding-left: 200px;
		padding-top: 1rem;
	}
}

@media(min-width: 30em) {
	h1 {
		font-size: 110%;
		padding-left: 200px;
		padding-top: 1rem;
	}
}

@media(min-width: 35em) {
	h1 {
		font-size: 120%;
	}
}

@media(min-width: 40em) {
	h1 {
		font-size: 140%;
	}
}

@media(min-width: 50em) {
	h1 {
		font-size: 200%;
	}
}