* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
section {
	position: relative;
	width: 100%;
	height: 100vh;
	background: url(https://images.unsplash.com/photo-1468476396571-4d6f2a427ee7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2179&q=80);
	background-size: cover;
	animation: color-rotate 15s linear infinite;
}
section:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(rain.png);
	animation: rain .2s linear infinite;
}
@keyframes rain {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: 20% 100%;
	}
}
@keyframes rain-opacity {
	0% {
		opacity: 0.5;
	}
	50% {
		opacity: 0.7;
	}
	100% {
		opacity: 0.5;
	}
}
@keyframes color-rotate {
	0% {
		filter: hue-rotate(0deg);
	} 
	100% {
		filter: hue-rotate(360deg);
	}
}