@font-face {
	font-family: Industry;
	src: url( 'Industry.ttf' );
}
body {
	overflow: hidden;
}
canvas {
	position: absolute;
	top: 0;
	left: 0;
}
canvas#bg-c {
	background-image: url('space-bg.jpg');
}
canvas#c {
	background-image: url('planet.png');
	background-repeat: no-repeat;
	background-position-x: calc( 50vw - 300px );
	background-position-y: calc( 50vh - 300px );
	background-size: 600px;
}
a#hand-img {
	position: absolute;
	z-index: 2;
	top: calc( 50% - 210px );
	left: calc( 50% - 150px );
	opacity: 0;
	transition: .2s;
	-webkit-transition: .2s;
}
a#hand-img > img {

	width: 300px;
	transition: .2s;
	-webkit-transition: .2s;
}
a#hand-img:hover {
	top: calc( 50% - 250px );
	left: calc( 50% - 200px );
	opacity: .95;
	animation: shake .2s linear infinite;
	-webkit-animation: shake .2s linear infinite;
}
a#hand-img:hover > img {

	width: 400px;
}
a#hand-img:hover ~ canvas#c {

	animation: shake .5s linear infinite;
	-webkit-animation: shake .5s linear infinite;
}
a#hand-img.hide, a#hand-img.hide:hover, a#hand-img.hide > img, a#hand-img.hide:hover > img {
	width: 0px;
}

@keyframes shake {
	from {
		margin-left: 0px;
	}
	10% {
		margin-left: 5px;
	}
	15% {
		margin-left: -5px;
	}
	18% {
		margin-left: 0px;
	}
	20% {
		margin-left: 0px;
		margin-top: 5px;
	}
	30% {
		margin-top: -10px;
	}
	35% {
		margin-top: 5px;
	}
	50% {
		margin-top: 5px;
		margin-left: -2.5px;
	}
	100% {
		margin-top: 0px;
		margin-left: 0px;
	}

}
@-webkit-keyframes shake {
	from {
		margin-left: 0px;
	}
	10% {
		margin-left: 5px;
	}
	15% {
		margin-left: -5px;
	}
	18% {
		margin-left: 0px;
	}
	20% {
		margin-left: 0px;
		margin-top: 5px;
	}
	30% {
		margin-top: -10px;
	}
	35% {
		margin-top: 5px;
	}
	50% {
		margin-top: 5px;
		margin-left: -2.5px;
	}
	100% {
		margin-top: 0px;
		margin-left: 0px;
	}
}