Add grids to NES Mario maps on themushroomkingdom.net

mushroomkingdom-gridify.user.css

/* ==UserStyle==
@name           Mushroom Kingdom Gridify
@namespace      https://gist.github.com/garrett/27db37934769262249ff76ac42cba7e1
@version        1.0.0
@description    Add a grid to Super Mario Bros. level maps
@author         Garrett LeSage
==/UserStyle== */
@-moz-document domain("themushroomkingdom.net") {
	div.mapwrapper {
		--block: 16px; /* blocks are 16px × 16px */
		--before-block: 15px;
		--screen: 384px; /* 24*16 */
		--before-screen: 382px; /* screen dividier is 2px */
		--offset: -128px 0; /* First screen is smaller by 8 blocks; 4:3 vs 16:9 */
		--color-block: rgba(50,50,50,.5);
		--color-screen: purple;
		border: 2px solid #ccc;
		position: relative;
	}
	div.mapwrapper img {
		padding: 0;
		border: none;
	}
	div.mapwrapper::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background:
			repeating-linear-gradient(to right, transparent 0, transparent var(--before-block), var(--color-block) var(--block)),
			repeating-linear-gradient(to bottom, transparent 0, transparent var(--before-block), var(--color-block) var(--block)),
			repeating-linear-gradient(to right, transparent 0, transparent var(--before-screen), var(--color-screen) var(--screen)),
			repeating-linear-gradient(to bottom, transparent 0, transparent var(--before-screen), var(--color-screen) var(--screen));
		background-position: var(--offset);
	}
}