.scanlines {
	position          : fixed;
	left              : 0;
	top               : 0;
	width             : 100vw;
	height            : 100vh;
	pointer-events    : none;
	z-index           : 300;
	opacity           : 0.6;
	will-change       : opacity;
	-webkit-animation : opacity 3s linear infinite;
	animation         : opacity 3s linear infinite;
}

.scanlines:before {
	content           : "";
	position          : absolute;
	left              : 0;
	top               : 0;
	right             : 0;
	bottom            : 0;
	pointer-events    : none;
	background        : linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.5) 51%);
	background-size   : 100% 4px;
	will-change       : background, background-size;
	-webkit-animation : scanlines 0.2s linear infinite;
	animation         : scanlines 0.2s linear infinite;
}

@-webkit-keyframes scanlines {
	from {
		background      : linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.5) 51%);
		background-size : 100% 4px;
	}
	to {
		background      : linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 50%, transparent 51%);
		background-size : 100% 4px;
	}
}

@keyframes scanlines {
	from {
		background      : linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.5) 51%);
		background-size : 100% 4px;
	}
	to {
		background      : linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 50%, transparent 51%);
		background-size : 100% 4px;
	}
}
