* { -moz-box-sizing: border-box; box-sizing: border-box; box-sizing: border-box; }

html, body { height: 100%; }

body {
	background: white;
	color: #224;
	margin: 100px 20px 0px 20px;
	line-height: 1.5em;
	font-size: 16px;
	font-family: Arial;
	perspective: 800px;
	overflow-x: hidden;

}

@keyframes stripes {
	0% { transform: translate3d(0px,0px,0px) }
	100% { transform: translate3d(-80px,0px,0px) }
}

@keyframes stripes-r {
	0% { background-position: 0px 0px }
	100% { background-position: 80px 0px }
}

a {
	display: inline-block;
}
a:hover {
	background: url(stripes-pink.png);
	color: white;
	border-bottom: none;
	text-decoration: none;
	padding: 1em;
	margin: -1em;
	animation: stripes-r .4s infinite linear;
}
div, a {
	transform-style: preserve-3d;
	transition: all .22s ease-out;
}
#root {
	max-width: 640px;
	margin: auto;
	z-index: 2;
}
h1 {
	display: inline;
}
#stripes-div {
	pointer-events: none;
	z-index: -1000;
	position: absolute;
	top: -100px;
	left: -20px;
	right: -120px;
	bottom: 0px;
	background: url(stripes-white.png);
	opacity: 0;
	transition: opacity .2s linear;
}
body.stripes #stripes-div {
	animation: stripes .4s infinite linear;
	opacity: 1;
}