Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="discount"></div>
<div class="blossom"></div>
<div class="ladybird"></div>
<div class="peep-holes"></div>
<div class="skulls"></div>
<div class="grannys-armchair"></div>
<div class="duchess"></div>
<div class="lawn"></div>
<div class="nightclub"></div>
<div class="chinese-lanterns"></div>
<div class="pumpkin-spice"></div>
<div class="feline"></div>
<div class="propeller"></div>
<div class="origami"></div>
<div class="shortbread-shake"></div>
<div class="fall"></div>
<div class="sea-wall"></div>
<div class="whispers"></div>
<div class="low-pressure"></div>
<div class="cyclone"></div>
<div class="water-trail"></div>
<div class="fishing-net"></div>
<div class="instrument-panel"></div>
<div class="spider-weave"></div>
<div class="echo-owl"></div>
<div class="sugar-lattice"></div>
<div class="copper-clasp"></div>
<div class="circulation"></div>
<div class="money-zoom"></div>
<div class="headstone"></div>
<div class="moth-bot"></div>
<div class="motor-warp"></div>
<div class="neon-mesh"></div>
<div class="ninja-star"></div>
<div class="braid"></div>
<div class="the-pond"></div>
<div class="segments"></div>
<div class="biohazard"></div>
<div class="phone-alert-system"></div>
<div class="life-buoy"></div>
<div class="lobby"></div>
<div class="target"></div>
<div class="confetti2"></div>
<div class="jam-sandwich"></div>
<div class="tennis"></div>
<div class="cobbles"></div>
<div class="bed-springs"></div>
<div class="linked"></div>
<div class="overlapping-shields"></div>
<div class="mystic-eye"></div>
<div class="lace"></div>
<div class="plant-cells"></div>
<div class="slashes"></div>
<div class="hollow-lemon"></div>
<div class="blood-cells"></div>
<div class="avocado"></div>
<div class="snag"></div>
<div class="bling-chunk"></div>
<div class="ocean"></div>
<div class="star-pips"></div>
<div class="bamboo"></div>
<div class="goldwork"></div>
<div class="interlock"></div>
<div class="knot-work"></div>
<div class="port-hole"></div>
<div class="terracotta-trace"></div>
<div class="purple-quartz"></div>
<div class="sort"></div>
<div class="nope"></div>
<div class="mermaid"></div>
<div class="rainbows"></div>
<div class="bones"></div>
<div class="villain-underpants"></div>
<div class="cumulus"></div>
<div class="quatrefoil"></div>
<div class="leaf"></div>
<div class="kitchen-tiles"></div>
<div class="medpack"></div>
<div class="lazy-triangle"></div>
<div class="isometric"></div>
<div class="googly-eyes"></div>
<div class="circles"></div>
<div class="fake-luggage"></div>
<div class="circle-grid"></div>
<div class="squares"></div>
<div class="blood-moon"></div>
<div class="pyramids"></div>
<div class="sharp-stars"></div>
<div class="stars"></div>
<div class="confetti"></div>
<div class="dots"></div>
<div class="cat-toes"></div>
<div class="diamonds"></div>
<div class="trellis"></div>
<div class="orange-buzz"></div>
<div class="lemon-lime-gingham"></div>
<div class="lavender-lumberjack"></div>
<div class="vertical-stripes"></div>
<div class="diagonal-stripes"></div>
<div class="stripes"></div>
              
            
!

CSS

              
                :root {
	--ambrosia:						#FCDBBA;
	--apricot: 						#FF8652;
	--aubergine: 					#6A2352;
	--auburn: 						#A12F2F;
	--asparagus: 					#A0C259;
	--beetroot:						#7F0421;
	--blue-tack: 					#82BFE0;
	--bloom:							#363A57;
	--blush: 							#D67B71;
	--bronze:							#C27940;
	--bud:								#94C15C;
	--burnt-orange:				#FF5F00;
	--butter:							#F2C94C;
	--strawberry-yogurt:	#E4BCAD;
	--carmine:						#9A133E;
	--chocolate: 					#8F5D38;
	--chestnut: 					#81291F;
	--clay: 							#7D6050;
	--conker: 						#6F3131;
	--coral: 							#EB4444;
	--dusty-purple: 			#7D6391;
	--dusty-pink: 				#E4ADAD;
	--emerald: 						#55B95F;
	--fern:								#4F8D08;
	--forest: 						#2E644A;
	--fudge:							#C28742;
	--grassy: 						#A8D363;
	--green:							#62B90A;
	--hazelnut: 					#D08E5A;
	--ink:								#292C31;
	--ivory:							#F2EFE3;
	--lapis:							#2B4D8D;
	--leafy:							#318553;
	--lemon:							#EAFC7E;
	--lime: 							#73D645;
	--limestone:					#C9C5B5;
	--magenta:						#BC2767;
	--meadow:							#7A9A3E;
	--melon:							#F2994A;
	--midnight:						#1B3955;
	--mink:								#E8C9A1;
	--mint:								#C4EA70;
	--moss:								#7DB21C;
	--mushroom:						#EDE8D5;
	--navy:								#363A57;
	--orange:							#FD8A04;
	--pale-lemon:					#F4FFDC;
	--peach:							#FFB190;
	--pond-bottom:				#264A46;
	--powder-blue:				#B5D0E0;
	--powder-pink:				#FBD1D1;
	--primrose:						#E1F7B0;
	--purple:							#A95AF3;
	--purple-slate:				#545375;
	--rainforest:					#25422E;
	--raspberry-jam:			#3C0D2B;
	--robins-egg:					#B8DEE0;
	--rouge:							#CC3737;
	--royal:							#4169E1;
	--ruby:								#D1314B;
	--sage:								#87A376;
	--sakura:							#FFE4E4;
	--sea-glass:					#7FD1AE;
	--sea-foam:						#5D998B;
	--sea-fog:						#758C92;
	--slate:							#7184A5;
	--spearmint:					#94E0CF;
	--spring:							#5ACB65;
	--succulent:					#83A944;
	--twilight:						#203763;
	--vavavoom:						#BF0D0D;
	--white:							#FFFFFF;
	--yellow:							#FFE03D;
	
	--trans: transparent;
	--trans05: rgba(255,255,255,0.05);
	--trans1: rgba(255,255,255,0.1);
	--trans2: rgba(255,255,255,0.2);
	--trans4: rgba(255,255,255,0.4);
}

