304352303

/**
 * Smooth state animations
 * Photo credits: https://www.flickr.com/photos/employtheskinnyboy/3904743709
 */

@keyframes panoramic {
	to { background-position: 100% 0; }
}

.panoramic {

304352303

/**
 * Blinking
 */

@keyframes blink-1 { 50% { color: transparent } }
@keyframes blink-2 { to { color: transparent } }

p {
	padding: 1em;
	background: gold;

304352303

/**
 * Sticky footer with flexible height
 */
 
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

304352303

/**
 * Bouncing animation
 */

@keyframes bounce {
	60%, 80%, to {
		transform: translateY(50px);
		animation-timing-function: ease;
	}
	70% { transform: translateY(300px); }

304352303

/**
 * Vertical centering - absolute positioning method
 */

main {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(50%, 50%);
	

304352303

/**
 * 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);

304352303

/**
 * Extending the hit area — with borders
 */

button {
	padding: .3em .5em;
	border: 10px solid transparent;
	border-radius: 50%;
	background: #58a;
	background-clip: padding-box;

304352303

/**
 * Wavy underlines
 */

body {
	font: 250%/1.6 Baskerville, Palatino, serif;
}

a {
	background: linear-gradient(-45deg, blue 40%, red 0, red 60%, green 0) 0 1em,

304352303

/**
 * Fancy Ampersands
 */

@font-face {
	font-family: Ampersand;
	src: local('Baskerville-Italic'), local('GoudyOldStyleT-Italic'), local('Garamond-Italic'), local('Palatino-Italic');
	unicode-range: U+500;
}

304352303

/**
 * Zebra striped text lines
 */

pre { 
	padding: .5em;
	line-height: 1.5;
	background: hsl(20, 50%, 95%);
	background-image: linear-gradient(
	                  rgba(120,0,0,.1) 50%, transparent 0);