body {
	margin: 0;
	background-color: black;
}

#canvas {
	position:absolute;
	top:0;
	left:0;
	height:100vh;
	width:100vw;
	z-index: 1;
}

#grain {
	background-image:url("../img/grain.png");
	height: 300%;
	width: 300%;
	position: fixed;
	opacity:0.1;
	animation: animateGrain 8s steps(10) infinite;
	z-index: 5;
}

@keyframes animateGrain {
	0%, 100% { transform:translate(0, 0) }
	10% {
		transform:translate(-5%,-10%)
	}
	20% {
		transform:translate(-15%,-20%)
	}
	30% {
		transform:translate(-5%,-10%)
	}
	40% {
		transform:translate(-15%,-20%)
	}

	50% {
		transform:translate(-5%,-10%)
	}
	60% {
		transform:translate(-15%,-20%)
	}
	70% {
		transform:translate(-5%,-10%)
	}
	80% {
		transform:translate(-15%,-20%)
	}
	90% {
		transform:translate(-5%,-10%)
	}
	100% {
		transform:translate(-15%,-20%)
	}
}

#vignette {
	position:absolute;
	top:0;
	left:0;
	height:100vh;
	width:100vw;
	z-index: 10;
	box-shadow: inset 0 0 20vw #000;
}