yanns1

/**
 * Scrolling hints
 */

ul {
	display: inline-block;
	overflow: auto;
	width: 7.2em;
	height: 7em;
	border: 1px solid silver;

yanns1

/**
 * De-emphasizing by blurring (AND dimming)
 */

main {
	transition: .6s;
	background: white;
}

main.de-emphasized {

yanns1

/**
 * Rudimetary overlay with box-shadow
 */

.lightbox {
	position: fixed;
	top: 50%; left: 50%;
	margin: -200px;
	box-shadow: 0 0 0 50vmax rgba(0,0,0,.8);
}

yanns1

/**
 * Toggle buttons
 */

input[type="checkbox"] {
	position: absolute;
	clip: rect(0,0,0,0);
}

input[type="checkbox"] + label {

yanns1

/**
 * Custom checkboxes
 */

input[type="checkbox"] {
	position: absolute;
	clip: rect(0,0,0,0);
}

input[type="checkbox"] + label::before {

yanns1

/**
 * Extending the hit area — with generated content
 */

button {
	position: relative;
	padding: .3em .5em;
	background: #58a;
	border-radius: 50%;
	border: 1px solid rgba(0,0,0,.3);

yanns1

/**
 * Indicating disabled state
 */

:disabled, [disabled], [aria-disabled="true"] {
	cursor: not-allowed;
}

yanns1

/**
 * Text on a circle
 */

body {
	font: bold 120% Helvetica, sans-serif;
}

.circular {
	width: 30em;

yanns1

/**
 * Extruded text
 */

body {
	background: #58a;
	color: white;
	text-shadow: 0 1px hsl(0,0%,85%),
	             0 2px hsl(0,0%,80%),
	             0 3px hsl(0,0%,75%),

yanns1

/**
 * Glowing text
 */

body {
	background: #203;
	font: bold 500%/1 Rockwell, serif;
}

a {