* { margin: 0; padding: 0; font-size: 1em; }
body { background: #334; margin: 1em; max-width: 90em; }
div { height: 2em; width: 2em; display: inline-block; float: left; 
	margin: 0.1em; border-radius: 0.12em; font-size: 4em; position: relative; transform-style: preserve-3d; }
div::before,
div::after { 
	border-radius: 0.12em;
	content: '';
	display: block;
	position: absolute;
	height: 100%;
	width: 100%; }
.current { border-radius: 0; font-size: 5.5em; height: 5em; width: 5em; }
.current::before,
.current::after { border-radius: 0; }


.discount {
	background-color: var(--magenta); 
	background-image:
		repeating-radial-gradient(
			circle at 0 0.95em,
			var(--butter),
			var(--butter) 0.22em,
			var(--trans) 0.23em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 1em -0.05em,
			var(--butter),
			var(--butter) 0.22em,
			var(--trans) 0.23em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0 -0.05em,
			var(--butter),
			var(--butter) 0.22em,
			var(--trans) 0.23em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 1em 0.95em,
			var(--butter),
			var(--butter) 0.22em,
			var(--trans) 0.23em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0 0.3em,
			var(--butter),
			var(--butter) 0.22em,
			var(--trans) 0.23em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0 0.7em,
			var(--butter),
			var(--butter) 0.22em,
			var(--trans) 0.23em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 1em 0.3em,
			var(--butter),
			var(--butter) 0.22em,
			var(--trans) 0.23em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 1em 0.7em,
			var(--butter),
			var(--butter) 0.22em,
			var(--trans) 0.23em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.3em 0em,
			var(--butter),
			var(--butter) 0.22em,
			var(--trans) 0.23em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.7em 0em,
			var(--butter),
			var(--butter) 0.22em,
			var(--trans) 0.23em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.3em 1em,
			var(--butter),
			var(--butter) 0.22em,
			var(--trans) 0.23em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.7em 1em,
			var(--butter),
			var(--butter) 0.22em,
			var(--trans) 0.23em,
			var(--trans) 2em);
	background-size: 1em 1em;
}

.blossom {
	background-color: var(--twilight); 
	background-image:
		repeating-radial-gradient(
			circle at -0.2em 0.1em,
			var(--trans),
			var(--trans) 0.18em,
			var(--mushroom) 0.19em,
			var(--mushroom) 0.39em,
			var(--trans) 0.4em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.1em 1.2em,
			var(--trans),
			var(--trans) 0.18em,
			var(--mushroom) 0.19em,
			var(--mushroom) 0.39em,
			var(--trans) 0.4em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 1.2em 0.9em,
			var(--trans),
			var(--trans) 0.18em,
			var(--mushroom) 0.19em,
			var(--mushroom) 0.39em,
			var(--trans) 0.4em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.9em 1.2em,
			var(--trans),
			var(--trans) 0.18em,
			var(--mink) 0.19em,
			var(--mink) 0.39em,
			var(--trans) 0.4em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.9em -0.2em,
			var(--trans),
			var(--trans) 0.18em,
			var(--mushroom) 0.19em,
			var(--mushroom) 0.39em,
			var(--trans) 0.4em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at -0.2em 0.9em,
			var(--trans),
			var(--trans) 0.18em,
			var(--mink) 0.19em,
			var(--mink) 0.39em,
			var(--trans) 0.4em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 1.2em 0.1em,
			var(--trans),
			var(--trans) 0.18em,
			var(--mink) 0.19em,
			var(--mink) 0.39em,
			var(--trans) 0.4em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.1em -0.2em,
			var(--trans),
			var(--trans) 0.18em,
			var(--mink) 0.19em,
			var(--mink) 0.39em,
			var(--trans) 0.4em,
			var(--trans) 2em);
	background-size: 1em 1em;
}

.ladybird {
	background-color: var(--sage);
	background-image:
		
		repeating-radial-gradient(
			circle at 0.4em 0.17em,
			var(--mushroom),
			var(--mushroom) 0.04em,
			var(--ink) 0.04em,
			var(--ink) 0.07em,
			var(--trans) 0.07em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.6em 0.17em,
			var(--mushroom),
			var(--mushroom) 0.04em,
			var(--ink) 0.04em,
			var(--ink) 0.07em,
			var(--trans) 0.07em,
			var(--trans) 2em),
		
		repeating-radial-gradient(
			circle at 0.5em 0.25em,
			var(--ink),
			var(--ink) 0.15em,
			var(--trans) 0.16em,
			var(--trans) 1em),
		repeating-radial-gradient(
			circle at 0.5em 0.555em,
			var(--ink),
			var(--ink) 0.34em,
			var(--trans) 0.35em,
			var(--trans) 1em);
	background-size: 1em 1em;
	background-position: 0 0.4em;
}
.ladybird::before {
	background-image:
		
		repeating-radial-gradient(
			circle at 1em 0.54em,
			var(--rouge),
			var(--rouge) 0.32em,
			var(--ink) 0.32em,
			var(--ink) 0.33em,
			var(--trans) 0.34em,
			var(--trans) 2em);
	background-size: 1em 1em;
	background-position: 0.49em 0.42em;
}
.ladybird::after {
	background-image:
		
		repeating-radial-gradient(
			circle at 0.145em 0.52em,
			var(--ink),
			var(--ink) 0.07em,
			var(--trans) 0.08em,
			var(--trans) 2em),
		
		repeating-radial-gradient(
			circle at 0.84em 0.52em,
			var(--ink),
			var(--ink) 0.07em,
			var(--trans) 0.08em,
			var(--trans) 2em),
		
		repeating-radial-gradient(
			circle at 0 0.54em,
			var(--rouge),
			var(--rouge) 0.32em,
			var(--ink) 0.32em,
			var(--ink) 0.33em,
			var(--trans) 0.34em,
			var(--trans) 2em);
	background-size: 1em 1em;
	background-position: 0.51em 0.42em;
}

.peep-holes {
	background-image: 
		repeating-linear-gradient(
			-25deg,
		var(--apricot),
		var(--apricot) 0.1em,
		var(--coral) 0.1em,
		var(--coral) 0.2em,
		var(--blush) 0.2em,
		var(--blush) 0.3em,
		var(--peach) 0.3em,
		var(--peach) 0.4em,
		var(--melon) 0.4em,
		var(--melon) 0.5em);
}
.peep-holes::after {
	background-image:
		repeating-radial-gradient(
			circle at 0.5em 0.5em,
			var(--trans),
			var(--trans) 0.2em,
			var(--ivory) 0.21em,
			var(--ivory) 0.50em,
			var(--trans) 0.51em,
			var(--trans) 1em),
		repeating-radial-gradient(
			circle at 0 0,
			var(--trans),
			var(--trans) 0.2em,
			var(--ivory) 0.21em,
			var(--ivory) 0.50em,
			var(--trans) 0.51em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 1em 0,
			var(--trans),
			var(--trans) 0.2em,
			var(--ivory) 0.21em,
			var(--ivory) 0.50em,
			var(--trans) 0.51em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 1em 1em,
			var(--trans),
			var(--trans) 0.2em,
			var(--ivory) 0.21em,
			var(--ivory) 0.50em,
			var(--trans) 0.51em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0 1em,
			var(--trans),
			var(--trans) 0.2em,
			var(--ivory) 0.21em,
			var(--ivory) 0.50em,
			var(--trans) 0.51em,
			var(--trans) 2em),
		
		repeating-radial-gradient(
			circle at 0.5em 0.55em,
			var(--trans),
			var(--trans) 0.2em,
			var(--limestone) 0.21em,
			var(--limestone) 0.50em,
			var(--trans) 0.51em,
			var(--trans) 1em),
		repeating-radial-gradient(
			circle at 0 0.05em,
			var(--trans),
			var(--trans) 0.2em,
			var(--limestone) 0.21em,
			var(--limestone) 0.50em,
			var(--trans) 0.51em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 1em 0.05em,
			var(--trans),
			var(--trans) 0.2em,
			var(--limestone) 0.21em,
			var(--limestone) 0.50em,
			var(--trans) 0.51em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 1em 1.05em,
			var(--trans),
			var(--trans) 0.2em,
			var(--limestone) 0.21em,
			var(--limestone) 0.50em,
			var(--trans) 0.51em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0 1.05em,
			var(--trans),
			var(--trans) 0.2em,
			var(--limestone) 0.21em,
			var(--limestone) 0.50em,
			var(--trans) 0.51em,
			var(--trans) 2em);
	background-size: 1em 1em;
}

.skulls {
	background-color: var(--apricot);
	background-image:
		
		repeating-radial-gradient(
			circle at 0.5em 0.48em,
			var(--mushroom),
			var(--mushroom) 0.1em,
			var(--trans) 0.11em,
			var(--trans) 1em),
		repeating-radial-gradient(
			circle at 0.4em 0.46em,
			var(--mushroom),
			var(--mushroom) 0.1em,
			var(--trans) 0.11em,
			var(--trans) 1em),
		repeating-radial-gradient(
			circle at 0.6em 0.46em,
			var(--mushroom),
			var(--mushroom) 0.1em,
			var(--trans) 0.11em,
			var(--trans) 1em),
		
		repeating-radial-gradient(
			circle at 0.5em 0.68em,
			var(--trans),
			var(--trans) 0.24em,
			var(--mushroom) 0.25em,
			var(--mushroom) 0.37em,
			var(--trans) 0.38em,
			var(--trans) 1em),
		
		repeating-radial-gradient(
			circle at 0.35em 0.7em,
			var(--trans),
			var(--trans) 0.1em,
			var(--mushroom) 0.11em,
			var(--mushroom) 0.18em,
			var(--trans) 0.19em,
			var(--trans) 1em),
		repeating-radial-gradient(
			circle at 0.65em 0.7em,
			var(--trans),
			var(--trans) 0.1em,
			var(--mushroom) 0.11em,
			var(--mushroom) 0.18em,
			var(--trans) 0.19em,
			var(--trans) 1em),
		
		repeating-radial-gradient(
			circle at 0.42em 0.87em,
			var(--trans),
			var(--trans) 0.05em,
			var(--mushroom) 0.06em,
			var(--mushroom) 0.1em,
			var(--trans) 0.11em,
			var(--trans) 1em),
		repeating-radial-gradient(
			circle at 0.58em 0.87em,
			var(--trans),
			var(--trans) 0.05em,
			var(--mushroom) 0.06em,
			var(--mushroom) 0.1em,
			var(--trans) 0.11em,
			var(--trans) 1em),
		
		repeating-radial-gradient(
			circle at 0.5em 0.9em,
			var(--trans),
			var(--trans) 0.07em,
			var(--mushroom) 0.08em,
			var(--mushroom) 0.15em,
			var(--trans) 0.16em,
			var(--trans) 1em),
		
		repeating-radial-gradient(
			circle at 0.5em 1em,
			var(--trans),
			var(--trans) 0.14em,
			var(--mushroom) 0.15em,
			var(--mushroom) 0.23em,
			var(--trans) 0.24em,
			var(--trans) 1em),
		repeating-radial-gradient(
			circle at 0.5em 1.17em,
			var(--trans),
			var(--trans) 0.14em,
			var(--mushroom) 0.15em,
			var(--mushroom) 0.23em,
			var(--trans) 0.24em,
			var(--trans) 2em),
		
		
		repeating-radial-gradient(
			circle at 0.69em 0.01em,
			var(--mushroom),
			var(--mushroom) 0.04em,
			var(--trans) 0.05em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.57em 0.01em,
			var(--mushroom),
			var(--mushroom) 0.04em,
			var(--trans) 0.05em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.45em 0.01em,
			var(--mushroom),
			var(--mushroom) 0.04em,
			var(--trans) 0.05em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.32em 0.01em,
			var(--mushroom),
			var(--mushroom) 0.04em,
			var(--trans) 0.05em,
			var(--trans) 2em);
	background-size: 1em 1em;
	background-position: 0 0.8em;
}

.grannys-armchair {
	background-color: var(--blush);
	background-image:
		repeating-radial-gradient(
			circle at 1.34em 1.15em,
			var(--trans),
			var(--trans) 0.24em,
			var(--peach) 0.25em,
			var(--peach) 0.4em,
			var(--trans) 0.41em,
			var(--trans) 0.64em),
		repeating-radial-gradient(
			circle at -0.34em 1.15em,
			var(--trans),
			var(--trans) 0.24em,
			var(--peach) 0.25em,
			var(--peach) 0.4em,
			var(--trans) 0.41em,
			var(--trans) 0.64em),
		repeating-radial-gradient(
			circle at 1.34em -0.15em,
			var(--trans),
			var(--trans) 0.24em,
			var(--peach) 0.25em,
			var(--peach) 0.4em,
			var(--trans) 0.41em,
			var(--trans) 0.64em),
		repeating-radial-gradient(
			circle at -0.34em -0.15em,
			var(--trans),
			var(--trans) 0.24em,
			var(--peach) 0.25em,
			var(--peach) 0.4em,
			var(--trans) 0.41em,
			var(--trans) 0.64em);
	background-size: 1em 1em;
}

.duchess {
	background-color: var(--slate);
	background-image:
		repeating-radial-gradient(
			circle at 1.34em 1.12em,
			var(--trans),
			var(--trans) 0.34em,
			var(--butter) 0.35em,
			var(--butter) 0.4em,
			var(--trans) 0.41em,
			var(--trans) 0.74em),
		repeating-radial-gradient(
			circle at -0.34em 1.12em,
			var(--trans),
			var(--trans) 0.34em,
			var(--butter) 0.35em,
			var(--butter) 0.4em,
			var(--trans) 0.41em,
			var(--trans) 0.74em),
		repeating-radial-gradient(
			circle at 1.34em -0.12em,
			var(--trans),
			var(--trans) 0.34em,
			var(--butter) 0.35em,
			var(--butter) 0.4em,
			var(--trans) 0.41em,
			var(--trans) 0.74em),
		repeating-radial-gradient(
			circle at -0.34em -0.12em,
			var(--trans),
			var(--trans) 0.34em,
			var(--butter) 0.35em,
			var(--butter) 0.4em,
			var(--trans) 0.41em,
			var(--trans) 0.74em),
		repeating-radial-gradient(
			circle at 0em 0.5em,
			var(--trans),
			var(--trans) 0.24em,
			var(--robins-egg) 0.25em,
			var(--robins-egg) 0.31em,
			var(--trans) 0.32em,
			var(--trans) 0.77em),
		repeating-radial-gradient(
			circle at 1em 0.5em,
			var(--trans),
			var(--trans) 0.24em,
			var(--robins-egg) 0.25em,
			var(--robins-egg) 0.31em,
			var(--trans) 0.32em,
			var(--trans) 0.77em);
	background-size: 1em 1em;
}

.lawn {
	background-color: var(--clay);
	background-image:repeating-radial-gradient(
			circle at -0.7em 1.02em,
			var(--trans),
			var(--trans) 0.45em,
			var(--robins-egg) 0.46em,
			var(--robins-egg) 0.54em,
			var(--trans) 0.55em,
			var(--trans) 0.92em),
		repeating-radial-gradient(
			circle at 1.7em 1.02em,
			var(--trans),
			var(--trans) 0.45em,
			var(--robins-egg) 0.46em,
			var(--robins-egg) 0.54em,
			var(--trans) 0.55em,
			var(--trans) 0.92em),
		repeating-radial-gradient(
			circle at 1.34em 1.1em,
			var(--trans),
			var(--trans) 0.34em,
			var(--spring) 0.35em,
			var(--spring) 0.44em,
			var(--trans) 0.45em,
			var(--trans) 0.9em),
		repeating-radial-gradient(
			circle at -0.34em 1.1em,
			var(--trans),
			var(--trans) 0.34em,
			var(--spring) 0.35em,
			var(--spring) 0.44em,
			var(--trans) 0.45em,
			var(--trans) 0.9em),
		repeating-radial-gradient(
			circle at 0em 0.98em,
			var(--trans),
			var(--trans) 0.34em,
			var(--sea-glass) 0.35em,
			var(--sea-glass) 0.44em,
			var(--trans) 0.45em,
			var(--trans) 0.72em),
		repeating-radial-gradient(
			circle at 1em 0.98em,
			var(--trans),
			var(--trans) 0.34em,
			var(--sea-glass) 0.35em,
			var(--sea-glass) 0.44em,
			var(--trans) 0.45em,
			var(--trans) 0.72em);
	background-size: 1em 1em;
}

.nightclub {
	background-color: var(--navy);
	background-image:repeating-radial-gradient(
			circle at -0.3em 1.02em,
			var(--trans),
			var(--trans) 0.5em,
			var(--peach) 0.51em,
			var(--peach) 0.54em,
			var(--trans) 0.55em,
			var(--trans) 0.953em),
		repeating-radial-gradient(
			circle at 1.3em 1.02em,
			var(--trans),
			var(--trans) 0.5em,
			var(--peach) 0.51em,
			var(--peach) 0.54em,
			var(--trans) 0.55em,
			var(--trans) 0.953em),
		repeating-radial-gradient(
			circle at 1.04em 1em,
			var(--trans),
			var(--trans) 0.4em,
			var(--orange) 0.41em,
			var(--orange) 0.44em,
			var(--trans) 0.45em,
			var(--trans) 0.775em),
		repeating-radial-gradient(
			circle at -0.04em 1em,
			var(--trans),
			var(--trans) 0.4em,
			var(--orange) 0.41em,
			var(--orange) 0.44em,
			var(--trans) 0.45em,
			var(--trans) 0.775em),
		repeating-radial-gradient(
			circle at 0.06em 0.98em,
			var(--trans),
			var(--trans) 0.4em,
			var(--coral) 0.41em,
			var(--coral) 0.44em,
			var(--trans) 0.45em,
			var(--trans) 0.64em),
		repeating-radial-gradient(
			circle at 0.94em 0.98em,
			var(--trans),
			var(--trans) 0.4em,
			var(--coral) 0.41em,
			var(--coral) 0.44em,
			var(--trans) 0.45em,
			var(--trans) 0.64em);
	background-size: 1em 1em;
}

.chinese-lanterns {
	background-color: var(--carmine);
	background-image:repeating-radial-gradient(
			circle at -0.3em 0.5em,
			var(--trans),
			var(--trans) 0.5em,
			var(--peach) 0.51em,
			var(--peach) 0.54em,
			var(--trans) 0.55em,
			var(--trans) 0.7em),
		repeating-radial-gradient(
			circle at 1.3em 0.5em,
			var(--trans),
			var(--trans) 0.5em,
			var(--peach) 0.51em,
			var(--peach) 0.54em,
			var(--trans) 0.55em,
			var(--trans) 0.7em),
		repeating-radial-gradient(
			circle at 1.04em 0.5em,
			var(--trans),
			var(--trans) 0.4em,
			var(--orange) 0.41em,
			var(--orange) 0.44em,
			var(--trans) 0.45em,
			var(--trans) 0.7em),
		repeating-radial-gradient(
			circle at 0.06em 0.5em,
			var(--trans),
			var(--trans) 0.4em,
			var(--coral) 0.41em,
			var(--coral) 0.44em,
			var(--trans) 0.45em,
			var(--trans) 0.55em),
		repeating-radial-gradient(
			circle at 0.94em 0.5em,
			var(--trans),
			var(--trans) 0.4em,
			var(--coral) 0.41em,
			var(--coral) 0.44em,
			var(--trans) 0.45em,
			var(--trans) 0.55em),
		repeating-radial-gradient(
			circle at -0.04em 0.5em,
			var(--trans),
			var(--trans) 0.4em,
			var(--orange) 0.41em,
			var(--orange) 0.44em,
			var(--trans) 0.45em,
			var(--trans) 0.7em);
	background-size: 1em 1em;
}

.pumpkin-spice {
	background-color: var(--apricot);
	background-image:repeating-radial-gradient(
			circle at -0.3em 0.5em,
			var(--trans),
			var(--trans) 0.5em,
			var(--peach) 0.51em,
			var(--peach) 0.55em,
			var(--trans) 0.56em,
			var(--trans) 0.8em),
		repeating-radial-gradient(
			circle at 1.3em 0.5em,
			var(--trans),
			var(--trans) 0.5em,
			var(--peach) 0.51em,
			var(--peach) 0.55em,
			var(--trans) 0.56em,
			var(--trans) 0.8em),
		repeating-radial-gradient(
			circle at 1.05em 0.5em,
			var(--trans),
			var(--trans) 0.4em,
			var(--peach) 0.41em,
			var(--peach) 0.45em,
			var(--trans) 0.46em,
			var(--trans) 0.8em),
		repeating-radial-gradient(
			circle at 0.05em 0.5em,
			var(--trans),
			var(--trans) 0.4em,
			var(--peach) 0.41em,
			var(--peach) 0.45em,
			var(--trans) 0.46em,
			var(--trans) 0.8em),
		repeating-radial-gradient(
			circle at 0.95em 0.5em,
			var(--trans),
			var(--trans) 0.4em,
			var(--peach) 0.41em,
			var(--peach) 0.45em,
			var(--trans) 0.46em,
			var(--trans) 0.8em),
		repeating-radial-gradient(
			circle at -0.05em 0.5em,
			var(--trans),
			var(--trans) 0.4em,
			var(--peach) 0.41em,
			var(--peach) 0.45em,
			var(--trans) 0.46em,
			var(--trans) 0.8em);
	background-size: 1em 1em;
}

.feline {
	background-color: var(--purple-slate);
	background-image:repeating-radial-gradient(
			circle at -0.3em 0.5em,
			var(--ink),
			var(--ink) 0.4em,
			var(--trans) 0.415em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 1.3em 0.5em,
			var(--ink),
			var(--ink) 0.4em,
			var(--trans) 0.415em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 1em 0.5em,
			var(--spearmint),
			var(--emerald) 0.3em,
			var(--trans) 0.315em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0em 0.5em,
			var(--spearmint),
			var(--emerald) 0.3em,
			var(--trans) 0.315em,
			var(--trans) 2em);
	background-size: 1em 1em;
}

.propeller {
	background-color: var(--pond-bottom);
	background-image:repeating-radial-gradient(
			circle at 0em 1em,
			var(--trans),
			var(--trans) 0.14em,
			var(--ivory) 0.154em,
			var(--ivory) 0.26em,
			var(--trans) 0.27em,
			var(--trans) 0.6em),
		repeating-radial-gradient(
			circle at 1em 0em,
			var(--trans),
			var(--trans) 0.14em,
			var(--ivory) 0.15em,
			var(--ivory) 0.26em,
			var(--trans) 0.27em,
			var(--trans) 0.6em),
		repeating-radial-gradient(
			circle at 1em 1em,
			var(--trans),
			var(--trans) 0.14em,
			var(--spearmint) 0.15em,
			var(--spearmint) 0.26em,
			var(--trans) 0.27em,
			var(--trans) 0.6em),
		repeating-radial-gradient(
			circle at 0em 0em,
			var(--trans),
			var(--trans) 0.14em,
			var(--spearmint) 0.15em,
			var(--spearmint) 0.26em,
			var(--trans) 0.27em,
			var(--trans) 0.6em);
	background-size: 1em 1em;
}

.origami {
	background-color: var(--ink);
	background-image:repeating-radial-gradient(
			circle at 0em 1em,
			var(--trans),
			var(--trans) 0.14em,
			var(--mushroom) 0.154em,
			var(--mushroom) 0.29em,
			var(--trans) 0.31em,
			var(--trans) 1.01em),
		repeating-radial-gradient(
			circle at 1em 0em,
			var(--trans),
			var(--trans) 0.14em,
			var(--mushroom) 0.15em,
			var(--mushroom) 0.29em,
			var(--trans) 0.31em,
			var(--trans) 1.01em),
		repeating-radial-gradient(
			circle at 1em 1em,
			var(--trans),
			var(--trans) 0.14em,
			var(--limestone) 0.15em,
			var(--limestone) 0.29em,
			var(--trans) 0.31em,
			var(--trans) 1.01em),
		repeating-radial-gradient(
			circle at 0em 0em,
			var(--trans),
			var(--trans) 0.14em,
			var(--limestone) 0.15em,
			var(--limestone) 0.29em,
			var(--trans) 0.31em,
			var(--trans) 1.01em);
	background-size: 1em 1em;
}

.shortbread-shake {
	background-color: var(--twilight);
	background-image:repeating-radial-gradient(
			circle at -0.1em 0.71em,
			var(--trans),
			var(--trans) 0.16em,
			var(--hazelnut) 0.17em,
			var(--butter) 0.29em,
			var(--trans) 0.31em,
			var(--trans) 1.01em),
		repeating-radial-gradient(
			circle at 1.1em 0.29em,
			var(--trans),
			var(--trans) 0.16em,
			var(--butter) 0.17em,
			var(--hazelnut) 0.29em,
			var(--trans) 0.31em,
			var(--trans) 1.01em),
		repeating-radial-gradient(
			circle at 0.71em 1.1em,
			var(--trans),
			var(--trans) 0.16em,
			var(--butter) 0.17em,
			var(--hazelnut) 0.29em,
			var(--trans) 0.31em,
			var(--trans) 1.01em),
		repeating-radial-gradient(
			circle at 0.29em -0.1em,
			var(--trans),
			var(--trans) 0.16em,
			var(--hazelnut) 0.17em,
			var(--butter) 0.29em,
			var(--trans) 0.31em,
			var(--trans) 1.01em);
	background-size: 1em 1em;
}

.fall {
	background-color: var(--ruby);
	background-image:repeating-radial-gradient(
			circle at -0.19em 0.52em,
			var(--trans),
			var(--trans) 0.18em,
			var(--burnt-orange) 0.19em,
			var(--apricot) 0.29em,
			var(--trans) 0.31em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 1.19em 0.48em,
			var(--trans),
			var(--trans) 0.18em,
			var(--apricot) 0.19em,
			var(--apricot) 0.29em,
			var(--trans) 0.31em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.52em 1.19em,
			var(--trans),
			var(--trans) 0.18em,
			var(--burnt-orange) 0.19em,
			var(--apricot) 0.29em,
			var(--trans) 0.31em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.48em -0.19em,
			var(--trans),
			var(--trans) 0.18em,
			var(--apricot) 0.19em,
			var(--apricot) 0.29em,
			var(--trans) 0.31em,
			var(--trans) 2em);
	background-size: 1em 1em;
}

.sea-wall {
	background-color: var(--sage);
	background-image:
		repeating-radial-gradient(
			circle at 0.5em 0.5em,
			var(--trans),
			var(--trans) 0.16em,
			var(--apricot) 0.17em,
			var(--apricot) 0.27em,
			var(--trans) 0.28em,
			var(--trans) 0.4em),
		repeating-radial-gradient(
			circle at -0.32em -0.32em,
			var(--clay),
			var(--clay) 0.15em,
			var(--apricot) 0.16em,
			var(--apricot) 0.27em,
			var(--trans) 0.28em,
			var(--trans) 0.58em);
	background-size: 1em 1em;
}

.whispers {
	background-color: var(--beetroot);
	background-image:
		repeating-radial-gradient(
			circle at 0.88em 1.07em,
			var(--trans),
			var(--trans) 0.16em,
			var(--purple-slate) 0.17em,
			var(--purple-slate) 0.23em,
			var(--trans) 0.24em,
			var(--trans) 0.38em),
		repeating-radial-gradient(
			circle at 0.12em -0.055em,
			var(--trans),
			var(--trans) 0.16em,
			var(--purple-slate) 0.17em,
			var(--purple-slate) 0.23em,
			var(--trans) 0.24em,
			var(--trans) 0.38em);
	background-size: 1em 1em;
}

.low-pressure {
	background-color: var(--lapis);
	background-image:
		repeating-radial-gradient(
			circle at 0.82em 0.82em,
			var(--trans),
			var(--trans) 0.16em,
			var(--blue-tack) 0.17em,
			var(--blue-tack) 0.21em,
			var(--trans) 0.22em,
			var(--trans) 0.26em),
		repeating-radial-gradient(
			var(--trans) 0.16em,
			var(--blue-tack) 0.17em,
			var(--blue-tack) 0.21em,
			var(--trans) 0.22em,
			var(--trans) 0.24em);
	background-size: 1em 1em;
}

.cyclone {
	background-color: var(--lapis);
	background-image:repeating-radial-gradient(
			circle at -0.19em 0.55em,
			var(--trans),
			var(--trans) 0.25em,
			var(--blue-tack) 0.26em,
			var(--blue-tack) 0.29em,
			var(--trans) 0.3em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 1.19em 0.46em,
			var(--trans),
			var(--trans) 0.25em,
			var(--blue-tack) 0.26em,
			var(--blue-tack) 0.29em,
			var(--trans) 0.3em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.6em 1em,
			var(--trans),
			var(--trans) 0.14em,
			var(--blue-tack) 0.15em,
			var(--blue-tack) 0.18em,
			var(--trans) 0.19em,
			var(--trans) 0.2em),
		repeating-radial-gradient(
			circle at 0.4em 0em,
			var(--trans),
			var(--trans) 0.14em,
			var(--blue-tack) 0.15em,
			var(--blue-tack) 0.18em,
			var(--trans) 0.19em,
			var(--trans) 0.2em);
	background-size: 1em 1em;
}

.water-trail {
	background-color: var(--lapis);
	background-image:repeating-radial-gradient(
			circle at 0em 0.5em,
			var(--trans),
			var(--trans) 0.14em,
			var(--blue-tack) 0.15em,
			var(--blue-tack) 0.18em,
			var(--trans) 0.19em,
			var(--trans) 0.54em),
		repeating-radial-gradient(
			circle at 1em 0.5em,
			var(--trans),
			var(--trans) 0.14em,
			var(--blue-tack) 0.15em,
			var(--blue-tack) 0.18em,
			var(--trans) 0.19em,
			var(--trans) 0.54em),
		repeating-radial-gradient(
			circle at 0.5em 1em,
			var(--trans),
			var(--trans) 0.14em,
			var(--blue-tack) 0.15em,
			var(--blue-tack) 0.18em,
			var(--trans) 0.19em,
			var(--trans) 0.54em),
		repeating-radial-gradient(
			circle at 0.5em 0em,
			var(--trans),
			var(--trans) 0.14em,
			var(--blue-tack) 0.15em,
			var(--blue-tack) 0.18em,
			var(--trans) 0.19em,
			var(--trans) 0.54em),
		repeating-radial-gradient(
			circle at 0em 0.5em,
			var(--trans),
			var(--trans) 0.12em,
			var(--royal) 0.13em,
			var(--royal) 0.23em,
			var(--trans) 0.24em,
			var(--trans) 0.56em),
		repeating-radial-gradient(
			circle at 1em 0.5em,
			var(--trans),
			var(--trans) 0.12em,
			var(--royal) 0.13em,
			var(--royal) 0.23em,
			var(--trans) 0.24em,
			var(--trans) 0.56em),
		repeating-radial-gradient(
			circle at 0.5em 1em,
			var(--trans),
			var(--trans) 0.12em,
			var(--royal) 0.13em,
			var(--royal) 0.23em,
			var(--trans) 0.24em,
			var(--trans) 0.56em),
		repeating-radial-gradient(
			circle at 0.5em 0em,
			var(--trans),
			var(--trans) 0.12em,
			var(--royal) 0.13em,
			var(--royal) 0.23em,
			var(--trans) 0.24em,
			var(--trans) 0.56em);
	background-size: 1em 1em;
}

.fishing-net {
	background-color: var(--sea-foam);
	background-image:
		repeating-radial-gradient(
			circle at 0em 0.5em,
			var(--trans),
			var(--trans) 0.12em,
			var(--mink) 0.13em,
			var(--mink) 0.21em,
			var(--trans) 0.22em,
			var(--trans) 0.5em),
		repeating-radial-gradient(
			circle at 1em 0.5em,
			var(--trans),
			var(--trans) 0.12em,
			var(--limestone) 0.13em,
			var(--limestone) 0.21em,
			var(--trans) 0.22em,
			var(--trans) 0.5em),
		repeating-radial-gradient(
			circle at 0.5em 1em,
			var(--trans),
			var(--trans) 0.12em,
			var(--mink) 0.13em,
			var(--mink) 0.21em,
			var(--trans) 0.22em,
			var(--trans) 0.5em),
		repeating-radial-gradient(
			circle at 0.5em 0em,
			var(--trans),
			var(--trans) 0.12em,
			var(--limestone) 0.13em,
			var(--limestone) 0.21em,
			var(--trans) 0.22em,
			var(--trans) 0.5em);
	background-size: 1em 1em;
}

.instrument-panel {
	background-color: var(--mint);
	background-image:
		repeating-radial-gradient(
			circle at 0em 0.5em,
			var(--trans),
			var(--trans) 0.12em,
			var(--mint) 0.13em,
			var(--mint) 0.22em,
			var(--trans) 0.23em,
			var(--trans) 0.5em),
		repeating-radial-gradient(
			circle at 1em 0.5em,
			var(--trans),
			var(--trans) 0.12em,
			var(--mint) 0.13em,
			var(--mint) 0.22em,
			var(--trans) 0.23em,
			var(--trans) 0.5em),
		repeating-radial-gradient(
			circle at 0.5em 1em,
			var(--trans),
			var(--trans) 0.12em,
			var(--pale-lemon) 0.13em,
			var(--pale-lemon) 0.17em,
			var(--trans) 0.18em,
			var(--trans) 0.29em),
		repeating-radial-gradient(
			circle at 0.5em 0em,
			var(--trans),
			var(--trans) 0.12em,
			var(--lemon) 0.13em,
			var(--lemon) 0.17em,
			var(--trans) 0.18em,
			var(--trans) 0.29em);
	background-size: 1em 1em;
}

.spider-weave {
	background-color: var(--purple-slate);
	background-image:
		repeating-radial-gradient(
			circle at 0em 0.5em,
			var(--trans),
			var(--trans) 0.12em,
			var(--hazelnut) 0.13em,
			var(--hazelnut) 0.20em,
			var(--trans) 0.21em,
			var(--trans) 0.29em),
		repeating-radial-gradient(
			circle at 1em 0.5em,
			var(--trans),
			var(--trans) 0.12em,
			var(--hazelnut) 0.13em,
			var(--hazelnut) 0.20em,
			var(--trans) 0.21em,
			var(--trans) 0.29em),
		repeating-radial-gradient(
			circle at 0.5em 1em,
			var(--trans),
			var(--trans) 0.12em,
			var(--bronze) 0.13em,
			var(--bronze) 0.20em,
			var(--trans) 0.21em,
			var(--trans) 0.29em),
		repeating-radial-gradient(
			circle at 0.5em 0em,
			var(--trans),
			var(--trans) 0.12em,
			var(--bronze) 0.13em,
			var(--bronze) 0.20em,
			var(--trans) 0.21em,
			var(--trans) 0.29em);
	background-size: 1em 1em;
}

.echo-owl {
	background-color: var(--clay);
	background-image:
		repeating-radial-gradient(
			circle at 0.2em 0.5em,
			var(--trans),
			var(--trans) 0.1em,
			var(--mink) 0.11em,
			var(--mink) 0.14em,
			var(--trans) 0.15em,
			var(--trans) 0.26em),
		repeating-radial-gradient(
			circle at 0.8em 0.5em,
			var(--trans),
			var(--trans) 0.1em,
			var(--mink) 0.11em,
			var(--mink) 0.14em,
			var(--trans) 0.15em,
			var(--trans) 0.26em);
	background-size: 1em 1em;
}

.sugar-lattice {
	background-image: 
		linear-gradient(
			45deg,
		var(--sakura),
		var(--dusty-pink));
}
.sugar-lattice::after {
	background-image:
		repeating-radial-gradient(
			circle at 0.2em 0.5em,
			var(--trans),
			var(--trans) 0.1em,
			var(--ivory) 0.11em,
			var(--ivory) 0.14em,
			var(--trans) 0.15em,
			var(--trans) 0.26em),
		repeating-radial-gradient(
			circle at 0.8em 0.5em,
			var(--trans),
			var(--trans) 0.1em,
			var(--ivory) 0.11em,
			var(--ivory) 0.14em,
			var(--trans) 0.15em,
			var(--trans) 0.26em),
		repeating-radial-gradient(
			circle at 0.5em 0.8em,
			var(--trans),
			var(--trans) 0.1em,
			var(--ivory) 0.11em,
			var(--ivory) 0.14em,
			var(--trans) 0.15em,
			var(--trans) 0.26em),
		repeating-radial-gradient(
			circle at 0.5em 0.2em,
			var(--trans),
			var(--trans) 0.1em,
			var(--ivory) 0.11em,
			var(--ivory) 0.14em,
			var(--trans) 0.15em,
			var(--trans) 0.26em);
	background-size: 1em 1em;
}

.copper-clasp {
	background-image: 
		linear-gradient(
		var(--sakura),
		var(--apricot),
		var(--chestnut));
}
.copper-clasp::after {
	background-image:
		repeating-radial-gradient(
			circle at 0.15em 0.5em,
			var(--trans),
			var(--trans) 0.17em,
			var(--sage) 0.18em,
			var(--sage) 0.20em,
			var(--trans) 0.21em,
			var(--trans) 0.26em),
		repeating-radial-gradient(
			circle at 0.85em 0.5em,
			var(--trans),
			var(--trans) 0.17em,
			var(--sage) 0.18em,
			var(--sage) 0.20em,
			var(--trans) 0.21em,
			var(--trans) 0.26em),
		repeating-radial-gradient(
			circle at 0.5em 0.85em,
			var(--trans),
			var(--trans) 0.17em,
			var(--sage) 0.18em,
			var(--sage) 0.20em,
			var(--trans) 0.21em,
			var(--trans) 0.26em),
		repeating-radial-gradient(
			circle at 0.5em 0.15em,
			var(--trans),
			var(--trans) 0.17em,
			var(--sage) 0.18em,
			var(--sage) 0.20em,
			var(--trans) 0.21em,
			var(--trans) 0.26em);
	background-size: 1em 1em;
}

.circulation {
	background-color: var(--lapis);
	background-image:
		repeating-radial-gradient(
			circle at 0.02em 0.5em,
			var(--trans),
			var(--trans) 0.17em,
			var(--apricot) 0.18em,
			var(--apricot) 0.20em,
			var(--trans) 0.21em,
			var(--trans) 0.24em),
		repeating-radial-gradient(
			circle at 0.98em 0.5em,
			var(--trans),
			var(--trans) 0.17em,
			var(--apricot) 0.18em,
			var(--apricot) 0.20em,
			var(--trans) 0.21em,
			var(--trans) 0.24em),
		repeating-radial-gradient(
			circle at 0.5em 0.98em,
			var(--trans),
			var(--trans) 0.17em,
			var(--peach) 0.18em,
			var(--peach) 0.20em,
			var(--trans) 0.21em,
			var(--trans) 0.24em),
		repeating-radial-gradient(
			circle at 0.5em 0.02em,
			var(--trans),
			var(--trans) 0.17em,
			var(--peach) 0.18em,
			var(--peach) 0.20em,
			var(--trans) 0.21em,
			var(--trans) 0.24em);
	background-size: 1em 1em;
}

.money-zoom {
	background-color: var(--sea-foam);
	background-image:
		repeating-radial-gradient(
			circle at 0.02em 0.5em,
			var(--trans),
			var(--trans) 0.16em,
			var(--pond-bottom) 0.17em,
			var(--pond-bottom) 0.23em,
			var(--trans) 0.24em,
			var(--trans) 0.25em),
		repeating-radial-gradient(
			circle at 0.98em 0.5em,
			var(--trans),
			var(--trans) 0.16em,
			var(--pond-bottom) 0.17em,
			var(--pond-bottom) 0.23em,
			var(--trans) 0.24em,
			var(--trans) 0.25em),
		repeating-radial-gradient(
			circle at 0.5em 0.98em,
			var(--trans),
			var(--trans) 0.16em,
			var(--succulent) 0.17em,
			var(--succulent) 0.23em,
			var(--trans) 0.24em,
			var(--trans) 0.25em),
		repeating-radial-gradient(
			circle at 0.5em 0.02em,
			var(--trans),
			var(--trans) 0.16em,
			var(--succulent) 0.17em,
			var(--succulent) 0.23em,
			var(--trans) 0.24em,
			var(--trans) 0.25em);
	background-size: 1em 1em;
}

.headstone {
	background-color: var(--sakura);
	background-image:
		repeating-radial-gradient(
			circle at 0.12em 0.5em,
			var(--trans),
			var(--trans) 0.16em,
			var(--limestone) 0.17em,
			var(--limestone) 0.23em,
			var(--trans) 0.24em,
			var(--trans) 0.25em),
		repeating-radial-gradient(
			circle at 0.88em 0.5em,
			var(--trans),
			var(--trans) 0.16em,
			var(--limestone) 0.17em,
			var(--limestone) 0.23em,
			var(--trans) 0.24em,
			var(--trans) 0.25em),
		repeating-radial-gradient(
			circle at 0.5em 0.88em,
			var(--trans),
			var(--trans) 0.16em,
			var(--limestone) 0.17em,
			var(--limestone) 0.23em,
			var(--trans) 0.24em,
			var(--trans) 0.25em),
		repeating-radial-gradient(
			circle at 0.5em 0.12em,
			var(--trans),
			var(--trans) 0.16em,
			var(--limestone) 0.17em,
			var(--limestone) 0.23em,
			var(--trans) 0.24em,
			var(--trans) 0.25em);
	background-size: 1em 1em;
}

.moth-bot {
	background-color: var(--chestnut);
	background-image:
		repeating-radial-gradient(
			circle at 0.22em 0.5em,
			var(--trans),
			var(--trans) 0.16em,
			var(--coral) 0.17em,
			var(--coral) 0.23em,
			var(--trans) 0.24em,
			var(--trans) 0.55em),
		repeating-radial-gradient(
			circle at 0.78em 0.5em,
			var(--trans),
			var(--trans) 0.16em,
			var(--coral) 0.17em,
			var(--coral) 0.23em,
			var(--trans) 0.24em,
			var(--trans) 0.55em),
		repeating-radial-gradient(
			circle at 0.5em 0.68em,
			var(--trans),
			var(--trans) 0.16em,
			var(--coral) 0.17em,
			var(--coral) 0.23em,
			var(--trans) 0.24em,
			var(--trans) 0.55em),
		repeating-radial-gradient(
			circle at 0.5em 0.32em,
			var(--trans),
			var(--trans) 0.16em,
			var(--coral) 0.17em,
			var(--coral) 0.23em,
			var(--trans) 0.24em,
			var(--trans) 0.55em);
	background-size: 1em 1em;
}

.motor-warp {
	background-color: var(--limestone);
	background-image:
		repeating-radial-gradient(
			circle at 0.22em 0.5em,
			var(--trans),
			var(--trans) 0.16em,
			var(--ink) 0.17em,
			var(--ink) 0.23em,
			var(--trans) 0.24em,
			var(--trans) 0.25em),
		repeating-radial-gradient(
			circle at 0.78em 0.5em,
			var(--trans),
			var(--trans) 0.16em,
			var(--ink) 0.17em,
			var(--ink) 0.23em,
			var(--trans) 0.24em,
			var(--trans) 0.25em),
		repeating-radial-gradient(
			circle at 0.5em 0.78em,
			var(--trans),
			var(--trans) 0.16em,
			var(--ink) 0.17em,
			var(--ink) 0.23em,
			var(--trans) 0.24em,
			var(--trans) 0.25em),
		repeating-radial-gradient(
			circle at 0.5em 0.22em,
			var(--trans),
			var(--trans) 0.16em,
			var(--ink) 0.17em,
			var(--ink) 0.23em,
			var(--trans) 0.24em,
			var(--trans) 0.25em);
	background-size: 1em 1em;
}

.neon-mesh {
	background-color: var(--sea-fog);
	background-image:
		repeating-radial-gradient(
			circle at 0.22em 0.5em,
			var(--trans),
			var(--trans) 0.16em,
			var(--orange) 0.17em,
			var(--orange) 0.23em,
			var(--trans) 0.24em,
			var(--trans) 0.5em),
		repeating-radial-gradient(
			circle at 0.78em 0.5em,
			var(--trans),
			var(--trans) 0.16em,
			var(--orange) 0.17em,
			var(--orange) 0.23em,
			var(--trans) 0.24em,
			var(--trans) 0.5em),
		repeating-radial-gradient(
			circle at 0.5em 0.78em,
			var(--trans),
			var(--trans) 0.16em,
			var(--orange) 0.17em,
			var(--orange) 0.23em,
			var(--trans) 0.24em,
			var(--trans) 0.5em),
		repeating-radial-gradient(
			circle at 0.5em 0.22em,
			var(--trans),
			var(--trans) 0.16em,
			var(--orange) 0.17em,
			var(--orange) 0.23em,
			var(--trans) 0.24em,
			var(--trans) 0.5em);
	background-size: 1em 1em;
}

.ninja-star {
	background-color: var(--purple-slate);
	background-image:
		repeating-radial-gradient(
			circle at 0.22em 0.5em,
			var(--trans),
			var(--trans) 0.16em,
			var(--magenta) 0.17em,
			var(--magenta) 0.22em,
			var(--trans) 0.23em,
			var(--trans) 0.65em),
		repeating-radial-gradient(
			circle at 0.78em 0.5em,
			var(--trans),
			var(--trans) 0.16em,
			var(--magenta) 0.17em,
			var(--magenta) 0.22em,
			var(--trans) 0.23em,
			var(--trans) 0.65em),
		repeating-radial-gradient(
			circle at 0.5em 0.78em,
			var(--trans),
			var(--trans) 0.16em,
			var(--magenta) 0.17em,
			var(--magenta) 0.22em,
			var(--trans) 0.23em,
			var(--trans) 0.65em),
		repeating-radial-gradient(
			circle at 0.5em 0.22em,
			var(--trans),
			var(--trans) 0.16em,
			var(--magenta) 0.17em,
			var(--magenta) 0.22em,
			var(--trans) 0.23em,
			var(--trans) 0.65em);
	background-size: 1em 1em;
}

.braid {
	background-color: var(--purple-slate);
	background-image:
		repeating-radial-gradient(
			circle at 0.24em 0.5em,
			var(--trans),
			var(--trans) 0.2em,
			var(--lemon) 0.215em,
			var(--lemon) 0.26em,
			var(--trans) 0.285em,
			var(--trans) 0.9em),
		repeating-radial-gradient(
			circle at 0.76em 0.5em,
			var(--trans),
			var(--trans) 0.2em,
			var(--lemon) 0.215em,
			var(--lemon) 0.26em,
			var(--trans) 0.285em,
			var(--trans) 0.9em),
		repeating-radial-gradient(
			circle at 0.5em 0.76em,
			var(--trans),
			var(--trans) 0.2em,
			var(--lemon) 0.215em,
			var(--lemon) 0.26em,
			var(--trans) 0.285em,
			var(--trans) 0.9em),
		repeating-radial-gradient(
			circle at 0.5em 0.24em,
			var(--trans),
			var(--trans) 0.2em,
			var(--lemon) 0.215em,
			var(--lemon) 0.26em,
			var(--trans) 0.285em,
			var(--trans) 0.9em),
		repeating-radial-gradient(
			circle at 0.24em 0.5em,
			var(--trans),
			var(--trans) 0.12em,
			var(--butter) 0.135em,
			var(--butter) 0.32em,
			var(--trans) 0.335em,
			var(--trans) 0.9em),
		repeating-radial-gradient(
			circle at 0.76em 0.5em,
			var(--trans),
			var(--trans) 0.12em,
			var(--butter) 0.135em,
			var(--butter) 0.32em,
			var(--trans) 0.335em,
			var(--trans) 0.9em),
		repeating-radial-gradient(
			circle at 0.5em 0.76em,
			var(--trans),
			var(--trans) 0.12em,
			var(--butter) 0.135em,
			var(--butter) 0.32em,
			var(--trans) 0.335em,
			var(--trans) 0.9em),
		repeating-radial-gradient(
			circle at 0.5em 0.24em,
			var(--trans),
			var(--trans) 0.12em,
			var(--butter) 0.135em,
			var(--butter) 0.32em,
			var(--trans) 0.335em,
			var(--trans) 0.9em);
	background-size: 1em 1em;
}

.the-pond {
	background-color: var(--pond-bottom);
	background-image:
		repeating-radial-gradient(
			circle at 0.24em 0.5em,
			var(--trans),
			var(--trans) 0.12em,
			var(--sage) 0.13em,
			var(--sage) 0.22em,
			var(--trans) 0.23em,
			var(--trans) 0.9em),
		repeating-radial-gradient(
			circle at 0.76em 0.5em,
			var(--trans),
			var(--trans) 0.12em,
			var(--sage) 0.13em,
			var(--sage) 0.22em,
			var(--trans) 0.23em,
			var(--trans) 0.9em),
		repeating-radial-gradient(
			circle at 0.5em 0.76em,
			var(--trans),
			var(--trans) 0.12em,
			var(--sage) 0.13em,
			var(--sage) 0.22em,
			var(--trans) 0.23em,
			var(--trans) 0.9em),
		repeating-radial-gradient(
			circle at 0.5em 0.24em,
			var(--trans),
			var(--trans) 0.12em,
			var(--sage) 0.13em,
			var(--sage) 0.22em,
			var(--trans) 0.23em,
			var(--trans) 0.9em);
	background-size: 1em 1em;
}

.segments {
	background-color: var(--apricot);
	background-image:
		repeating-radial-gradient(
			circle at 0.48em 1em,
			var(--trans),
			var(--trans) 0.1em,
			var(--twilight) 0.11em,
			var(--twilight) 0.2em,
			var(--trans) 0.21em,
			var(--trans) 0.9em),
		repeating-radial-gradient(
			circle at 1.52em 1em,
			var(--trans),
			var(--trans) 0.1em,
			var(--lapis) 0.11em,
			var(--lapis) 0.2em,
			var(--trans) 0.21em,
			var(--trans) 0.9em),
		repeating-radial-gradient(
			circle at 1em 1.52em,
			var(--trans),
			var(--trans) 0.1em,
			var(--navy) 0.11em,
			var(--navy) 0.2em,
			var(--trans) 0.21em,
			var(--trans) 0.9em),
		repeating-radial-gradient(
			circle at 1em 0.48em,
			var(--trans),
			var(--trans) 0.1em,
			var(--slate) 0.11em,
			var(--slate) 0.2em,
			var(--trans) 0.21em,
			var(--trans) 0.9em);
	background-size: 2em 2em;
}

.biohazard {
	background-color: var(--butter);
	background-image:
		repeating-radial-gradient(
			circle at 1.01em 1.07em,
			var(--butter),
			var(--butter) 0.07em,
			var(--trans) 0.085em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 1.45em 1.3em,
			var(--trans),
			var(--trans) 0.3em,
			var(--butter) 0.315em,
			var(--butter) 0.34em,
			var(--trans) 0.355em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.57em 1.3em,
			var(--trans),
			var(--trans) 0.3em,
			var(--butter) 0.315em,
			var(--butter) 0.34em,
			var(--trans) 0.355em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 1em 0.58em,
			var(--trans),
			var(--trans) 0.3em,
			var(--butter) 0.315em,
			var(--butter) 0.34em,
			var(--trans) 0.355em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 1.01em 1.06em,
			var(--trans),
			var(--trans) 0.3em,
			var(--raspberry-jam) 0.315em,
			var(--raspberry-jam) 0.4em,
			var(--trans) 0.415em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 1em 0.58em,
			var(--butter),
			var(--butter) 0.34em,
			var(--trans) 0.355em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 1em 0.65em,
			var(--raspberry-jam),
			var(--raspberry-jam) 0.4em,
			var(--trans) 0.415em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.57em 1.3em,
			var(--butter),
			var(--butter) 0.34em,
			var(--trans) 0.355em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.65em 1.25em,
			var(--raspberry-jam),
			var(--raspberry-jam) 0.4em,
			var(--trans) 0.415em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 1.45em 1.3em,
			var(--butter),
			var(--butter) 0.34em,
			var(--trans) 0.355em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 1.35em 1.25em,
			var(--raspberry-jam),
			var(--raspberry-jam) 0.4em,
			var(--trans) 0.415em,
			var(--trans) 2em);
	background-size: 2em 2em;
}

.phone-alert-system {
	background-color: var(--coral);
	background-image:
		repeating-linear-gradient(
			-45deg,
			var(--sea-foam),
			var(--sea-foam) 0.2em,
			var(--trans) 0.2em, 
			var(--trans) 1.22em,
			var(--sea-foam) 1.22em,
			var(--sea-foam) 2em),
		repeating-linear-gradient(
			45deg,
			var(--sea-foam),
			var(--sea-foam) 0.47em,
			var(--trans) 0.47em, 
			var(--trans) 0.93em,
			var(--sea-foam) 0.93em,
			var(--sea-foam) 2em),
		repeating-linear-gradient(
			-45deg,
			var(--ink),
			var(--ink) 0.3em,
			var(--trans) 0.3em, 
			var(--trans) 1.16em,
			var(--ink) 1.16em,
			var(--ink) 1.1em),
		repeating-linear-gradient(
			45deg,
			var(--ink),
			var(--ink) 0.52em,
			var(--trans) 0.52em, 
			var(--trans) 0.88em,
			var(--ink) 0.88em,
			var(--ink) 1.1em);
	background-size: 1em 1em;
}

.life-buoy {
	background-color: var(--coral);
	background-image:
		repeating-linear-gradient(
			45deg,
			var(--trans),
			var(--trans) 0.64em,
			var(--white) 0.64em, 
			var(--white) 0.76em,
			var(--trans) 0.76em,
			var(--trans) 1em),
		repeating-linear-gradient(
			-45deg,
			var(--trans),
			var(--trans) 0.64em,
			var(--white) 0.64em, 
			var(--white) 0.76em,
			var(--trans) 0.76em,
			var(--trans) 1em);
	background-size: 1em 1em;
}
.life-buoy::after {
	background-image:
		repeating-radial-gradient(
			circle at 0.5em 0.5em,
			var(--sea-glass),
			var(--sea-glass) 0.22em,
			var(--trans) 0.23em,
			var(--trans) 0.38em,
			var(--sea-glass) 0.39em,
			var(--sea-glass) 0.5em);
	background-size: 1em 1em;
}

.lobby {
	background-color: var(--ink);
	background-image:
		repeating-linear-gradient(
			-45deg,
			var(--ivory),
			var(--ivory) 0.42em,
			var(--trans) 0.42em, 
			var(--trans) 0.98em,
			var(--ivory) 0.98em,
			var(--ivory) 1em),
		repeating-linear-gradient(
			45deg,
			var(--ivory),
			var(--ivory) 0.42em,
			var(--trans) 0.42em, 
			var(--trans) 0.98em,
			var(--ivory) 0.98em,
			var(--ivory) 1em);
	background-size: 1em 1em;
}

.target {
	background-color: var(--coral);
	background-image:
		repeating-radial-gradient(
			circle at 0.5em 0.5em,
			var(--trans),
			var(--trans) 0.14em,
			var(--ivory) 0.15em,
			var(--ivory) 0.28em,
			var(--trans) 0.29em);
	background-size: 1em 1em;
}

.confetti2 {
	background-color: var(--coral);
	background-image:
		repeating-radial-gradient(
			circle at 0.4em 0.4em,
			var(--coral),
			var(--coral) 0.05em,
			var(--orange) 0.13em,
			var(--peach) 0.34em,
			var(--peach) 0.6em);
	background-size: 0.8em 0.8em;
}
.confetti2::after {
	background-image:
		repeating-radial-gradient(
			circle at -0.9em 0.6em,
			var(--trans),
			var(--trans) 0.14em,
			var(--ink) 0.15em,
			var(--ink) 0.33em,
			var(--trans) 0.34em),
		repeating-radial-gradient(
			circle at 0.5em 1.8em,
			var(--trans),
			var(--trans) 0.12em,
			var(--ink) 0.13em,
			var(--ink) 0.33em,
			var(--trans) 0.34em);
	background-size: 1em 1em;
}


.jam-sandwich {
	background-color: var(--coral);
	background-image:
		repeating-radial-gradient(
			circle at 0.5em -1.83em,
			var(--trans),
			var(--peach) 0.08em,
			var(--mushroom) 0.09em,
			var(--mushroom) 0.33em,
			var(--trans) 0.34em);
	background-size: 1em 1em;
}

.tennis {
	background-color: var(--succulent);
	background-image:
		repeating-radial-gradient(
			circle at -0.83em 0.5em,
			var(--trans),
			var(--trans) 0.28em,
			var(--mushroom) 0.29em,
			var(--mushroom) 0.33em,
			var(--trans) 0.34em),
		repeating-radial-gradient(
			circle at 0.5em 1.83em,
			var(--trans),
			var(--trans) 0.28em,
			var(--mushroom) 0.29em,
			var(--mushroom) 0.33em,
			var(--trans) 0.34em);
	background-size: 1em 1em;
}

.cobbles {
	background-color: var(--slate);
	background-image:
		repeating-radial-gradient(
			circle at 0.5em -0.65em,
			var(--trans),
			var(--trans) 0.24em,
			var(--clay) 0.25em,
			var(--clay) 0.33em,
			var(--trans) 0.34em),
		repeating-radial-gradient(
			circle at 0.5em 1.65em,
			var(--trans),
			var(--trans) 0.24em,
			var(--clay) 0.25em,
			var(--clay) 0.33em,
			var(--trans) 0.34em);
	background-size: 1em 1em;
}

.bed-springs {
	background-color: var(--slate);
	background-image:
		repeating-radial-gradient(
			circle at 0.5em -0.3em,
			var(--trans),
			var(--trans) 0.24em,
			var(--spearmint) 0.25em,
			var(--spearmint) 0.3em,
			var(--trans) 0.31em),
		repeating-radial-gradient(
			circle at 0.5em 1.3em,
			var(--trans),
			var(--trans) 0.24em,
			var(--spearmint) 0.25em,
			var(--spearmint) 0.3em,
			var(--trans) 0.31em);
	background-size: 1em 1em;
}

.linked {
	background-color: var(--apricot);
	background-image:
		repeating-radial-gradient(
			circle at 0.5em 0.4em,
			var(--trans),
			var(--trans) 0.2em,
			var(--coral) 0.21em,
			var(--coral) 0.3em,
			var(--trans) 0.31em),
		repeating-radial-gradient(
			circle at 0.5em 0.6em,
			var(--trans),
			var(--trans) 0.2em,
			var(--coral) 0.21em,
			var(--coral) 0.3em,
			var(--trans) 0.31em);
	background-size: 1em 1em;
}

.overlapping-shields {
	background-color: var(--clay);
	background-image:
		repeating-radial-gradient(
			circle at 0.5em -0.1em,
			var(--trans),
			var(--trans) 0.2em,
			var(--melon) 0.21em,
			var(--melon) 0.3em,
			var(--trans) 0.31em),
		repeating-radial-gradient(
			circle at 0.5em 1.1em,
			var(--trans),
			var(--trans) 0.2em,
			var(--melon) 0.21em,
			var(--melon) 0.3em,
			var(--trans) 0.31em);
	background-size: 1em 1em;
}

.mystic-eye {
	background-color: var(--purple-slate);
	background-image:
		repeating-radial-gradient(
			circle at 0.5em 0.24em,
			var(--trans),
			var(--trans) 0.2em,
			var(--purple) 0.21em,
			var(--purple) 0.3em,
			var(--trans) 0.31em),
		repeating-radial-gradient(
			circle at 0.5em 0.74em,
			var(--trans),
			var(--trans) 0.2em,
			var(--purple) 0.21em,
			var(--purple) 0.3em,
			var(--trans) 0.31em),
		repeating-radial-gradient(
			circle at 0.5em 0.34em,
			var(--trans),
			var(--trans) 0.2em,
			var(--midnight) 0.21em,
			var(--midnight) 0.3em,
			var(--trans) 0.31em),
		repeating-radial-gradient(
			circle at 0.5em 0.8em,
			var(--trans),
			var(--trans) 0.2em,
			var(--midnight) 0.21em,
			var(--midnight) 0.3em,
			var(--trans) 0.31em);
	background-size: 1em 1em;
}

.lace {
	background-color: var(--white);
	background-image:
		repeating-radial-gradient(
			circle at 0.5em 0.05em,
			var(--trans),
			var(--trans) 0.2em,
			var(--mushroom) 0.21em,
			var(--mushroom) 0.3em,
			var(--trans) 0.31em),
		repeating-radial-gradient(
			circle at 0.5em 0.95em,
			var(--trans),
			var(--trans) 0.2em,
			var(--mushroom) 0.21em,
			var(--mushroom) 0.3em,
			var(--trans) 0.31em);
	background-size: 1em 1em;
}

.plant-cells {
	background-color: var(--sage);
	background-image:
		repeating-radial-gradient(
			circle at -0.12em -0.12em,
			var(--trans),
			var(--trans) 0.2em,
			var(--grassy) 0.21em,
			var(--grassy) 0.3em,
			var(--trans) 0.31em),
		repeating-radial-gradient(
			circle at 1.12em 1.12em,
			var(--trans),
			var(--trans) 0.2em,
			var(--grassy) 0.21em,
			var(--grassy) 0.3em,
			var(--trans) 0.31em);
	background-size: 1em 1em;
}

.slashes {
	background-color: var(--peach);
	background-image:
		repeating-radial-gradient(
			circle at -0.35em -0.35em,
			var(--trans),
			var(--trans) 0.4em,
			var(--powder-blue) 0.41em,
			var(--powder-blue) 0.9em,
			var(--trans) 0.91em),
		repeating-radial-gradient(
			circle at 1.35em 1.35em,
			var(--trans),
			var(--trans) 0.4em,
			var(--powder-blue) 0.41em,
			var(--powder-blue) 0.9em,
			var(--trans) 0.91em);
	background-size: 1em 1em;
}

.hollow-lemon {
	background-color: var(--lemon);
	background-image:
		repeating-radial-gradient(
			circle at 0.25em 0.25em,
			var(--trans),
			var(--trans) 0.45em,
			var(--yellow) 0.46em,
			var(--yellow) 0.75em,
			var(--trans) 0.76em),
		repeating-radial-gradient(
			circle at 0.75em 0.75em,
			var(--trans),
			var(--trans) 0.45em,
			var(--yellow) 0.46em,
			var(--yellow) 0.75em,
			var(--trans) 0.76em);
	background-size: 1em 1em;
}


.blood-cells {
	background-color: var(--midnight);
	background-image:
		repeating-radial-gradient(
			circle at -0.55em -0.55em,
			var(--trans),
			var(--trans) 0.6em,
			var(--beetroot) 0.61em,
			var(--beetroot) 0.9em,
			var(--trans) 0.91em),
		repeating-radial-gradient(
			circle at 1.55em 1.55em,
			var(--trans),
			var(--trans) 0.6em,
			var(--beetroot) 0.61em,
			var(--beetroot) 0.9em,
			var(--trans) 0.91em);
	background-size: 1em 1em;
}

.avocado {
	background-color: var(--clay);
	background-image:
		repeating-radial-gradient(
			circle at -0.15em -0.15em,
			var(--trans),
			var(--trans) 0.4em,
			var(--grassy) 0.41em,
			var(--succulent) 0.6em,
			var(--trans) 0.61em),
		repeating-radial-gradient(
			circle at 1.15em 1.15em,
			var(--trans),
			var(--trans) 0.4em,
			var(--grassy) 0.41em,
			var(--succulent) 0.6em,
			var(--trans) 0.61em);
	background-size: 1em 1em;
}

.snag {
	background-color: var(--sea-fog);
	background-image:
		repeating-radial-gradient(
			circle at -0.75em -0.75em,
			var(--trans),
			var(--trans) 0.4em,
			var(--powder-blue) 0.41em,
			var(--powder-blue) 0.6em,
			var(--trans) 0.61em),
		repeating-radial-gradient(
			circle at 1.75em 1.75em,
			var(--trans),
			var(--trans) 0.4em,
			var(--powder-blue) 0.41em,
			var(--powder-blue) 0.6em,
			var(--trans) 0.61em);
	background-size: 1em 1em;
}

.bling-chunk {
	background-color: var(--butter);
	background-image:
		repeating-radial-gradient(
			circle at -0.1em -0.1em,
			var(--butter),
			var(--lemon) 0.6em,
			var(--trans) 0.61em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 1.1em 1.1em,
			var(--butter),
			var(--lemon) 0.6em,
			var(--trans) 0.61em,
			var(--trans) 2em);
	background-size: 1em 1em;
}

.ocean {
	background-color: var(--lapis);
	background-image:
		repeating-radial-gradient(
			circle at 0em 0em,
			var(--trans),
			var(--trans) 0.32em,
			var(--royal) 0.33em,
			var(--royal) 0.6em,
			var(--trans) 0.61em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.93em 0.93em,
			var(--trans),
			var(--trans) 0.32em,
			var(--royal) 0.33em,
			var(--royal) 0.6em,
			var(--trans) 0.61em,
			var(--trans) 2em);
	background-size: 1em 1em;
}

.star-pips {
	background-color: var(--aubergine);
	background-image:
		repeating-radial-gradient(
			circle at 0.26em 0.26em,
			var(--trans),
			var(--trans) 0.4em,
			var(--magenta) 0.41em,
			var(--magenta) 0.52em,
			var(--trans) 0.53em,
			var(--trans) 1em),
		repeating-radial-gradient(
			circle at 0.74em 0.26em,
			var(--trans),
			var(--trans) 0.4em,
			var(--magenta) 0.41em,
			var(--magenta) 0.52em,
			var(--trans) 0.53em,
			var(--trans) 1em),
		repeating-radial-gradient(
			circle at 0.26em 0.74em,
			var(--trans),
			var(--trans) 0.4em,
			var(--magenta) 0.41em,
			var(--magenta) 0.52em,
			var(--trans) 0.53em,
			var(--trans) 1em),
		repeating-radial-gradient(
			circle at 0.74em 0.74em,
			var(--trans),
			var(--trans) 0.4em,
			var(--magenta) 0.41em,
			var(--magenta) 0.52em,
			var(--trans) 0.53em,
			var(--trans) 1em);
	background-size: 1em 1em;
}
.star-pips::after {
	background-image:
		repeating-radial-gradient(
			circle at 0.26em 0.26em,
			var(--trans),
			var(--trans) 0.4em,
			var(--magenta) 0.41em,
			var(--magenta) 0.52em,
			var(--trans) 0.53em,
			var(--trans) 1em),
		repeating-radial-gradient(
			circle at 0.74em 0.26em,
			var(--trans),
			var(--trans) 0.4em,
			var(--magenta) 0.41em,
			var(--magenta) 0.52em,
			var(--trans) 0.53em,
			var(--trans) 1em),
		repeating-radial-gradient(
			circle at 0.26em 0.74em,
			var(--trans),
			var(--trans) 0.4em,
			var(--magenta) 0.41em,
			var(--magenta) 0.52em,
			var(--trans) 0.53em,
			var(--trans) 1em),
		repeating-radial-gradient(
			circle at 0.74em 0.74em,
			var(--trans),
			var(--trans) 0.4em,
			var(--magenta) 0.41em,
			var(--magenta) 0.52em,
			var(--trans) 0.53em,
			var(--trans) 1em);
	background-size: 1em 1em;
	background-position: 0.5em 0.5em;
}

.bamboo {
	background-color: var(--sage);
	background-image:
		repeating-radial-gradient(
			circle at 0.16em 0.16em,
			var(--trans),
			var(--trans) 0.8em,
			var(--forest) 0.81em,
			var(--forest) 0.87em,
			var(--trans) 0.88em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.84em 0.16em,
			var(--trans),
			var(--trans) 0.8em,
			var(--forest) 0.81em,
			var(--forest) 0.87em,
			var(--trans) 0.88em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.16em 0.84em,
			var(--trans),
			var(--trans) 0.8em,
			var(--forest) 0.81em,
			var(--forest) 0.87em,
			var(--trans) 0.88em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.84em 0.84em,
			var(--trans),
			var(--trans) 0.8em,
			var(--forest) 0.81em,
			var(--forest) 0.87em,
			var(--trans) 0.88em,
			var(--trans) 3em);
	background-size: 1em 1em;
	background-position: 0em 0.12em;
}
.bamboo::after {
	background-image:
		repeating-radial-gradient(
			circle at 0.16em 0.16em,
			var(--trans),
			var(--trans) 0.8em,
			var(--butter) 0.81em,
			var(--peach) 0.87em,
			var(--trans) 0.88em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.84em 0.16em,
			var(--trans),
			var(--trans) 0.8em,
			var(--butter) 0.81em,
			var(--peach) 0.87em,
			var(--trans) 0.88em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.16em 0.84em,
			var(--trans),
			var(--trans) 0.8em,
			var(--butter) 0.81em,
			var(--peach) 0.87em,
			var(--trans) 0.88em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.84em 0.84em,
			var(--trans),
			var(--trans) 0.8em,
			var(--butter) 0.81em,
			var(--peach) 0.87em,
			var(--trans) 0.88em,
			var(--trans) 3em);
	background-size: 1em 1em;
}

.goldwork {
	background-color: var(--lapis);
	background-image:
		repeating-radial-gradient(
			circle at 0.06em 0.06em,
			var(--trans),
			var(--trans) 0.8em,
			var(--primrose) 0.81em,
			var(--peach) 0.87em,
			var(--trans) 0.88em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.94em 0.06em,
			var(--trans),
			var(--trans) 0.8em,
			var(--lemon) 0.81em,
			var(--peach) 0.87em,
			var(--trans) 0.88em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.06em 0.94em,
			var(--trans),
			var(--trans) 0.8em,
			var(--lemon) 0.81em,
			var(--peach) 0.87em,
			var(--trans) 0.88em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.94em 0.94em,
			var(--trans),
			var(--trans) 0.8em,
			var(--lemon) 0.81em,
			var(--peach) 0.87em,
			var(--trans) 0.88em,
			var(--trans) 3em);
	background-size: 1em 1em;
}

.interlock {
	background-color: var(--coral);
	background-image:
		repeating-radial-gradient(
			circle at 0.06em 0.06em,
			var(--trans),
			var(--trans) 0.5em,
			var(--peach) 0.51em,
			var(--peach) 0.57em,
			var(--trans) 0.58em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.94em 0.06em,
			var(--trans),
			var(--trans) 0.5em,
			var(--sakura) 0.51em,
			var(--sakura) 0.57em,
			var(--trans) 0.58em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.06em 0.94em,
			var(--trans),
			var(--trans) 0.5em,
			var(--sakura) 0.51em,
			var(--sakura) 0.57em,
			var(--trans) 0.58em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.94em 0.94em,
			var(--trans),
			var(--trans) 0.5em,
			var(--white) 0.51em,
			var(--white) 0.57em,
			var(--trans) 0.58em,
			var(--trans) 3em);
	background-size: 1em 1em;
}

.knot-work {
	background-color: var(--hazelnut);
	background-image:
		repeating-radial-gradient(
			circle at 0.25em 0.25em,
			var(--trans),
			var(--trans) 0.5em,
			var(--spearmint) 0.5em,
			var(--spearmint) 0.55em,
			var(--trans) 0.56em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.75em 0.25em,
			var(--trans),
			var(--trans) 0.5em,
			var(--spearmint) 0.5em,
			var(--spearmint) 0.55em,
			var(--trans) 0.56em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.25em 0.75em,
			var(--trans),
			var(--trans) 0.5em,
			var(--spearmint) 0.5em,
			var(--spearmint) 0.55em,
			var(--trans) 0.56em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.75em 0.75em,
			var(--trans),
			var(--trans) 0.5em,
			var(--spearmint) 0.5em,
			var(--spearmint) 0.55em,
			var(--trans) 0.56em,
			var(--trans) 3em);
	background-size: 1em 1em;
}

.port-hole {
	background-color: var(--sea-foam);
	background-image:
		repeating-radial-gradient(
			circle at 0.45em 0.45em,
			var(--trans),
			var(--trans) 0.46em,
			var(--white) 0.47em,
			var(--white) 0.5em,
			var(--trans) 0.51em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.55em 0.45em,
			var(--trans),
			var(--trans) 0.46em,
			var(--white) 0.47em,
			var(--white) 0.5em,
			var(--trans) 0.51em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.45em 0.55em,
			var(--trans),
			var(--trans) 0.46em,
			var(--white) 0.47em,
			var(--white) 0.5em,
			var(--trans) 0.51em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.55em 0.55em,
			var(--trans),
			var(--trans) 0.46em,
			var(--white) 0.47em,
			var(--white) 0.5em,
			var(--trans) 0.51em,
			var(--trans) 3em);
	background-size: 1em 1em;
}

.terracotta-trace {
	background-color: var(--sakura);
	background-image:
		repeating-radial-gradient(
			circle at 0.35em 0.35em,
			var(--trans),
			var(--trans) 0.46em,
			var(--melon) 0.47em,
			var(--melon) 0.5em,
			var(--trans) 0.51em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.65em 0.35em,
			var(--trans),
			var(--trans) 0.46em,
			var(--melon) 0.47em,
			var(--melon) 0.5em,
			var(--trans) 0.51em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.35em 0.65em,
			var(--trans),
			var(--trans) 0.46em,
			var(--melon) 0.47em,
			var(--melon) 0.5em,
			var(--trans) 0.51em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.65em 0.65em,
			var(--trans),
			var(--trans) 0.46em,
			var(--melon) 0.47em,
			var(--melon) 0.5em,
			var(--trans) 0.51em,
			var(--trans) 3em),
		
		repeating-radial-gradient(
			circle at 0.35em 0.35em,
			var(--trans),
			var(--trans) 0.42em,
			var(--peach) 0.43em,
			var(--peach) 0.5em,
			var(--trans) 0.51em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.65em 0.35em,
			var(--trans),
			var(--trans) 0.42em,
			var(--peach) 0.43em,
			var(--peach) 0.5em,
			var(--trans) 0.51em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.35em 0.65em,
			var(--trans),
			var(--trans) 0.42em,
			var(--peach) 0.43em,
			var(--peach) 0.5em,
			var(--trans) 0.51em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.65em 0.65em,
			var(--trans),
			var(--trans) 0.42em,
			var(--peach) 0.43em,
			var(--peach) 0.5em,
			var(--trans) 0.51em,
			var(--trans) 3em);
	background-size: 1em 1em;
}

.purple-quartz {
	background-color: var(--bloom);
	background-image:
		repeating-linear-gradient(
			-45deg,
			var(--trans) 0%,
			var(--trans) 35%,
			var(--dusty-purple) 35%, 
			var(--dusty-purple) 48%,
			var(--purple) 48%,
			var(--purple) 55%,
			var(--sakura) 55%,
			var(--sakura) 65%,
			var(--trans) 65%,
			var(--trans) 100%);
	background-size: 1em 1em;
}

.sort {
	background-color: var(--melon);
	background-image:
		repeating-linear-gradient(
			-45deg,
			var(--butter),
			var(--butter) 0.45em,
			var(--trans) 0.45em, 
			var(--trans) 0.95em,
			var(--butter) 0.95em,
			var(--butter) 1em),
		repeating-linear-gradient(
			45deg,
			var(--butter),
			var(--butter) 0.45em,
			var(--trans) 0.45em, 
			var(--trans) 0.95em,
			var(--butter) 0.95em,
			var(--butter) 1em),
		repeating-linear-gradient(
			0deg,
			var(--trans),
			var(--trans) 0.4em,
			var(--butter) 0.4em, 
			var(--butter) 0.6em,
			var(--trans) 0.6em,
			var(--trans) 2em);
	background-size: 1em 1em;
}

.nope {
	background-color: var(--rouge);
	background-image:
		repeating-linear-gradient(
			-45deg,
			var(--rouge),
			var(--rouge) 0.42em,
			var(--trans) 0.42em, 
			var(--trans) 0.98em,
			var(--rouge) 0.98em,
			var(--rouge) 1em),
		repeating-linear-gradient(
			45deg,
			var(--rouge),
			var(--rouge) 0.42em,
			var(--trans) 0.42em, 
			var(--trans) 0.98em,
			var(--rouge) 0.98em,
			var(--rouge) 1em),
		repeating-linear-gradient(
			45deg,
			var(--trans),
			var(--trans) 0.62em,
			var(--white) 0.62em, 
			var(--white) 0.78em,
			var(--trans) 0.78em,
			var(--trans) 1em),
		repeating-linear-gradient(
			-45deg,
			var(--trans),
			var(--trans) 0.62em,
			var(--white) 0.62em, 
			var(--white) 0.78em,
			var(--trans) 0.78em,
			var(--trans) 1em);
	background-size: 1em 1em;
}

.mermaid {
	background-color: var(--spearmint);
	background-image:
		repeating-radial-gradient(
			circle at 0.5em 0,
			var(--robins-egg),
			var(--spearmint) 0.4em,
			var(--sea-foam) 0.45em,
			var(--sea-glass) 0.5em,
			var(--trans) 0.51em,
			var(--trans) 3em);
	background-size: 1em 0.5em;
}
.mermaid::before {
	background-image:
		repeating-radial-gradient(
			circle at 0.5em 0,
			var(--robins-egg),
			var(--spearmint) 0.4em,
			var(--sea-foam) 0.45em,
			var(--sea-foam) 0.5em,
			var(--trans) 0.51em,
			var(--trans) 3em);
	background-size: 1em 0.5em;
	background-position: 0.5em 0.75em;
}
.mermaid::after {
	background-image:
		repeating-radial-gradient(
			circle at 0.5em -0.25em,
			var(--robins-egg),
			var(--spearmint) 0.4em,
			var(--sea-foam) 0.45em,
			var(--sea-foam) 0.5em,
			var(--trans) 0.51em,
			var(--trans) 3em);
	background-size: 1em 0.5em;
	background-position: 0.0em 0.25em;
}

.rainbows {
	background-color: var(--spearmint);
	background-image:
		repeating-radial-gradient(
			circle at 0.5em 0.5em,
			var(--trans),
			var(--trans) 0.2em,
			var(--purple) 0.21em,
			var(--purple) 0.24em,
			var(--royal) 0.25em,
			var(--royal) 0.3em,
			var(--emerald) 0.31em,
			var(--emerald) 0.35em,
			var(--butter) 0.36em,
			var(--butter) 0.4em,
			var(--orange) 0.41em,
			var(--orange) 0.45em,
			var(--rouge) 0.46em,
			var(--rouge) 0.5em,
			var(--trans) 0.51em,
			var(--trans) 2em);
	background-size: 1em 0.5em;
}
.rainbows::before {
	background-image:
		repeating-radial-gradient(
			circle at 0.5em 0.5em,
			var(--trans),
			var(--trans) 0.2em,
			var(--purple) 0.21em,
			var(--purple) 0.24em,
			var(--royal) 0.25em,
			var(--royal) 0.3em,
			var(--emerald) 0.31em,
			var(--emerald) 0.35em,
			var(--butter) 0.36em,
			var(--butter) 0.4em,
			var(--orange) 0.41em,
			var(--orange) 0.45em,
			var(--rouge) 0.46em,
			var(--rouge) 0.5em,
			var(--trans) 0.51em,
			var(--trans) 2em);
	background-size: 1em 0.5em;
	background-position: 0.5em 0.75em;
}
.rainbows::after {
	background-image:
		repeating-radial-gradient(
			circle at 0.5em 0.75em,
			var(--trans),
			var(--trans) 0.2em,
			var(--purple) 0.21em,
			var(--purple) 0.24em,
			var(--royal) 0.25em,
			var(--royal) 0.3em,
			var(--emerald) 0.31em,
			var(--emerald) 0.35em,
			var(--butter) 0.36em,
			var(--butter) 0.4em,
			var(--orange) 0.41em,
			var(--orange) 0.45em,
			var(--rouge) 0.46em,
			var(--rouge) 0.5em,
			var(--trans) 0.51em,
			var(--trans) 2em);
	background-size: 1em 0.5em;
	background-position: 0.0em 0.25em;
}

.bones {
	background-color: var(--aubergine);
	background-image:
		repeating-radial-gradient(
			circle at 0.2em 0.3em,
			var(--trans),
			var(--trans) 0.49em,
			var(--aubergine) 0.5em,
			var(--aubergine) 3em),
		repeating-radial-gradient(
			circle at 1.1em -1.4em,
			var(--trans),
			var(--trans) 1.99em,
			var(--mushroom) 2em,
			var(--mushroom) 2.15em,
			var(--trans) 2.16em,
			var(--trans) 3em);
	background-size: 1em 1em;
}
.bones::before{
	background-size: 1em 1em;
	background-position: 0em 0.1em;
	background-image:
		repeating-radial-gradient(
			circle at -0.7em -0.5em,
			var(--trans),
			var(--trans) 1.99em,
			var(--mushroom) 2em,
			var(--mushroom) 2.15em,
			var(--trans) 2.16em,
			var(--trans) 3em);
}
.bones::after {
	background-size: 1em 1em;
	background-position: 0.2em 0.2em;
	background-image:
		repeating-radial-gradient(
			circle at 0.44em 0.35em,
			var(--mushroom),
			var(--mushroom) 0.1em,
			var(--trans) 0.11em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.4em 0.44em,
			var(--mushroom),
			var(--mushroom) 0.1em,
			var(--trans) 0.11em,
			var(--trans) 3em),
		
		repeating-radial-gradient(
			circle at 0.89em 0.13em,
			var(--mushroom),
			var(--mushroom) 0.1em,
			var(--trans) 0.11em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.84em 0.23em,
			var(--mushroom),
			var(--mushroom) 0.1em,
			var(--trans) 0.11em,
			var(--trans) 3em),
		
		repeating-radial-gradient(
			circle at 0.78em 0.54em,
			var(--mushroom),
			var(--mushroom) 0.1em,
			var(--trans) 0.11em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.86em 0.62em,
			var(--mushroom),
			var(--mushroom) 0.1em,
			var(--trans) 0.11em,
			var(--trans) 3em),
		
		repeating-radial-gradient(
			circle at 0.47em 0.88em,
			var(--mushroom),
			var(--mushroom) 0.1em,
			var(--trans) 0.11em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.56em 0.95em,
			var(--mushroom),
			var(--mushroom) 0.1em,
			var(--trans) 0.11em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.56em -0.05em,
			var(--mushroom),
			var(--mushroom) 0.1em,
			var(--trans) 0.11em,
			var(--trans) 3em);
}

.villain-underpants {
	background-color: var(--carmine);
	background-image:
		repeating-radial-gradient(
			circle at 1.2em -0.2em,
			var(--ruby),
			var(--ruby) 0.5em,
			var(--trans) 0.51em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at -0.2em -0.2em,
			var(--ruby),
			var(--ruby) 0.5em,
			var(--trans) 0.51em,
			var(--trans) 3em);
	background-size: 1em 1em;
	background-position: 0 0;
}
.villain-underpants::before {
	background-image:
		repeating-radial-gradient(
			circle at 1.2em -0.2em,
			var(--ruby),
			var(--ruby) 0.5em,
			var(--trans) 0.51em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at -0.2em -0.2em,
			var(--ruby),
			var(--ruby) 0.5em,
			var(--trans) 0.51em,
			var(--trans) 3em);
	background-size: 1em 1em;
	background-position: 0.5em 0.5em;
}
.villain-underpants::after {
	background-image:
		repeating-radial-gradient(
			circle at 0.385em 0.64em,
			var(--ruby),
			var(--ruby) 0.14em,
			var(--trans) 0.15em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.615em 0.64em,
			var(--ruby),
			var(--ruby) 0.14em,
			var(--trans) 0.15em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.885em 0.14em,
			var(--ruby),
			var(--ruby) 0.14em,
			var(--trans) 0.15em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.115em 0.14em,
			var(--ruby),
			var(--ruby) 0.14em,
			var(--trans) 0.15em,
			var(--trans) 2em);
	background-size: 1em 1em;
	background-position: 0.5em 0.32em;
}

.cumulus {
	background-color: var(--blue-tack);
	background-image:
		repeating-radial-gradient(
			circle at 0.77em 0.87em,
			var(--white),
			var(--white) 0.12em,
			var(--trans) 0.121em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.94em 1.05em,
			var(--white),
			var(--white) 0.16em,
			var(--trans) 0.161em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.24em 1.05em,
			var(--white),
			var(--white) 0.16em,
			var(--trans) 0.161em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.5em 0.92em,
			var(--white),
			var(--white) 0.26em,
			var(--trans) 0.261em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.58em 1.1em,
			var(--white),
			var(--white) 0.35em,
			var(--trans) 0.351em,
			var(--trans) 3em);
	background-size: 2em 1.21em;
	background-position: -0.3em -0.2em;
}
.cumulus::after {
	background-image:
		repeating-radial-gradient(
			circle at 0.74em 1.08em,
			var(--white),
			var(--white) 0.13em,
			var(--trans) 0.131em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.22em 1.05em,
			var(--white),
			var(--white) 0.16em,
			var(--trans) 0.161em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.45em 1.02em,
			var(--white),
			var(--white) 0.28em,
			var(--trans) 0.281em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.45em 1.2em,
			var(--white),
			var(--white) 0.28em,
			var(--trans) 0.281em,
			var(--trans) 3em);
	background-size: 2em 1.21em;
	background-position: -1.2em 0.4em;
}

.quatrefoil {
	background-color: var(--mushroom);
	background-image:
		repeating-radial-gradient(
			circle at 0.5em 0.5em,
			var(--mushroom),
			var(--mushroom) 0.26em,
			var(--trans) 0.275em,
			var(--trans) 2em),
		
		repeating-radial-gradient(
			circle at 0.59em 0.31em,
			var(--mushroom),
			var(--mushroom) 0.26em,
			var(--trans) 0.275em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.59em 0.87em,
			var(--mushroom),
			var(--mushroom) 0.26em,
			var(--trans) 0.275em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.31em 0.59em,
			var(--mushroom),
			var(--mushroom) 0.26em,
			var(--trans) 0.275em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.87em 0.59em,
			var(--mushroom),
			var(--mushroom) 0.26em,
			var(--trans) 0.275em,
			var(--trans) 2em),

		repeating-radial-gradient(
			circle at 0.59em 0.31em,
			var(--slate),
			var(--slate) 0.35em,
			var(--trans) 0.351em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.59em 0.87em,
			var(--slate),
			var(--slate) 0.35em,
			var(--trans) 0.351em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.31em 0.59em,
			var(--slate),
			var(--slate) 0.35em,
			var(--trans) 0.351em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.87em 0.59em,
			var(--slate),
			var(--slate) 0.35em,
			var(--trans) 0.351em,
			var(--trans) 2em);
	background-size: 1.2em 1.2em;
	background-position: 0.42em 0.42em;
}

.leaf {
	background-color: var(--forest);
	background-image:
		repeating-radial-gradient(
			circle at 1.4em 0.49em,
			var(--spring),
			var(--spring) 0.54em,
			var(--trans) 0.555em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at -0.4em 0.49em,
			var(--lime),
			var(--lime) 0.54em,
			var(--trans) 0.555em,
			var(--trans) 2em);
	background-size: 1em 1.25em;
	background-position: 0.5em 0.15em;
}
.leaf::after {
	background-image:
		repeating-radial-gradient(
			circle at 1.4em 0.49em,
			var(--spring),
			var(--spring) 0.54em,
			var(--trans) 0.555em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at -0.4em 0.49em,
			var(--lime),
			var(--lime) 0.54em,
			var(--trans) 0.555em,
			var(--trans) 2em);
	background-size: 1em 1.25em;
	background-position: 0 0.75em;
}

.kitchen-tiles {
	background-color: var(--mushroom);
	background-image: 
		repeating-radial-gradient(
			circle at 0.5em 0.5em,
			var(--butter),
			var(--melon) 0.5em,
			var(--trans) 0.22em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.26em 0.26em,
			var(--melon),
			var(--melon) 0.2em,
			var(--trans) 0.22em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.74em 0.26em,
			var(--melon),
			var(--melon) 0.2em,
			var(--trans) 0.22em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.26em 0.74em,
			var(--melon),
			var(--melon) 0.2em,
			var(--trans) 0.21em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.74em 0.74em,
			var(--melon),
			var(--melon) 0.2em,
			var(--trans) 0.21em,
			var(--trans) 2em);
	background-size: 1em 1em;
}
.kitchen-tiles::before {
	background-image:
		repeating-linear-gradient(
			90deg,
			var(--trans),
			var(--trans) 0.44em,
			var(--mushroom) 0.44em, 
			var(--mushroom) 0.56em,
			var(--trans) 0.56em,
			var(--trans) 1em),
		repeating-linear-gradient(
			0deg,
			var(--trans),
			var(--trans) 0.44em,
			var(--mushroom) 0.44em, 
			var(--mushroom) 0.56em,
			var(--trans) 0.56em,
			var(--trans) 1em);
	background-size: 1em 1em;
	background-position: 0.5em 0.5em;
}

.medpack {
	background-color: var(--emerald);
	background-image:
		repeating-linear-gradient(
			90deg,
			var(--emerald),
			var(--emerald) 0.22em,
			var(--trans) 0.22em, 
			var(--trans) 0.78em, 
			var(--emerald) 0.78em,
			var(--emerald) 1em),
		repeating-linear-gradient(
			0deg,
			var(--emerald),
			var(--emerald) 0.22em,
			var(--trans) 0.22em, 
			var(--trans) 0.78em, 
			var(--emerald) 0.78em,
			var(--emerald) 1em),
		repeating-linear-gradient(
			90deg,
			var(--trans),
			var(--trans) 0.42em,
			var(--white) 0.42em, 
			var(--white) 0.58em,
			var(--trans) 0.58em,
			var(--trans) 1em),
		repeating-linear-gradient(
			0deg,
			var(--trans),
			var(--trans) 0.42em,
			var(--white) 0.42em, 
			var(--white) 0.58em,
			var(--trans) 0.58em,
			var(--trans) 1em);
	background-size: 1em 1em;
}

.lazy-triangle {
	background-color: var(--hazelnut);
	background-image:
		repeating-linear-gradient(
			45deg,
			var(--trans), 
			var(--trans) 0.36em, 
			var(--orange) 0.37em,
			var(--orange) 1em);
	background-size: 0.5em 0.5em;
}

.isometric {
	background-color: var(--blue-tack);
	background-image:
		repeating-linear-gradient(
			30deg,
			var(--trans), 
			var(--trans) 0.32em, 
			var(--robins-egg) 0.33em,
			var(--robins-egg) 0.6em,
			var(--trans) 0.61em,
			var(--trans) 1em),
		repeating-linear-gradient(
			-30deg,
			var(--trans), 
			var(--trans) 0.32em, 
			var(--robins-egg) 0.33em,
			var(--robins-egg) 0.6em,
			var(--trans) 0.61em,
			var(--trans) 1em);
	background-size: 1em 0.5em;
}

.googly-eyes {
	background-color: var(--bud);
	background-image:
		repeating-radial-gradient(
			circle at 0.5em 0.5em,
			var(--white), 
			var(--white) 0.42em, 
			var(--trans) 0.43em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.5em 0.57em,
			var(--sage), 
			var(--sage) 0.42em, 
			var(--trans) 0.43em,
			var(--trans) 2em);
	background-size: 1em 1em;
	background-position: 0.5em 0.5em;
}
.googly-eyes::before {
	background-image:
		repeating-radial-gradient(
			circle at 0.56em 0.64em,
			var(--ink), 
			var(--ink) 0.2em, 
			var(--trans) 0.22em,
			var(--trans) 4em,
			var(--ink) 5em),
		repeating-radial-gradient(
			circle at 1.4em 0.4em,
			var(--ink), 
			var(--ink) 0.2em, 
			var(--trans) 0.22em,
			var(--trans) 4em,
			var(--ink) 5em),
		repeating-radial-gradient(
			circle at 2.6em 0.45em,
			var(--ink), 
			var(--ink) 0.2em, 
			var(--trans) 0.22em,
			var(--trans) 4em,
			var(--ink) 5em),
		
		repeating-radial-gradient(
			circle at 0.42em 1.45em,
			var(--ink), 
			var(--ink) 0.2em, 
			var(--trans) 0.22em,
			var(--trans) 4em,
			var(--ink) 5em),
		repeating-radial-gradient(
			circle at 1.4em 1.55em,
			var(--ink), 
			var(--ink) 0.2em, 
			var(--trans) 0.22em,
			var(--trans) 4em,
			var(--ink) 5em),
		repeating-radial-gradient(
			circle at 2.4em 1.4em,
			var(--ink), 
			var(--ink) 0.2em, 
			var(--trans) 0.22em,
			var(--trans) 4em,
			var(--ink) 5em),
		
		repeating-radial-gradient(
			circle at 0.6em 2.55em,
			var(--ink), 
			var(--ink) 0.2em, 
			var(--trans) 0.22em,
			var(--trans) 4em,
			var(--ink) 5em),
		repeating-radial-gradient(
			circle at 1.55em 2.4em,
			var(--ink), 
			var(--ink) 0.2em, 
			var(--trans) 0.22em,
			var(--trans) 4em,
			var(--ink) 5em),
		repeating-radial-gradient(
			circle at 2.5em 2.6em,
			var(--ink), 
			var(--ink) 0.2em, 
			var(--trans) 0.22em,
			var(--trans) 4em,
			var(--ink) 5em);
	background-size: 3em 3em;
	background-position: 0.5em 0.5em;
}
.googly-eyes::after {
	background-image:
		repeating-radial-gradient(
			circle at 0.5em 0.5em,
			var(--white), 
			var(--trans) 0.22em,
			var(--trans) 3em);
	background-size: 1em 1em;
	background-position: 0.65em 0.35em;
	opacity: 0.5;
}

.circles {
	background-color: var(--peach);
	background-image:
		repeating-radial-gradient(
			circle at 0.5em 0.5em,
			var(--trans), 
			var(--trans) 0.46em, 
			var(--robins-egg) 0.47em,
			var(--robins-egg) 0.54em,
			var(--trans) 0.55em);
	background-size: 1em 1em;
	background-position: 0.5em 0.5em;
}
.circles::before {
	background-image:
		repeating-radial-gradient(
			circle at 0.5em 0.5em,
			var(--trans), 
			var(--trans) 0.46em, 
			var(--robins-egg) 0.47em,
			var(--robins-egg) 0.54em,
			var(--trans) 0.55em);
	background-size: 1em 1em;
	background-position: 0em 0em;
}

.fake-luggage {
	background-color: var(--hazelnut);
	background-image:
		repeating-radial-gradient(
			circle at 0.4em 0.4em,
			var(--trans),
			var(--trans) 0.03em,
			var(--butter) 0.03em, 
			var(--butter) 0.08em, 
			var(--trans) 0.09em, 
			var(--trans) 0.45em, 
			var(--butter) 0.46em, 
			var(--butter) 0.6em);
	background-size: 0.8em 0.8em;
	background-position: 0.6em 0.6em;
}

.circle-grid {
	background-color: var(--forest);
	background-image:
		repeating-radial-gradient(
			circle at 0.5em 0.5em,
			var(--sage), 
			var(--sage) 0.1em, 
			var(--trans) 0.11em, 
			var(--trans) 0.45em, 
			var(--sage) 0.46em);
	background-size: 1em 1em;
	background-position: 0.5em 0.5em;
}

.squares {
	background-color: var(--vavavoom);
	background-image:
		repeating-linear-gradient(
			-90deg,
			var(--coral), 
			var(--coral) 0.4em, 
			var(--trans) 0.4em, 
			var(--trans) 0.8em),
		repeating-linear-gradient(
			0deg,
			var(--coral), 
			var(--coral) 0.4em, 
			var(--trans) 0.4em, 
			var(--trans) 0.8em);
}

.blood-moon {
	background: var(--bloom);	
	background-image:
		repeating-radial-gradient(
			circle at 0.35em 0.15em,
			var(--bloom),
			var(--bloom) 0.2em, 
			var(--trans) 0.21em, 
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.25em 0.25em,
			var(--rouge),
			var(--rouge) 0.2em, 
			var(--trans) 0.21em, 
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.22em 0.28em,
			var(--ink),
			var(--ink) 0.2em, 
			var(--trans) 0.21em, 
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 1.15em 0.95em, 
			var(--bloom),
			var(--bloom) 0.2em, 
			var(--trans) 0.21em, 
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 1.05em 1.05em, 
			var(--rouge),
			var(--rouge) 0.2em, 
			var(--trans) 0.21em, 
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 1.02em 1.08em, 
			var(--ink),
			var(--ink) 0.2em, 
			var(--trans) 0.21em, 
			var(--trans) 3em);
	background-size: 1.6em 1.6em;
	background-position: 1.17em 1.12em;
}

.pyramids { 
	background: var(--mink);
	background-image:
		repeating-linear-gradient(
			-65deg,
			var(--trans),
			var(--trans) 0.5em,
			var(--mink) 0.5em,
			var(--mink) 0.74em, 
			var(--trans) 0.74em, 
			var(--trans) 3em),
		repeating-linear-gradient(
			-55deg,
			var(--fudge),
			var(--fudge) 0.3em, 
			var(--trans) 0.31em, 
			var(--trans) 3em),
		repeating-linear-gradient(
			55deg,
			var(--fudge),
			var(--fudge) 0.3em, 
			var(--trans) 0.31em, 
			var(--trans) 3em),
		repeating-linear-gradient(
			45deg,
			var(--chocolate),
			var(--chocolate) 0.38em, 
			var(--trans) 0.37em, 
			var(--trans) 3em);
	background-size: 1.2em 1em;
	background-position: 0.35em 0.8em;
}

.sharp-stars { 
	background: var(--yellow);
	background-image:
		repeating-radial-gradient(
			circle at 0.4em 0.4em, 
			var(--slate),
			var(--slate) 0.4em, 
			var(--purple-slate) 0.41em, 
			var(--purple-slate) 0.46em, 
			var(--trans) 0.47em, 
			var(--trans) 3em);
	background-size: 0.8em 0.8em;
	background-position: 1em 1em;
}

.stars { 
	background: var(--mushroom);	
	background-image:
		repeating-radial-gradient(
			circle at 0.8em 0.8em, 
			var(--twilight),
			var(--twilight) 0.85em, 
			var(--trans) 0.86em, 
			var(--trans) 3em);
	background-size: 1.6em 1.6em;
	background-position: 1em 1em;
}

.confetti {
	background: var(--peach);	
	background-image:
		repeating-radial-gradient(
			circle at 0.2em 0.2em,
			var(--lemon),
			var(--lemon) 0.16em, 
			var(--trans) 0.161em, 
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.7em 0.7em, 
			var(--yellow),
			var(--yellow) 0.16em, 
			var(--trans) 0.161em, 
			var(--trans) 3em);
	background-size: 1em 1em;
	background-position: 0.05em 0.05em;
}

.dots {
	background: var(--clay);	
	background-image:
		repeating-radial-gradient(
			circle at 0.2em 0.2em,
			var(--succulent),
			var(--succulent) 0.08em, 
			var(--trans) 0.081em, 
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.6em 0.6em, 
			var(--sage),
			var(--sage) 0.08em, 
			var(--trans) 0.081em, 
			var(--trans) 3em);
	background-size: 0.8em 0.8em;
}

.cat-toes {
	background: var(--powder-pink);
	background-image:
		repeating-radial-gradient(
			circle at 0.5em 0.55em,
			var(--dusty-pink), 
			var(--dusty-pink) 0.24em,
			var(--trans) 0.241em,
			var(--trans) 4em),
		repeating-radial-gradient(
			circle at 0.25em 0.24em,
			var(--dusty-pink), 
			var(--dusty-pink) 0.1em,
			var(--trans) 0.11em,
			var(--trans) 4em),
		repeating-radial-gradient(
			circle at 0.5em 0.15em,
			var(--dusty-pink), 
			var(--dusty-pink) 0.1em,
			var(--trans) 0.11em,
			var(--trans) 4em),
		repeating-radial-gradient(
			circle at 0.75em 0.24em,
			var(--dusty-pink), 
			var(--dusty-pink) 0.1em,
			var(--trans) 0.11em,
			var(--trans) 4em);
	background-position: 0.2em 0.3em;
	background-size: 1.2em 1.2em;
}

.diamonds {
	background: var(--sakura);
	background-image:
		repeating-linear-gradient(
			60deg,
			var(--slate), 
			var(--slate) 0.6em, 
			var(--trans) 0.61em, 
			var(--trans) 0.9em, 
			var(--slate) 0.91em),
		repeating-linear-gradient(
			-60deg,
			var(--slate), 
			var(--slate) 0.6em, 
			var(--trans) 0.61em, 
			var(--trans) 0.9em, 
			var(--slate) 0.91em),
		repeating-linear-gradient(
			90deg,
			var(--white), 
			var(--white) 0.3em,
			var(--trans) 0.31em,
			var(--trans) 0.52em,
			var(--white) 0.525em);
	background-position: 0.48em 0;
	background-size: 21em;
}

.trellis {
	background: var(--purple-slate);
	background-image:
		repeating-linear-gradient(
			-60deg,
			var(--dusty-pink), 
			var(--dusty-pink) 0.1em, 
			var(--trans) 0.11em, 
			var(--trans) 0.4em, 
			var(--dusty-pink) 0.41em),
		repeating-linear-gradient(
			60deg,
			var(--hazelnut), 
			var(--hazelnut) 0.1em, 
			var(--trans) 0.11em, 
			var(--trans) 0.4em, 
			var(--hazelnut) 0.41em);
	background-size: 10em;
}

.orange-buzz {
	background: var(--orange);
	background-image:
		repeating-linear-gradient(
			45deg,
			var(--peach), 
			var(--peach) 0.2em, 
			var(--trans) 0.2em, 
			var(--trans) 0.4em);
	background-size: 0.2em 20em;
}

.lemon-lime-gingham {
	background: var(--pale-lemon);
}
.lemon-lime-gingham::before {
	background-image:
		repeating-linear-gradient(
			0deg,
			var(--yellow), 
			var(--yellow) 0.2em, 
			var(--trans) 0.2em, 
			var(--trans) 0.4em, 
			var(--emerald) 0.4em,
			var(--emerald) 0.6em,
			var(--trans) 0.6em,
			var(--trans) 0.8em);
	opacity: 0.4;
}
.lemon-lime-gingham::after {
	background-image:
		repeating-linear-gradient(
			90deg,
			var(--yellow), 
			var(--yellow) 0.2em, 
			var(--trans) 0.2em, 
			var(--trans) 0.4em, 
			var(--emerald) 0.4em,
			var(--emerald) 0.6em,
			var(--trans) 0.6em,
			var(--trans) 0.8em);
	opacity: 0.4;
}

.lavender-lumberjack {
	background-image:
		repeating-linear-gradient(
			0deg,
			var(--trans2), 
			var(--trans2) 0.4em, 
			var(--trans) 0.4em, 
			var(--trans) 0.8em),
		repeating-linear-gradient(
			-90deg,
			var(--dusty-purple), 
			var(--dusty-purple) 0.4em, 
			var(--aubergine) 0.4em, 
			var(--aubergine) 0.8em);
}

.vertical-stripes {
	background-image:
		repeating-linear-gradient(
			-90deg,
			var(--powder-blue), 
			var(--powder-blue) 0.56em, 
			var(--blue-tack) 0.56em, 
			var(--blue-tack) 0.64em);
}

.diagonal-stripes {
	background-image:
		repeating-linear-gradient(
			-45deg,
			var(--sea-foam), 
			var(--sea-foam) 0.3em, 
			var(--spearmint) 0.3em, 
			var(--spearmint) 0.4em);
}

.stripes {	
	background-image:
		repeating-linear-gradient(
			var(--strawberry-yogurt), 
			var(--strawberry-yogurt) 0.2em, 
			var(--sakura) 0.2em, 
			var(--sakura) 0.4em);
}
              
            
!

JS

              
                
              
            
!
999px

Console