/***********************
	SNOW STUFF START
***********************/

#snowBox {
	width:100vw;
	height:100vh;
	top:0;
	left:0;
	position:fixed;
	z-index:0;
	pointer-events:none;
}

#s1, #s2, #s3 {
	width:calc(100% + (var(--imgdim) * 2));
	height:calc(100% + (var(--imgdim) * 2));
	left:calc(-1 * var(--imgdim));
	top:calc(-1 * var(--imgdim));

	background-repeat:repeat;

	position:fixed;
}

#s1 {
	--imgdim:500px;
	background-image:url(/assets/common/img/s1.png);
	animation: move-right 15s linear infinite;
}

#s2 {
	--imgdim:400px;
	background-image:url(/assets/common/img/s2.png);
	animation: move-left 10s linear infinite;
}

#s3 {
	--imgdim:300px;
	background-image:url(/assets/common/img/s3.png);
	animation: move-left-right 10s infinite normal, move-down 10s infinite linear normal;
}

@keyframes move-right {
	0% {transform: translateX(0px) translateY(0px);}
	100% {transform: translateX(var(--imgdim)) translateY(var(--imgdim));}
}

@keyframes move-left {
	0% {transform: translateX(0px) translateY(0px);}
	100% {transform: translateX(calc(-1 * var(--imgdim))) translateY(var(--imgdim));}
}

@keyframes move-left-right {
	0% {
		transform: translateX(0px);
		animation-timing-function: ease-out;
	}
	25% {
		transform: translateX(var(--imgdim));
		animation-timing-function: ease-in;
	}
	50% {
		transform: translateX(0px);
		animation-timing-function: ease-out;
	}
	75% {
		transform: translateX(calc(-1 * var(--imgdim)));
		animation-timing-function: ease-in;
	}
	100% {
		transform: translateX(0px);
		animation-timing-function: ease-out;
	}
}

@keyframes move-down {
	0% {top:calc(-1 * var(--imgdim));}
	100%{top:0;}
}