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="frame antler today"><div></div></div>
<div class="frame seagull-foot"><div></div></div>
<div class="frame puffin"><div></div></div>
<div class="frame tadpole"><div></div></div>
<div class="frame frogspawn"><div></div></div>
<div class="frame slow-worm"><div></div></div>
<div class="frame wood-mouse"><div></div></div>
<div class="frame easter-eggs"><div></div></div>
<div class="frame damselfly"><div></div></div>
<div class="frame ant"><div></div></div>
<div class="frame grasshopper"><div></div></div>
<div class="frame dragonfly"><div></div></div>
<div class="frame ray"><div></div></div>
<div class="frame peacock-feather"><div></div></div>
<div class="frame centipede"><div></div></div>
<div class="frame duckling"><div></div></div>
<div class="frame shield-bug"><div></div></div>
<div class="frame bunny-face"><div></div></div>
<div class="frame pet-rock"><div></div></div>
<div class="frame wasp"><div></div></div>
<div class="frame robin"><div></div></div>
<div class="frame crow-flying"><div></div></div>
<div class="frame seagull"><div></div></div>
<div class="frame swan"><div></div></div>
<div class="frame grove-snail"><div></div></div>
<div class="frame sheep"><div></div></div>
<div class="frame hedgehog"><div></div></div>
<div class="frame hungry-chick"><div></div></div>
<div class="frame down-feather"><div></div></div>
<div class="frame bird-print"><div></div></div>
<div class="frame cinnabar-caterpillar"><div></div></div>
<div class="frame woodlouse"><div></div></div>
<div class="frame bumblebee"><div></div></div>
<div class="frame starfish"><div></div></div>
<div class="frame moon-jellyfish"><div></div></div>
<div class="frame spider-web"><div></div></div>
<div class="frame cabbage-white"><div></div></div>
<div class="frame cat-tracks"><div></div></div>
<div class="frame common-blue"><div></div></div>
<div class="frame fox-face"><div></div></div>
<div class="frame rabbit"><div></div></div>
<div class="frame goats-eye"><div></div></div>
<div class="frame spider-dangle"><div></div></div>
<div class="frame mouse"><div></div></div>
<div class="frame bat"><div></div></div>
<div class="frame sparrow"><div></div></div>
<div class="frame cats-nose"><div></div></div>
<div class="frame ladybird"><div></div></div>
<div class="frame money-spider"><div></div></div>
<div class="frame swift"><div></div></div>
<div class="frame blackbird"><div></div></div>
<div class="frame mussel"><div></div></div>
<div class="frame earthworm"><div></div></div>
<div class="frame dove"><div></div></div>
<div class="frame minnow"><div></div></div>
<div class="frame shell"><div></div></div>
<div class="frame crow-feather"><div></div></div>
<div class="frame cats-eye"><div></div></div>
<div class="frame frog-submerged"><div></div></div>
<div class="frame slug"><div></div></div>
<div class="frame moth"><div></div></div>
<div class="frame songbird-eggs"><div></div></div>
<div class="frame caterpillar"><div></div></div>
<div class="frame gnat"><div></div></div>
              
            
!

CSS

              
                :root {
	--ambrosia:						#FCDBBA;
	--apricot: 						#FF8652;
	--aubergine: 					#6A2352;
	--auburn: 						#A12F2F;
	--banana:							#FEE694;
	--beetroot:						#7F0421;
	--berry:							#461234;
	--blue-tack: 					#82BFE0;
	--blue-gray: 					#91A2C2;
	--blush: 							#D67B71;
	--bronze:							#C27940;
	--bud:								#94C15C;
	--burnt-orange:				#FF5F00;
	--butter:							#F2C94C;
	--camo:								#AAA843;
	--cappuccino:					#C9B092;
	--carmine:						#9A133E;
	--cerise:							#FF0F63;
	--champagne: 					#FCEBD5;
	--charcoal: 					#4F4450;
	--chestnut: 					#81291F;
	--chocolate: 					#8F5D38;
	--clay: 							#7D6050;
  --cloud:    					#F2EFE3;
  --coffee:    					#624739;
	--conker: 						#6F3131;
	--coral: 							#EB4444;
	--dove:								#C9C5CB;
	--dusty-purple: 			#7D6391;
	--dusty-pink: 				#E4ADAD;
	--emerald: 						#55B95F;
	--eucalyptus: 				#688461;
	--fern:								#4F8D08;
	--forest: 						#2E644A;
	--forget-me-not: 			#91A7FA;
	--fudge:							#C28742;
	--grassy: 						#A8D363;
	--gray: 							#98919F;
	--green:							#62B90A;
	--hazelnut: 					#D08E5A;
	--hot-pink:						#FF3263;
	--ice:								#E1EFF8;
	--ink:								#292C31;
	--iron:								#6B5C6C;
	--lapis:							#2B4D8D;
	--latte:							#A38468;
	--leafy:							#318553;
	--lemon:							#EAFC7E;
	--lilac:							#8E8ADE;
	--lime: 							#73D645;
	--limestone:					#C9C5B5;
	--magenta:						#BC2767;
	--meadow:							#7A9A3E;
	--melon:							#F2994A;
	--midnight:						#1B3955;
	--mink:								#E8C9A1;
	--mint:								#C4EA70;
	--moss:								#83A944;
	--mushroom:						#EDE8D5;
	--mustard:						#CC9E08;
	--navy:								#363A57;
	--ocean:							#206777;
	--orange:							#FD8A04;
	--orchid:							#7945BF;
	--pale-lemon:					#F4FFDC;
	--peach:							#FFB190;
	--petal:							#F4E9F3;
	--pebble:							#B8B4BE;
	--pink:								#FFC9D8;
	--pond-bottom:				#264A46;
	--posy:								#DED7EC;
	--powder-blue:				#B5D0E0;
	--powder-pink:				#FBD1D1;
	--primrose:						#E1F7B0;
	--punch:							#FF5563;
	--purple:							#A95AF3;
	--purple-slate:				#545375;
	--rainforest:					#25422E;
	--raspberry-jam:			#3C0D2B;
	--robins-egg:					#B8DEE0;
	--rouge:							#CC3737;
	--royal:							#4169E1;
	--ruby:								#D1314B;
	--sage:								#87A376;
	--sakura:							#FFE4E4;
	--salmon:							#FF7863;
	--sand:								#E1BE7C;
	--squash:							#E96310;
	--sea-glass:					#7FD1AE;
	--sea-foam:						#5D998B;
	--sea-fog:						#758C92;
	--slate:							#7184A5;
	--spearmint:					#94E0CF;
	--spice:							#B54E16;
	--spring:							#5ACB65;
	--strawberry-yogurt:	#E4BCAD;
	--sun:								#FEC305;
  --teal:          			#29879C;
  --terracotta:    			#B76A61;
	--twilight:						#203763;
	--vavavoom:						#BF0D0D;
  --walnut:      				#381F19;
	--white:							#F7F7FC;
	--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);
	--trans5: rgba(255,255,255,0.5);
}

* { margin: 0; padding: 0; font-size: 1.18em; }
body { background: #223;
	margin: 2em; max-width: 90em; }
.frame { height: 2em; width: 2em; display: inline-block; float: left;	margin: 0.1em; border-radius: 1em; font-size: 4em; 
	
/*	flip horizontally */
/*
	transform: scaleX(-1);

/* add stripes to the backgrounds to show everything is self contained *
/*
background-image:
	repeating-linear-gradient(
		-45deg,
		var(--trans),
		var(--trans) 0.1em,
		var(--trans05) 0.1em,
		var(--trans05) 0.2em,
		var(--trans) 0.2em);
	*/
}

/* light condensed mode */
/*
body { background: var(--dove); max-width: 80em; }
.frame { background: rgba(255,255,255,0.05) !important; border-radius: 0; margin: 0em; }

/* dark condensed mode */
/*
body { background: var(--navy); max-width: 80em; }
.frame { background: none !important; border-radius: 0; margin: -0.25em; }
/* */

.frame div { position: relative; transform-style: preserve-3d; font-size: 1em; }
.frame *::before,
.frame *::after { content: ''; display: block; position: relative;  }
.today { font-size: 10em; }

* { margin: 0; padding: 0; }

/* moth that didn't work out
.moth { background-color: var(--clay); }
.moth div {
	background-image:
		repeating-radial-gradient(
			circle at 0.02em 0.02em,
			var(--cappuccino),
			var(--cappuccino) 0.22em,
			var(--trans) 0.37em,
			var(--trans) 3em),
		repeating-radial-gradient(
			circle at 0.16em 0.1em,
			var(--mink),
			var(--mink) 0.46em,
			var(--cappuccino) 0.47em,
			var(--cappuccino) 0.5em,
			var(--trans) 0.51em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.04em 0.2em,
			var(--mink),
			var(--mink) 0.56em,
			var(--cappuccino) 0.57em,
			var(--cappuccino) 0.6em,
			var(--trans) 0.61em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.3em 0.0em,
			var(--mink),
			var(--mink) 0.56em,
			var(--cappuccino) 0.57em,
			var(--cappuccino) 0.6em,
			var(--trans) 0.61em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.0em 0.3em,
			var(--mink),
			var(--mink) 0.65em,
			var(--cappuccino) 0.66em,
			var(--cappuccino) 0.7em,
			var(--trans) 0.71em,
			var(--trans) 2em),
		repeating-radial-gradient(
			circle at 0.45em -0.1em,
			var(--mink),
			var(--mink) 0.65em,
			var(--cappuccino) 0.66em,
			var(--cappuccino) 0.7em,
			var(--trans) 0.71em,
			var(--trans) 2em);
	border-radius: 0.2em 0.2em 0 0.2em; 
	height: 1.1em; 
	left: 0.5em; 
	top: 0.92em;
	transform: 
		rotate(55deg)
		skew(40deg);
	width: 1.2em;
}
.moth div::before {
	background-image:
		repeating-radial-gradient(
			circle at 0.09em 0.07em,
			var(--trans),
			var(--trans) 0.16em,
			var(--mink) 0.17em,
			var(--mink) 0.21em,
			var(--trans) 0.22em,
			var(--trans) 3em);
	left: -0.16em;
	height: 1em;
	top: -0.12em;
	transform: 
		skew(-10deg)
		translateZ(-1em);
	width: 1em;
}
*/


.antler { background-color: var(--coffee); }
.antler div {
	border-radius: 0.9em/0.6em;
	height: 0.5em; 
	left: 0.94em;
	top: 0.35em;
	border-bottom: 0.15em solid var(--hazelnut);
	transform:
		rotate(0deg);
	width: 0.9em;
	outline: 1px solid var(--trans2);
}
.antler div::before {
	border-top: 0.14em solid var(--mushroom);
	border-radius: 0.9em/0.5em;
	height: 0.5em;
	left: -0.4em;
	top: 0.34em;
	width: 0.7em;
	opacity: 0.7;
	outline: 1px solid var(--trans2);
}
.antler div::after {
	border-bottom: 0.11em solid var(--latte);
	border-radius: 0.9em/0.7em;
	height: 0.5em;
	left: 0.1em;
	top: -0.8em;
	width: 0.6em;
	opacity: 0.7;
	outline: 1px solid var(--trans2);
}


.seagull-foot { background-color: var(--teal); }
.seagull-foot div {
	background: var(--sun);
	border-radius: 0.05em;
	height: 0.8em; 
	left: 0.94em;
	top: 0.35em;
	transform:
		skew(-5deg)
		rotate(5deg)
		translateZ(1em);
	width: 0.1em;
}
.seagull-foot div::before,
.seagull-foot div::after {
	color: var(--sun);
  background-image:
		radial-gradient(
			circle at 0.6em 0.7em,
			var(--trans) 0 0.645em,
			currentColor 0.65em 0.905em,
			currentColor 0.91em 1em,
			var(--trans) 0.63em 1em);
	border-radius: 0.5em 1em 2em 2em;
	height: 0.7em;
	left: 0.31em;
	top: 0.8em;
	width: 0.7em;
}
.seagull-foot div::before {
	transform:
		rotate(10deg)
		skew(50deg);
}
.seagull-foot div::after {
	color: var(--butter);
	left: -0.1em;
	top: 0.4em;
	transform:
		rotate(47deg)
		skew(50deg);
}

.puffin { background-color: var(--purple-slate); }
.puffin div {
  background-image:
		/* head */
		
		repeating-radial-gradient(
			circle at 0.14em 0.82em,
			var(--trans) 0 0.28em,
			var(--charcoal) 0.285em 0.36em,
			var(--trans) 0.365em 2em),
		
		/* eye */
		
		repeating-radial-gradient(
			circle at 0.28em 0.69em,
			var(--trans) 0 0.16em,
			var(--cloud) 0.165em 0.24em,
			var(--trans) 0.245em 2em),
		repeating-radial-gradient(
			circle at 0.37em 0.58em,
			var(--cloud) 0 0.19em,
			var(--trans) 0.195em 2em),
		repeating-radial-gradient(
			circle at 0.22em 0.96em,
			var(--cloud) 0 0.24em,
			var(--trans) 0.245em 2em),
		repeating-radial-gradient(
			circle at 0.16em 0.68em,
			var(--ink) 0 0.03em, 
			var(--coral) 0.035em 0.05em,
			var(--trans) 0.055em 2em),
		
		/* top of bill */
		repeating-radial-gradient(
			circle at 1.1em 0.82em,
			var(--iron) 0 0.2em,
			var(--charcoal) 0.26em 0.27em,
			var(--trans) 0.275em 2em),
		repeating-radial-gradient(
			circle at 1em 0.92em,
			var(--iron) 0 0.2em,
			var(--coral) 0.31em 0.32em,
			var(--trans) 0.325em 2em),
		repeating-radial-gradient(
			circle at 0.94em 0.94em,
			var(--iron) 0 0.2em,
			var(--coral) 0.34em 0.34em,
			var(--trans) 0.345em 2em),
		repeating-radial-gradient(
			circle at 0.9em 0.96em,
			var(--iron) 0 0.2em,
			var(--coral) 0.36em 0.36em,
			var(--trans) 0.365em 2em),
		
		/* bottom of bill */
		repeating-radial-gradient(
			circle at 0.9em -0.32em,
			var(--iron) 0 0.2em,
			var(--coral) 0.36em 0.36em,
			var(--trans) 0.365em 2em),
		repeating-radial-gradient(
			circle at 0.88em -0.22em,
			var(--iron) 0 0.26em,
			var(--coral) 0.32em 0.32em,
			var(--trans) 0.325em 2em),
		repeating-radial-gradient(
			circle at 0.84em -0.26em,
			var(--iron) 0 0.3em,
			var(--coral) 0.36em 0.36em,
			var(--trans) 0.365em 2em),
		
		/* head */
		repeating-radial-gradient(
			circle at 1.36em 0.24em,
			var(--ink) 0 0.41em,
			var(--trans) 0.415em 2em),
		repeating-radial-gradient(
			circle at 0.05em 0.85em,
			var(--ink) 0 0.41em,
			var(--trans) 0.415em 2em)
		;
	background-position: 0.5em 0.3em;
	border: 1px solid var(--bud);
	border-radius: 1em;
	height: 0.8em; 
	left: 0.3em;
	transform:
		rotate(12deg);
	top: 0.7em;
	width: 1em;
}
/* i can't remember where i was going with this one */

.tadpole { background-color: var(--ocean); }
.tadpole div {
  background-image:
		repeating-radial-gradient(
			circle at 0.195em 0.625em,
			var(--charcoal) 0 0.03em,
			var(--trans) 0.035em 2em),
		repeating-radial-gradient(
			circle at 0.195em 0.025em,
			var(--charcoal) 0 0.03em,
			var(--trans) 0.035em 2em),
		repeating-radial-gradient(
			circle at 0.18em 0.03em,
			var(--ink) 0 0.04em,
			var(--trans) 0.045em 2em),
		repeating-radial-gradient(
			circle at 0.26em 0.045em,
			var(--ink) 0 0.09em,
			var(--trans) 0.095em 2em),
		repeating-radial-gradient(
			circle at 0.34em 0.01em,
			var(--ink) 0 0.14em,
			var(--trans) 0.145em 2em),
		repeating-radial-gradient(
			circle at 0.32em 0.8em,
			var(--ink) 0 0.26em,
			var(--trans) 0.265em 2em);
	background-position: 0 0.2em;
	height: 0.6em; 
	left: 0.3em;
	transform: 
		rotate(10deg)
		skew(-12deg)
		translateZ(1em);
	top: 0.7em;
	width: 0.6em;
}
.tadpole div::before {
	border: 0.005em solid var(--trans);
	border-bottom: 0.04em solid var(--ink);
	border-radius: 120%/100% 0.2em;
	height: 0.5em; 
	left: 0.32em;
	transform: 
		rotate(0deg)
		skew(-8deg)
		translateZ(1em);
	top: -0.3em;
	width: 0.9em;
}
.tadpole div::after {
  background-image:
		radial-gradient(
			var(--trans1) 0 0.25em,
			var(--trans2) 0.9em);
	border-radius: 100%;
	height: 0.25em; 
	left: 0.25em;
	transform:
		skew(-20deg)
		rotate(-6deg)
		translateZ(-1em);
	top: -0.5em;
	width: 1em;
}

.frogspawn { background-color: var(--pond-bottom); }
.frogspawn div {
  background-image:
		repeating-radial-gradient(
			circle at 0.45em 0.9em,
			var(--walnut) 0 0.015em,
			var(--trans1) 0.02em 0.025em,
			var(--trans2) 0.075em 0.09em,
			var(--trans) 0.095em 2em),
		repeating-radial-gradient(
			circle at 0.7em 0.77em,
			var(--walnut) 0 0.015em,
			var(--trans1) 0.02em 0.025em,
			var(--trans2) 0.075em 0.09em,
			var(--trans) 0.095em 2em),
		repeating-radial-gradient(
			circle at 0.93em 0.5em,
			var(--walnut) 0 0.015em,
			var(--trans1) 0.02em 0.025em,
			var(--trans2) 0.075em 0.09em,
			var(--trans) 0.095em 2em),
		repeating-radial-gradient(
			circle at 0.54em 0.68em,
			var(--walnut) 0 0.015em,
			var(--trans1) 0.02em 0.025em,
			var(--trans2) 0.075em 0.09em,
			var(--trans) 0.095em 2em),
		repeating-radial-gradient(
			circle at 0.74em 0.61em,
			var(--walnut) 0 0.015em,
			var(--trans1) 0.02em 0.025em,
			var(--trans2) 0.075em 0.09em,
			var(--trans) 0.095em 2em),
		repeating-radial-gradient(
			circle at 0.4em 0.54em,
			var(--walnut) 0 0.015em,
			var(--trans1) 0.02em 0.025em,
			var(--trans2) 0.075em 0.09em,
			var(--trans) 0.095em 2em),
		repeating-radial-gradient(
			circle at 0.56em 0.48em,
			var(--walnut) 0 0.015em,
			var(--trans1) 0.02em 0.025em,
			var(--trans2) 0.075em 0.09em,
			var(--trans) 0.095em 2em),
		repeating-radial-gradient(
			circle at 0.75em 0.38em,
			var(--walnut) 0 0.015em,
			var(--trans1) 0.02em 0.025em,
			var(--trans2) 0.075em 0.09em,
			var(--trans) 0.095em 2em),
		repeating-radial-gradient(
			circle at 0.6em 0.3em,
			var(--walnut) 0 0.015em,
			var(--trans1) 0.02em 0.025em,
			var(--trans2) 0.075em 0.09em,
			var(--trans) 0.095em 2em);
	height: 1.2em; 
	left: 0.4em;
	transform: 
		skew(-5deg)
		translateZ(1em);
	top: 0.4em;
	width: 1.2em;
}
.frogspawn div::before {
  background-image:
		repeating-radial-gradient(
			circle at 0.45em 0.9em,
			var(--trans2) 0 0.02em,
			var(--trans) 0.025em 2em),
		repeating-radial-gradient(
			circle at 0.7em 0.77em,
			var(--trans2) 0 0.02em,
			var(--trans) 0.025em 2em),
		repeating-radial-gradient(
			circle at 0.93em 0.5em,
			var(--trans2) 0 0.02em,
			var(--trans) 0.025em 2em),
		repeating-radial-gradient(
			circle at 0.54em 0.68em,
			var(--trans2) 0 0.02em,
			var(--trans) 0.025em 2em),
		repeating-radial-gradient(
			circle at 0.74em 0.61em,
			var(--trans2) 0 0.02em,
			var(--trans) 0.025em 2em),
		repeating-radial-gradient(
			circle at 0.4em 0.54em,
			var(--trans2) 0 0.02em,
			var(--trans) 0.025em 2em),
		repeating-radial-gradient(
			circle at 0.56em 0.48em,
			var(--trans2) 0 0.02em,
			var(--trans) 0.025em 2em),
		repeating-radial-gradient(
			circle at 0.75em 0.38em,
			var(--trans2) 0 0.02em,
			var(--trans) 0.025em 2em),
		repeating-radial-gradient(
			circle at 0.6em 0.3em,
			var(--trans2) 0 0.02em,
			var(--trans) 0.025em 2em);
	height: 1.2em; 
	left: 0.045em;
	top: -0.03em;
	width: 1.2em;
}

.slow-worm { background-color: var(--aubergine); }
.slow-worm div {
  background-image:
		repeating-radial-gradient(
			circle at 0.675em 0.09em,
			var(--trans) 0 0.03em,
			var(--terracotta) 0.035em 0.05em,
			var(--trans) 0.055em 2em),
		repeating-radial-gradient(
			circle at 0.67em 0.07em,
			var(--walnut) 0 0.015em,
			var(--trans) 0.02em 2em),
		repeating-radial-gradient(
			circle at 0.69em 0.071em,
			var(--clay) 0 0.015em,
			var(--trans) 0.02em 2em),
		repeating-radial-gradient(
			circle at 0.68em 0.082em,
			var(--terracotta) 0 0.067em,
			var(--trans) 0.07em 2em);
	height: 1.2em; 
	left: 0.3em;
	transform: 
		translateZ(1em);
	top: 0.5em;
	width: 1.4em;
}
.slow-worm div::before {
	border: 0.14em solid var(--terracotta);
	border-left: 0.15em solid var(--terracotta);
	border-right: 0.12em solid var(--trans);
	border-radius: 0.4em 0.2em 0.2em 0.4em;
	height: 0.14em; 
	left: 0.32em;
	top: 0;
	transform:
		translateZ(-1em);
	width: 0.17em;
}
.slow-worm div::after {
	border: 0.14em solid var(--terracotta);
	border-left: 0.4em solid var(--trans);
	border-right: 0.17em solid var(--terracotta);
	border-radius: 0.4em 0.4em 0.4em 0.2em;
	height: 0.26em;
	left: 0.26em;
	top: -0.14em;
	width: 0.32em;
}

.wood-mouse { background-color: var(--eucalyptus); }
.wood-mouse div {
	background:
		radial-gradient(
			circle at 0.71em -0.01em,
			var(--terracotta) 0 0.027em,
			var(--trans) 0.0275em 2em),
		radial-gradient(
			circle at 0.7em 0.86em,
			var(--coffee) 0 0.037em,
			var(--trans) 0.038em 2em),
		radial-gradient(
			circle at 0.58em 1.1em,
			var(--mink) 0 0.12em,
			var(--trans) 0.125em 2em),
		radial-gradient(
			circle at 0.58em -0.1em,
			var(--mink) 0 0.12em,
			var(--trans) 0.125em 2em),
		radial-gradient(
			circle at 0.34em 0.96em,
			var(--hazelnut) 0 0.36em,
			var(--trans) 0.365em 2em),
		radial-gradient(
			circle at 0.62em 0.68em,
			var(--mink) 0 0.10em,
			var(--hazelnut) 0.105em 0.12em,
			var(--trans) 0.125em 2em),
		radial-gradient(
			circle at 0.62em 0.86em,
			var(--hazelnut) 0 0.18em,
			var(--trans) 0.185em 2em),
		radial-gradient(
			circle at 0.28em 0.05em,
			var(--hazelnut) 0 0.28em,
			var(--trans) 0.285em 2em);
	background-position: 0em 0.6em;
	border-radius: 100%;
	height: 1em; 
	left: 0.5em;
	top: 0.5em;
	transform:
		rotate(-10deg)
		translateZ(1em);
	width: 1em;
}
.wood-mouse div::before {
	background:
		radial-gradient(
			circle at 0.44em 2.22em,
			var(--mink) 0 0.24em,
			var(--trans) 0.245em 2em),
		radial-gradient(
			circle at 0.44em -0.22em,
			var(--mink) 0 0.24em,
			var(--trans) 0.245em 2em);
	background-position: 0em 0.86em;
	background-size: 2em 2em;
	border: 0.005em solid var(--trans);
	border-bottom: 0.04em solid var(--mink);
	border-radius: 100%;
	height: 1em; 
	left: 0;
	top: -0.01em;
	transform:
		rotate(-5deg)
		translateZ(-1em);
	width: 1em;
}

.easter-eggs { background-color: var(--powder-blue); }
.easter-eggs div,
.easter-eggs div::before,
.easter-eggs div::after {
  background-image:
		radial-gradient(
			circle at 0.55em 0.2em,
			var(--trans2) 0 0.1em,
			var(--trans) 0.105em 2em),
    repeating-radial-gradient(
			circle at -0.2em 0.3em,
      var(--sea-glass) 0 0.005em,
      var(--sea-foam) 0.01em 0.04em,
			var(--sea-glass) 0.045em 0.055em); 
	border-radius: 1em/0.76em; 
	height: 0.6em; 
	left: 0.7em;
	top: 0.95em;
	transform: rotate(-10deg);
	width: 0.76em;
}
.easter-eggs div::before {
	background-color: var(--hazelnut);
  background-image:
		repeating-radial-gradient(
			circle at 0.08em 0.08em,
			var(--trans) 0 0.006em,
			var(--butter) 0.006em 0.016em, 
			var(--trans) 0.018em 0.09em, 
			var(--butter) 0.092em 0.12em);
	background-size: 0.16em 0.16em;
	background-position: 0.12em 0.12em;
	left: 0.24em;
	top: -0.35em;
	transform:
		rotate(50deg)
		translateZ(-1em);
}
.easter-eggs div::after {
	background-color: var(--carmine);
	background-image:
		repeating-radial-gradient(
			circle at 0 0,
			var(--trans) 0 0.032em,
			var(--ruby) 0.033em  0.06em,
			var(--trans) 0.061em  0.2em),
		repeating-radial-gradient(
			circle at 0.093em 0.093em,
			var(--trans) 0 0.032em,
			var(--ruby) 0.033em  0.06em,
			var(--trans) 0.061em  0.2em);
	background-size: 0.1em 0.1em;
	left: -0.35em;
	top: -0.85em;
	transform:
		rotate(130deg)
		translateZ(-1em);
}

.damselfly { background-color: var(--clay); }
.damselfly div {
	background:
		radial-gradient(
			circle at 0.24em 1.07em,
			var(--teal) 0 0.02em,
			var(--midnight) 0.16em 0.16em,
			var(--trans) 0.165em 2em),
		radial-gradient(
			circle at 0.24em -0.07em,
			var(--teal) 0 0.02em,
			var(--midnight) 0.16em 0.16em,
			var(--trans) 0.165em 2em),
		radial-gradient(
			circle at 0.08em 1.02em,
			var(--midnight) 0 0.05em,
			var(--trans) 0.055em 2em),
		radial-gradient(
			circle at 0.08em -0.01em,
			var(--midnight) 0 0.05em,
			var(--trans) 0.055em 2em),
		radial-gradient(
			circle at 0.07em 0.2em,
			var(--trans) 0 0.24em,
			var(--midnight) 0.245em 0.26em,
			var(--trans) 0.265em 2em),
		radial-gradient(
			circle at 0.04em 0.14em,
			var(--trans) 0 0.2em,
			var(--midnight) 0.205em 0.22em,
			var(--trans) 0.225em 2em),
		radial-gradient(
			circle at 0.06em 0.28em,
			var(--trans) 0 0.33em,
			var(--midnight) 0.335em 0.35em,
			var(--trans) 0.355em 2em);
	background-position: 0.04em 0.25em;
	background-size: 0.55em 1em;
	border-radius: 100%;
	height: 0.6em; 
	left: 0.34em;
	top: 0.9em;
	transform:
		rotate(-10deg)
		translateZ(1em);
	width: 0.6em;
}
.damselfly div::before {
	background:
		radial-gradient(
			circle at 0.64em 0.04em,
			var(--ocean) 0,
			var(--trans) 0.265em 2em),
		radial-gradient(
			circle at 0.64em -0.81em,
			var(--trans2) 1.1em 1.1em,
			var(--trans) 1.105em 2em);
	border-radius: 60% 30% 60% 10%;
	height: 0.3em; 
	left: 0.24em;
	top: -0.19em;
	transform:
		rotate(-28deg)
		translateZ(1em);
	width: 1.1em;
}
.damselfly div::after {
	background:
		linear-gradient(
			var(--midnight) 0,
			var(--ocean) 50%,
			var(--midnight) 100%);
	border-radius: 0.2em;
	height: 0.05em; 
	left: 0.28em;
	top: -0.09em;
	transform:
		rotate(-2deg)
		translateZ(-1em);
	width: 1.2em;
}

.ant { background-color: var(--bronze); }
.ant div {
	background:
		linear-gradient(
			-18deg,
			var(--trans) 0 0.34em,
			var(--coffee) 0.35em 0.36em,
			var(--trans) 0.37em 1em),
		linear-gradient(
			-5deg,
			var(--trans) 0 0.3em,
			var(--coffee) 0.31em 0.32em,
			var(--trans) 0.33em 1em),
		linear-gradient(
			14deg,
			var(--trans) 0 0.33em,
			var(--coffee) 0.34em 0.35em,
			var(--trans) 0.36em 1em);
	border-radius: 100%;
	height: 0.55em; 
	left: 0.725em;
	top: 0.725em;
	transform:
		rotate(0deg)
		translateZ(1em);
	width: 0.55em;
}
.ant div::before {
	background:
		radial-gradient(
			circle at 0.01em 0.28em,
			var(--coffee) 0 0.09em,
			var(--trans) 0.095em 1em),
		radial-gradient(
			circle at 0.89em 0.28em,
			var(--coffee) 0 0.09em,
			var(--trans) 0.095em 1em),
		radial-gradient(
			circle at 0.01em 0.4em,
			var(--coffee) 0 0.05em,
			var(--trans) 0.055em 1em),
		radial-gradient(
			circle at 0.89em 0.4em,
			var(--coffee) 0 0.05em,
			var(--trans) 0.055em 1em),
		radial-gradient(
			circle at 0.01em 0.48em,
			var(--coffee) 0 0.04em,
			var(--trans) 0.045em 1em),
		radial-gradient(
			circle at 0.89em 0.48em,
			var(--coffee) 0 0.04em,
			var(--trans) 0.045em 1em),
		radial-gradient(
			circle at -0.07em 0.68em,
			var(--coffee) 0 0.18em,
			var(--trans) 0.185em 1em),
		radial-gradient(
			circle at 0.96em 0.676em,
			var(--coffee) 0 0.18em,
			var(--trans) 0.185em 1em);
	background-position: 0.45em 0;
	border-radius: 100%;
	height: 0.9em;
	left: -0.17em;
	top: -0.14em;
	transform:
		translateZ(1em);
	width: 0.9em;
}
.ant div::after {
	background-position: 0.45em 0;
	border-radius: 100%;
	border: 0.01em solid var(--trans);
	border-bottom: 0.04em solid var(--coffee);
	height: 0.2em;
	left: 0.17em;
	top: -1.07em;
	transform:
		translateZ(1em);
	width: 0.2em;
}

.grasshopper { background-color: var(--forest); }
.grasshopper div {
	background:
		radial-gradient(
			circle at 0.06em 0.05em,
			var(--sage) 0 0.12em,
			var(--trans) 0.125em 1em),
		radial-gradient(
			circle at 0.44em -0.3em,
			var(--eucalyptus) 0 0.1em,
			var(--sage) 0.5em 0.52em,
			var(--trans) 0.525em 1em),
		linear-gradient(
			-65deg,
			var(--trans) 0 0.9em,
			var(--eucalyptus) 0.91em 0.92em,
			var(--trans) 0.93em 1em),
		linear-gradient(
			-95deg,
			var(--trans) 0 0.9em,
			var(--eucalyptus) 0.91em 0.92em,
			var(--trans) 0.93em 1em);
	border-radius: 20%/100%;
	height: 0.32em; 
	left: 0.5em;
	top: 0.95em;
	transform:
		rotate(20deg)
		translateZ(1em);
	width: 1.2em;
}
.grasshopper div::before {
	background:
		radial-gradient(
			circle at 0.14em -0.48em,
			var(--eucalyptus) 0 0.51em,
			var(--trans) 0.515em 1em),
		radial-gradient(
			circle at -0.28em 0.18em,
			var(--eucalyptus) 0 0.34em,
			var(--trans) 0.345em 1em),
		radial-gradient(
			circle at 0.72em 0.18em,
			var(--eucalyptus) 0 0.34em,
			var(--trans) 0.345em 1em)
		;
	background-position: 0.08em 0;
	background-size: 0.44em 0.4em;
	border-radius: 0.02em;
	height: 0.4em;
	left: 0.33em;
	top: -0.02em;
	transform:
		rotate(60deg)
		skew(30deg)
		translateZ(1em);
	width: 0.4em;
}

.dragonfly { background-color: var(--slate); }
.dragonfly div {
	background:
		
		/* abdomen */
		radial-gradient(
			circle at -0.015em 0.7em,
			var(--forest) 0 0.085em,
			var(--trans) 0.09em 1em),
		radial-gradient(
			circle at 1.015em 0.7em,
			var(--forest) 0 0.085em,
			var(--trans) 0.09em 1em),
		radial-gradient(
			circle at -0.015em 0.8em,
			var(--forest) 0 0.085em,
			var(--trans) 0.09em 1em),
		radial-gradient(
			circle at 1.015em 0.8em,
			var(--forest) 0 0.085em,
			var(--trans) 0.09em 1em),
		radial-gradient(
			circle at -0.015em 0.9em,
			var(--forest) 0 0.085em,
			var(--trans) 0.09em 1em),
		radial-gradient(
			circle at 1.015em 0.9em,
			var(--forest) 0 0.085em,
			var(--trans) 0.09em 1em),
		radial-gradient(
			circle at -0.015em 1.0em,
			var(--forest) 0 0.085em,
			var(--trans) 0.09em 1em),
		radial-gradient(
			circle at 1.015em 1.0em,
			var(--forest) 0 0.085em,
			var(--trans) 0.09em 1em),
		radial-gradient(
			circle at -0.015em 1.1em,
			var(--forest) 0 0.085em,
			var(--trans) 0.09em 1em),
		radial-gradient(
			circle at 1.015em 1.1em,
			var(--forest) 0 0.085em,
			var(--trans) 0.09em 1em),
		radial-gradient(
			circle at -0.015em 1.2em,
			var(--forest) 0 0.085em,
			var(--trans) 0.09em 1em),
		radial-gradient(
			circle at 1.015em 1.2em,
			var(--forest) 0 0.085em,
			var(--trans) 0.09em 1em),
		
		
		radial-gradient(
			circle at 0.01em 1.3em,
			var(--forest) 0 0.06em,
			var(--trans) 0.065em 1em),
		radial-gradient(
			circle at 0.99em 1.3em,
			var(--forest) 0 0.06em,
			var(--trans) 0.065em 1em),
		
		radial-gradient(
			circle at -0.015em 0.75em,
			var(--pond-bottom) 0 0.085em,
			var(--trans) 0.09em 1em),
		radial-gradient(
			circle at 1.015em 0.75em,
			var(--pond-bottom) 0 0.085em,
			var(--trans) 0.09em 1em),
		radial-gradient(
			circle at -0.015em 0.85em,
			var(--pond-bottom) 0 0.085em,
			var(--trans) 0.09em 1em),
		radial-gradient(
			circle at 1.015em 0.85em,
			var(--pond-bottom) 0 0.085em,
			var(--trans) 0.09em 1em),
		radial-gradient(
			circle at -0.015em 0.95em,
			var(--pond-bottom) 0 0.085em,
			var(--trans) 0.09em 1em),
		radial-gradient(
			circle at 1.015em 0.95em,
			var(--pond-bottom) 0 0.085em,
			var(--trans) 0.09em 1em),
		radial-gradient(
			circle at -0.015em 1.05em,
			var(--pond-bottom) 0 0.085em,
			var(--trans) 0.09em 1em),
		radial-gradient(
			circle at 1.015em 1.05em,
			var(--pond-bottom) 0 0.085em,
			var(--trans) 0.09em 1em),
		radial-gradient(
			circle at -0.015em 1.15em,
			var(--pond-bottom) 0 0.085em,
			var(--trans) 0.09em 1em),
		radial-gradient(
			circle at 1.015em 1.15em,
			var(--pond-bottom) 0 0.085em,
			var(--trans) 0.09em 1em),
		radial-gradient(
			circle at -0.015em 1.25em,
			var(--pond-bottom) 0 0.085em,
			var(--trans) 0.09em 1em),
		radial-gradient(
			circle at 1.015em 1.25em,
			var(--pond-bottom) 0 0.085em,
			var(--trans) 0.09em 1em),
		
		radial-gradient(
			circle at -0.015em 1.34em,
			var(--pond-bottom) 0 0.075em,
			var(--trans) 0.08em 1em),
		radial-gradient(
			circle at 1.015em 1.34em,
			var(--pond-bottom) 0 0.075em,
			var(--trans) 0.08em 1em),
		
		/* eyes */
		radial-gradient(
			circle at 0.04em 0.34em,
			var(--forest) 0 0.065em,
			var(--trans) 0.07em 1em),
		radial-gradient(
			circle at 0.96em 0.34em,
			var(--forest) 0 0.065em,
			var(--trans) 0.07em 1em),
		
		/* thorax */
		radial-gradient(
			circle at -0.1em 0.55em,
			var(--pond-bottom) 0 0.225em,
			var(--trans) 0.23em 1em),
		radial-gradient(
			circle at 1.1em 0.55em,
			var(--pond-bottom) 0 0.225em,
			var(--trans) 0.23em 1em),
		radial-gradient(
			circle at -0.05em 0.39em,
			var(--pond-bottom) 0 0.135em,
			var(--trans) 0.14em 1em),
		radial-gradient(
			circle at 1.05em 0.39em,
			var(--pond-bottom) 0 0.135em,
			var(--trans) 0.14em 1em)
		;
	background-position: 0.5em;
	border-radius: 100%;
	height: 1.5em; 
	left: 0.5em;
	top: 0.3em;
	transform:
		translateZ(1em);
	width: 1em;
}
.dragonfly div::before,
.dragonfly div::after {
	background-color: var(--pebble);
	background-image:
		repeating-radial-gradient(
			circle at -0.083em 0.05em,
			var(--trans) 0 0.03em,
			var(--dove) 0.03em 0.035em,
			var(--trans) 0.035em),
		repeating-radial-gradient(
			circle at 0.05em 0.183em,
			var(--trans) 0 0.03em,
			var(--dove) 0.03em 0.035em,
			var(--trans) 0.035em);
	background-size: 0.1em 0.1em;
	border-radius: 70% 70% 100% 100%;
	border-top: 0.01em solid var(--gray);
	height: 0.28em;
	left: -0.23em;
	opacity: 0.5;
	top: 0.5em;
	transform:
		rotate(24deg)
		translateZ(1em);
	width: 1.5em;
}
.dragonfly div::after {
	transform:
		rotate(-24deg)
		translateZ(1em);
	top: 0.18em;
}

.ray { background-color: var(--purple-slate); }
.ray div {
	background:
		radial-gradient(
			circle at 1em 0.5em,
			var(--clay) 0 0.15em,
			var(--trans) 0.455em 1em),
		radial-gradient(
			circle at 0.5em 0em,
			var(--clay) 0 0.15em,
			var(--dusty-purple) 0.45em 0.51em,
			var(--trans) 0.515em 1em),
		radial-gradient(
			circle at 1em 0.5em,
			var(--clay) 0 0.15em,
			var(--dusty-purple) 0.515em 0.51em,
			var(--trans) 0.38em 1em),
		radial-gradient(
			circle at 0.5em 0.5em,
			var(--clay) 0 0.05em,
			var(--dusty-purple) 0.25em 0.32em,
			var(--trans) 0.325em 1em);
	border-radius: 0.08em 0.12em;
	height: 1em; 
	left: 0.5em;
	top: 0.5em;
	transform:
		rotate(45deg)
		skew(4deg)
		translateZ(1em);
	width: 1em;
}
.ray div::before {
	background:
		radial-gradient(
			circle at 2.24em 0.88em,
			var(--clay) 0 0.8em,
			var(--dusty-purple) 0.91em 0.92em,
			var(--trans) 0.925em 1em),
		radial-gradient(
			circle at -0.84em 0.88em,
			var(--clay) 0 0.8em,
			var(--dusty-purple) 0.91em 0.92em,
			var(--trans) 0.925em 1em);
	border-radius: 2em;
	background-position: 0.7em;
	height: 1.4em;
	left: -0.3em;
	top: -0.1em;
	transform:
		rotate(45deg)
		translateZ(-1em);
	width: 1.4em;
}
.ray div::after {
	border: 0em solid var(--bud);
	border-left: 0.03em solid var(--navy);
	border-right: 0.03em solid var(--navy);
	border-radius: 2em;
	background-position: 0.7em;
	height: 0.1em;
	left: 0.65em;
	top: -1.25em;
	transform:
		rotate(45deg)
		translateZ(1em);
	width: 0.22em;
}

.peacock-feather { background-color: var(--dusty-pink); }
.peacock-feather div {
	background:
		
		/* core */
		radial-gradient(
			circle at 0.02em 0.4em,
			var(--navy) 0 0.06em,
			var(--royal) 0.08em 0.09em,
			var(--trans) 0.095em 1em),
		radial-gradient(
			circle at 0.98em 0.4em,
			var(--navy) 0 0.06em,
			var(--royal) 0.08em 0.09em,
			var(--trans) 0.095em 1em),
		
		/* greens*/
		radial-gradient(
			circle at 0.02em 0.42em,
			var(--sea-glass) 0 0.01em,
			var(--teal) 0.11em 0.13em,
			var(--trans) 0.135em 1em),
		radial-gradient(
			circle at 0.98em 0.42em,
			var(--sea-glass) 0 0.01em,
			var(--teal) 0.11em 0.13em,
			var(--trans) 0.135em 1em),
		radial-gradient(
			circle at 0.02em 0.43em,
			var(--sea-glass) 0 0.01em,
			var(--ocean) 0.11em 0.13em,
			var(--trans) 0.14em 1em),
		radial-gradient(
			circle at 0.98em 0.43em,
			var(--sea-glass) 0 0.01em,
			var(--ocean) 0.11em 0.13em,
			var(--trans) 0.14em 1em),
		
		/* gold */
		radial-gradient(
			circle at -0.05em 0.38em,
			var(--sand) 0 0.15em,
			var(--hazelnut) 0.245em 0.25em,
			var(--chocolate) 0.255em 0.26em,
			var(--bud) 0.265em 0.265em,
			var(--leafy) 0.3em 0.31em,
			var(--trans) 0.38em 1em),
		radial-gradient(
			circle at 1.05em 0.38em,
			var(--sand) 0 0.15em,
			var(--hazelnut) 0.245em 0.25em,
			var(--chocolate) 0.255em 0.26em,
			var(--bud) 0.265em 0.265em,
			var(--leafy) 0.3em 0.31em,
			var(--trans) 0.38em 1em)
		;
	background-position: 0.5em;
	border-radius: 100%;
	height: 1.4em; 
	left: 0.5em;
	top: 0.3em;
	transform:
		rotate(2deg)
		skew(4deg)
		translateZ(1em);
	width: 1em;
}
.peacock-feather div::before {
	background:
		/* edges */
		repeating-radial-gradient(
			circle at -0.05em 0.32em,
			var(--trans) 0 0.01em,
			var(--forest) 0.014em 0.016em,
			var(--pond-bottom) 0.018em 0.02em,
			var(--forest) 0.022em 0.024em,
			var(--trans) 0.03em 0.036em);
	border-left: 0.011em solid var(--walnut);
	border-radius: 0 2em 2em 0;
	height: 1.4em;
	left: 0.5em;
	top: 0;
	transform:
		translateZ(-1em);
	width: 0.48em;
}
.peacock-feather div::after {
	background:
		/* edges */
		repeating-radial-gradient(
			circle at 0.55em 0.32em,
			var(--trans) 0 0.01em,
			var(--forest) 0.014em 0.016em,
			var(--pond-bottom) 0.018em 0.02em,
			var(--forest) 0.022em 0.024em,
			var(--trans) 0.03em 0.036em);
	border-radius: 2em 0 0 2em;
	left: 0.05em;
	height: 1.4em;
	top: -1.4em;
	transform:
		translateZ(-1em);
	width: 0.48em;
}

.centipede { background-color: var(--terracotta); }
.centipede div {
	background:
		radial-gradient(
			circle at 0.11em 0.125em,
			var(--trans) 0 0.1em,
			var(--conker) 0.105em 0.12em,
			var(--trans) 0.125em 3em);
	background-size: 0.22em 0.12em;
	background-position: -0.02em 0;
	border-radius: 0.06em;
	height: 1.05em; 
	left: 0.65em;
	top: 0.5em;
	transform:
		rotate(12deg)
		skew(2deg)
		translateZ(1em);
	width: 0.62em;
}
.centipede div::before {
	background:
		radial-gradient(
			circle at 0.32em 0.12em,
			var(--auburn) 0 0.12em,
			var(--trans) 0.125em 3em),
		radial-gradient(
			circle at 0.32em 0.24em,
			var(--auburn) 0 0.12em,
			var(--trans) 0.125em 3em),
		radial-gradient(
			circle at 0.32em 0.36em,
			var(--auburn) 0 0.12em,
			var(--trans) 0.125em 3em),
		radial-gradient(
			circle at 0.32em 0.48em,
			var(--auburn) 0 0.12em,
			var(--trans) 0.125em 3em),
		radial-gradient(
			circle at 0.32em 0.56em,
			var(--auburn) 0 0.12em,
			var(--trans) 0.125em 3em),
		radial-gradient(
			circle at 0.32em 0.64em,
			var(--auburn) 0 0.12em,
			var(--trans) 0.125em 3em),
		radial-gradient(
			circle at 0.32em 0.72em,
			var(--auburn) 0 0.12em,
			var(--trans) 0.125em 3em),
		radial-gradient(
			circle at 0.32em 0.8em,
			var(--auburn) 0 0.12em,
			var(--trans) 0.125em 3em),
		radial-gradient(
			circle at 0.32em 0.88em,
			var(--auburn) 0 0.12em,
			var(--trans) 0.125em 3em),
		radial-gradient(
			circle at 0.32em 0.96em,
			var(--auburn) 0 0.12em,
			var(--trans) 0.125em 3em),
		radial-gradient(
			circle at 0.32em 1.04em,
			var(--auburn) 0 0.12em,
			var(--trans) 0.125em 3em),
		radial-gradient(
			circle at 0.32em 1.12em,
			var(--auburn) 0 0.12em,
			var(--trans) 0.125em 3em),
		radial-gradient(
			circle at 0.32em 1.18em,
			var(--auburn) 0 0.12em,
			var(--trans) 0.125em 3em),
		
		radial-gradient(
			circle at 0.36em 1.85em,
			var(--trans) 0 0.165em,
			var(--conker) 0.17em 0.19em,
			var(--trans) 0.195em 3em),
		radial-gradient(
			circle at 0.36em -0.15em,
			var(--trans) 0 0.165em,
			var(--conker) 0.17em 0.19em,
			var(--trans) 0.195em 3em);
	background-position: 0 0.16em;
	background-size: 0.62em 2em;
	height: 1.5em; 
	left: -0.012em;
	opacity: 0.9;
	top: -0.28em;
	transform:
		translateZ(-1em);
	width: 0.62em;
}
.centipede div::after {
	border: 0.02em solid var(--conker);
	border-bottom: 0 solid var(--trans);
	border-radius: 0.5em 0.5em 0 0;
	height: 0.24em;
	left: 0.24em;
	top: -0.4em;
	transform:
		rotate(-15deg);
	width: 0.14em;
}

.duckling { background-color: var(--blue-gray); }
.duckling div {
	background:
		radial-gradient(
			circle at 0.9em 0.6em,
			var(--yellow) 0 0.2em,
			var(--trans) 0.3em 3em),
		radial-gradient(
			circle at 0.85em 0.6em,
			var(--mustard) 0 0.2em,
			var(--trans) 0.3em 3em),
		radial-gradient(
			circle at 0.8em 0.6em,
			var(--butter) 0 0.4em,
			var(--trans) 0.55em 3em),
		radial-gradient(
			circle at 0.9em 0.6em,
			var(--yellow) 0 0.4em,
			var(--trans) 0.55em 3em);
	border-radius: 100%;
	height: 0.6em; 
	left: 0.22em;
	top: 0.75em;
	transform:
		rotate(-5deg)
		translateZ(1em);
	width: 1.6em;
}
.duckling div::before {
	background-image:
		/* head */
		radial-gradient(
			circle at 0.29em 0.3em,
			var(--coffee) 0 0.03em,
			var(--trans) 0.038em 3em),
		radial-gradient(
			circle at 0.32em 0.3em,
			var(--yellow) 0 0.05em,
			var(--trans) 0.16em 3em),
		radial-gradient(
			circle at 0.28em 0.32em,
			var(--mustard) 0 0.02em,
			var(--trans) 0.1em 3em),
		radial-gradient(
			circle at 0.35em 0.3em,
			var(--yellow) 0 0.18em,
			var(--trans) 0.28em 3em),
		radial-gradient(
			circle at 0.39em 0.3em,
			var(--banana) 0 0.18em,
			var(--trans) 0.28em 3em),
		radial-gradient(
			circle at 0.35em 0.32em,
			var(--mustard) 0 0.18em,
			var(--trans) 0.28em 3em);
	border-radius: 100%;
	height: 0.7em;
	left: 0.24em;
	top: -0.14em;
	transform:
		translateZ(1em);
	width: 0.78em;
}
.duckling div::after {
	background-color: var(--hazelnut);
	border-radius: 100%;
	border-bottom: 0.02em solid var(--bronze);
	height: 0.09em;
	left: 0.26em;
	top: -0.53em;
	transform:
		rotate(-14deg)
		translateZ(-1em);
	width: 0.28em;
}

.shield-bug { background-color: var(--walnut); }
.shield-bug div {
	background:
		linear-gradient(
			var(--meadow) 0,
			var(--clay) 90% 100%);
	border-radius: 60%/100%;
  border-image-slice: 1;
	height: 0.22em; 
	left: 0.6em;
	top: 0.75em;
	transform:
		rotate(0deg)
		translateZ(1em);
	width: 0.8em;
}
.shield-bug div::before {
	background-image:
		/* head */
		radial-gradient(
			circle at 0.1em 1.7em,
			var(--trans) 0 0.145em,
			var(--meadow) 0.15em 0.31em,
			var(--trans) 0.315em 2em),
		radial-gradient(
			circle at 0.67em 1.71em,
			var(--trans) 0 0.145em,
			var(--meadow) 0.15em 0.31em,
			var(--trans) 0.315em 2em),
		/* body */
		radial-gradient(
			circle at 0.87em -0.04em,
			var(--trans) 0 0.625em,
			var(--clay) 0.63em,
			var(--trans) 0.905em 2em),
		radial-gradient(
			circle at -0.11em -0.04em,
			var(--trans) 0 0.625em,
			var(--clay) 0.63em,
			var(--trans) 0.905em 2em),
		radial-gradient(
			circle at 0.37em 0.32em,
			var(--meadow) 0 0.6em,
			var(--trans) 0.605em 2em);
	border-radius: 100%/140%;
	background-position: 0 0.36em;
	background-size: 0.78em 2em;
	height: 1.2em;
	left: 0.02em;
	top: -0.18em;
	transform:
		translateZ(-1em);
	width: 0.78em;
}
.shield-bug div::after {
	background-image:
		linear-gradient(
			13deg,
			var(--trans) 0 0.1em,
			var(--clay) 0.105em 0.13em,
			var(--trans) 0.135em 3em),
		linear-gradient(
			-13deg,
			var(--trans) 0 0.1em,
			var(--clay) 0.105em 0.13em,
			var(--trans) 0.135em 3em);
	background-position: 0 0.18em;
	border-radius: 1em;
	height: 0.32em;
	left: -0.2em;
	top: -1.56em;
	transform:
		rotate(0deg)
		translateZ(1em);
	width: 1.2em;
}

.bunny-face { background-color: var(--dusty-purple); }
.bunny-face div {
	background-color: var(--dusty-pink);
	background-image:
		/* eyes */
		radial-gradient(
			circle at -0.06em 0.39em,
			var(--trans) 0 0.195em,
			var(--dusty-pink) 0.2em 0.3em,
			var(--trans) 0.305em 2em),
		radial-gradient(
			circle at 0.76em 0.5em,
			var(--trans) 0 0.195em,
			var(--dusty-pink) 0.2em 0.3em,
			var(--trans) 0.305em 2em),
		
		radial-gradient(
			circle at 0.1em 0.38em,
			var(--trans5) 0 0.02em,
			var(--trans) 0.025em 2em),
		radial-gradient(
			circle at 0.615em 0.47em,
			var(--trans5) 0 0.02em,
			var(--trans) 0.025em 2em),
		
		radial-gradient(
			circle at 0.12em 0.42em,
			var(--walnut) 0 0.08em,
			var(--trans) 0.085em 2em),
		radial-gradient(
			circle at 0.58em 0.495em,
			var(--walnut) 0 0.08em,
			var(--trans) 0.085em 2em),
		
		/* nose */
		radial-gradient(
			circle at 0.23em 0.57em,
			var(--trans) 0 0.195em,
			var(--dusty-pink) 0.2em 0.3em,
			var(--trans) 0.305em 2em),
		radial-gradient(
			circle at 0.42em 0.6em,
			var(--trans) 0 0.195em,
			var(--dusty-pink) 0.2em 0.3em,
			var(--trans) 0.305em 2em),
		radial-gradient(
			circle at 0.34em 0.48em,
			var(--dusty-pink) 0 0.21em,
			var(--trans) 0.215em 2em),
		radial-gradient(
			circle at 0.305em 0.715em,
			var(--blush) 0 0.08em,
			var(--trans) 0.085em 2em);
	border-radius: 100% 80%;
	height: 0.88em; 
	left: 0.67em;
	top: 0.95em;
	transform:
		rotate(-10deg)
		translateZ(1em);
	width: 0.7em;
}
.bunny-face div::before {
	background: var(--pink);
	border-radius: 40% 100%;
	border: 0.05em solid var(--dusty-pink);
	border-right-width: 0.16em;
	border-left-width: 0.1em;
	height: 0.95em;
	left: 0.06em;
	top: -0.75em;
	transform:
		rotate(10deg)
		translateZ(1em);
	width: 0.12em;
}
.bunny-face div::after {
	background: var(--pink);
	border-radius: 100% 40%;
	border: 0.05em solid var(--dusty-pink);
	border-left-width: 0.16em;
	border-right-width: 0.1em;
	height: 0.95em;
	left: 0.55em;
	top: -1.66em;
	transform:
		rotate(22deg)
		translateZ(1em);
	width: 0.12em;
}

.pet-rock { background-color: var(--forest); }
.pet-rock div {
	background-color: var(--gray);
	background-image:
		radial-gradient(
			circle at 0.42em 0.4em,
			var(--charcoal) 0 0.03em,
			var(--trans) 0.035em 2em),
		radial-gradient(
			circle at 0.42em 0.42em,
			var(--cloud) 0 0.08em,
			var(--trans) 0.085em 2em),
		
		radial-gradient(
			circle at 0.78em 0.4em,
			var(--charcoal) 0 0.03em,
			var(--trans) 0.035em 2em),
		radial-gradient(
			circle at 0.78em 0.4em,
			var(--cloud) 0 0.08em,
			var(--trans) 0.085em 2em),
		radial-gradient(
			circle at 0.5em -0.25em,
			var(--pebble) 0 1em,
			var(--trans) 1.005em 2em);
	border-radius: 100% 80% 70%;
	border-top: 0.04em solid var(--dove);
	height: 0.8em; 
	left: 0.4em;
	top: 0.6em;
	transform:
		rotate(1deg)
		translateZ(1em);
	width: 1.2em;
}

.wasp { background-color: var(--sea-fog); }
.wasp div {
	background:
		/* head */
		radial-gradient(
			circle at 0.38em 0.5em,
			var(--charcoal) 0 0.13em,
			var(--trans) 0.135em 2em),
		radial-gradient(
			circle at 0.38em 0.34em,
			var(--yellow) 0 0.08em,
			var(--trans) 0.085em 2em),
		radial-gradient(
			circle at 0.32em 0.32em,
			var(--charcoal) 0 0.04em,
			var(--trans) 0.045em 2em),
		radial-gradient(
			circle at 0.44em 0.32em,
			var(--charcoal) 0 0.04em,
			var(--trans) 0.045em 2em),
		
		/* legs */
		linear-gradient(
			var(--trans) 0 0.48em,
			var(--charcoal) 0.48em 0.5em,
			var(--trans) 0.5em 3em),
		linear-gradient(
			20deg,
			var(--trans) 0 0.77em,
			var(--charcoal) 0.775em 0.79em,
			var(--trans) 0.795em 3em),
		linear-gradient(
			-20deg,
			var(--trans) 0 0.77em,
			var(--charcoal) 0.775em 0.79em,
			var(--trans) 0.795em 3em);
	background-position: -0.1em 0;
	background-size: 0.7em 1.2em;
	border: 0.2em solid var(--trans);
	border-top-width: 0;
	border-bottom-width: 0;
	border-background: 
		radial-gradient(
			circle at 0.5em 0.65em,
			var(--charcoal) 0 0.1em,
			var(--trans) 0.405em 0.9em);
	border-radius: 100%;
	height: 1.2em; 
	left: 0.5em;
	top: 0.3em;
	transform:
		rotate(10deg)
		translateZ(1em);
	width: 0.5em;
}
.wasp div::before {
	background: 
		repeating-radial-gradient(
			circle at 0.12em 0.4em,
			var(--trans) 0 0.2em,
			var(--yellow) 0.205em 0.28em,
			var(--trans) 0.285em 0.8em),
		repeating-radial-gradient(
			circle at 0.88em 0.4em,
			var(--trans) 0 0.2em,
			var(--yellow) 0.205em 0.28em,
			var(--trans) 0.285em 0.8em),
		repeating-radial-gradient(
			circle at 0.12em 0.36em,
			var(--trans) 0 0.2em,
			var(--charcoal) 0.205em 0.28em,
			var(--trans) 0.285em 0.8em),
		repeating-radial-gradient(
			circle at 0.88em 0.36em,
			var(--trans) 0 0.2em,
			var(--charcoal) 0.205em 0.28em,
			var(--trans) 0.285em 0.8em), 
		
		repeating-radial-gradient(
			circle at 0.12em 0.48em,
			var(--trans) 0 0.16em,
			var(--yellow) 0.165em 0.24em,
			var(--trans) 0.245em 0.5em),
		repeating-radial-gradient(
			circle at 0.88em 0.48em,
			var(--trans) 0 0.16em,
			var(--yellow) 0.165em 0.24em,
			var(--trans) 0.245em 0.5em),
		repeating-radial-gradient(
			circle at 0.12em 0.43em,
			var(--trans) 0 0.16em,
			var(--charcoal) 0.165em 0.24em,
			var(--trans) 0.245em 0.5em),
		repeating-radial-gradient(
			circle at 0.88em 0.43em,
			var(--trans) 0 0.16em,
			var(--charcoal) 0.165em 0.24em,
			var(--trans) 0.245em 0.5em), 
		
		repeating-radial-gradient(
			circle at 0.12em 0.48em,
			var(--trans) 0 0.12em,
			var(--charcoal) 0.125em 0.24em,
			var(--trans) 0.245em 0.5em),
		repeating-radial-gradient(
			circle at 0.88em 0.48em,
			var(--trans) 0 0.12em,
			var(--charcoal) 0.125em 0.24em,
			var(--trans) 0.245em 0.5em),
		repeating-radial-gradient(
			circle at 0.12em 0.55em,
			var(--trans) 0 0.12em,
			var(--yellow) 0.125em 0.24em,
			var(--trans) 0.245em 0.5em),
		repeating-radial-gradient(
			circle at 0.88em 0.55em,
			var(--trans) 0 0.12em,
			var(--yellow) 0.125em 0.24em,
			var(--trans) 0.245em 0.5em),
		
		repeating-radial-gradient(
			circle at 0 0.1em,
			var(--yellow) 0 0.2em,
			var(--trans) 0.205em 2em),
		repeating-radial-gradient(
			circle at 1em 0.1em,
			var(--yellow) 0 0.2em,
			var(--trans) 0.205em 2em);
	background-position: 0.13em;
	background-size: 1em 0.52em;
	border-radius: 0.3em 0.3em 100% 100%; 
	height: 0.5em; 
	left: 0.15em;
	top: 0.62em;
	transform:
		rotate(-3deg)
		translateZ(-1em);
	width: 0.26em;
}
.wasp div::after {
	background:
		radial-gradient(
			circle at -2em 0.4em,
			var(--robins-egg) 0 2.12em,
			var(--trans) 2.125em 2em),
		radial-gradient(
			circle at 2.34em 0.4em,
			var(--robins-egg) 0 2.12em,
			var(--trans) 2.125em 2em);
	border-radius: 100% 100% 60% 60%;
	height: 1.1em;
	left: 0.09em;
	opacity: 0.6;
	top: -0.14em;
	transform:
		rotate(2deg)
		translateZ(1em);
	width: 0.34em;
}

.robin { background-color: var(--powder-pink); }
.robin div {
  background-image:
		
		/* eye */ 
		repeating-radial-gradient(
			circle at 0.3em 1.13em,
			var(--walnut) 0 0.02em,
			var(--trans) 0.025em 3em),
		
		/* head and body */
		repeating-radial-gradient(
			circle at 0.3em 1.24em,
			var(--spice) 0 0.11em,
			var(--trans) 0.15em 3em),
		repeating-radial-gradient(
			circle at 0.4em 1.32em,
			var(--spice) 0 0.16em,
			var(--gray) 0.22em 0.24em,
			var(--trans) 0.26em 3em),
		repeating-radial-gradient(
			circle at 0.5em 1.58em,
			var(--latte) 0 0.5em,
			var(--trans) 0.505em 3em),
		repeating-radial-gradient(
			circle at 0.38em 1.28em,
			var(--latte) 0 0.23em,
			var(--trans) 0.235em 3em),
		
		/* red breast */
		repeating-radial-gradient(
			circle at 0.42em 0.12em,
			var(--spice) 0 0.17em,
			var(--trans) 0.175em 3em), 
		repeating-radial-gradient(
			circle at 0.405em 0.1em,
			var(--spice) 0 0.17em,
			var(--trans) 0.175em 3em), 
		repeating-radial-gradient(
			circle at 0.48em 0.12em,
			var(--spice) 0 0.10em,
			var(--gray) 0.16em 0.16em,
			var(--trans) 0.22em 3em),
		repeating-radial-gradient(
			circle at 0.2em -0.01em,
			var(--spice) 0 0.04em,
			var(--trans) 0.045em 3em),
		repeating-radial-gradient(
			circle at 0.25em 0,
			var(--spice) 0 0.04em,
			var(--trans) 0.045em 3em),
		repeating-radial-gradient(
			circle at 0.52em 0.07em,
			var(--latte) 0 0.28em,
			var(--trans) 0.285em 3em),
		
		/* tail */
		repeating-radial-gradient(
			circle at 0.7em 2.55em,
			var(--latte) 0 1.4em,
			var(--trans) 1.405em 3em),
		repeating-radial-gradient(
			circle at 0.75em -1.35em,
			var(--latte) 0 1.4em,
			var(--trans) 1.405em 3em),
		
		/* beak */
		repeating-radial-gradient(
			circle at 0.17em 1.33em,
			var(--coffee) 0 0.15em,
			var(--trans) 0.155em 3em),
		repeating-radial-gradient(
			circle at 0.17em -0.14em,
			var(--walnut) 0 0.15em,
			var(--trans) 0.155em 3em);
	background-position: 0 0.5em;
	border-radius: 100%;
	height: 1.2em; 
	left: 0.45em;
	top: 0.4em;
	transform:
		rotate(20deg)
		translateZ(1em);
	width: 1.05em;
}
.robin div::before {
	border-radius: 1em;
	border: 0.05em solid var(--trans);
	border-right: 0.05em solid var(--spice);
	height: 0.15em;
	left: 0.033em;
	top: 0.47em;
	transform:
		rotate(-35deg)
		translateZ(-1em);
	width: 0.15em;
}
.robin div::after {
	border: 0.028em solid var(--clay);
	border-bottom: 0.0em solid var(--trans);
	border-radius: 0.12em 0.12em 0 0; 
	height: 0.22em; 
	left: 0.55em;
	top: 0.5em;
	transform:
		rotate(-10deg)
		skew(-25deg)
		translateZ(-1em);
	width: 0.06em;
}

.crow-flying { background-color: var(--peach); }
.crow-flying div {
	background: 
		radial-gradient(
			circle at 0.5em 0.65em,
			var(--charcoal) 0 0.4em,
			var(--trans) 0.405em 0.9em);
	background-position: 0 0.7em;
	border-radius: 100%;
	height: 0.42em; 
	left: 0.6em;
	top: 0.8em;
	transform:
		rotate(-10deg)
		skew(10deg)
		translateZ(-1em);
	width: 1.2em;
}
.crow-flying div::before {
	border: 0.4em solid var(--trans);
	border-right: 0.16em solid var(--charcoal);
	border-radius: 100%;
	height: 0.42em; 
	left: 0em;
	top: -0.4em;
	transform:
		rotate(0deg)
		skew(10deg)
		translateZ(-1em);
	width: 0.12em;
}
.crow-flying div::after {
	border: 0.14em solid var(--trans);
	border-right: 0.14em solid var(--charcoal);
	border-bottom: 0.14em solid var(--charcoal);
	border-radius: 0.2em;
	height: 0em; 
	left: -0.05em;
	top: -1.1em;
	transform:
		rotate(-45deg)
		skew(10deg)
		translateZ(-1em);
	width: 0em;
}

.seagull { background-color: var(--lapis); }
.seagull div {
	background: var(--slate);
	background-position: 0.2em;
	border-radius: 100%;
	height: 0.34em; 
	left: 0.8em;
	opacity: 0.8;
	top: 0.7em;
	transform:
		rotate(20deg)
		skew(10deg);
	width: 0.2em;
}
.seagull div::before {
	background: var(--slate);
	border-radius: 0.1em;
	box-shadow: 0.7em 0.3em 0 var(--slate);
	height: 0.2em; 
	left: -0.52em;
	top: 0em;
	transform:
		rotate(-30deg)
		skew(-30deg);
	width: 0.4em;
}
.seagull div::after {
	background: var(--slate);
	border-radius: 0.1em;
	box-shadow: 0.7em -0.305em 0 var(--slate);
	height: 0.2em; 
	left: -0.28em;
	top: -0.2em;
	transform:
		rotate(30deg)
		skew(30deg);
	width: 0.4em;
}

.swan { background-color: var(--ocean); }
.swan div {
	background: 
		radial-gradient(
			circle at 0.8em -0.2em,
			var(--white) 0 0.8em,
			var(--petal) 0.805em 0.9em);
	border-radius: 0.05em 1em 0.2em 1em;
	height: 0.62em; 
	left: 0.42em;
	top: 0.95em;
	transform:
		rotate(-1deg);
	width: 1em;
}
.swan div::before {
	border-radius: 1em 1em 0 0;
	border: 0.18em solid var(--trans);
	border-left-color: var(--petal);
	border-top-color: var(--white);
	height: 0.6em; 
	left: 0.66em;
	top: -0.48em;
	transform:
		rotate(-20deg)
		translateZ(-1em);
	width: 0.1em;
}
.swan div::after {
	background:
		radial-gradient(
		circle at 0.18em 0.54em,
		var(--ink) 0 0.02em,
		var(--trans) 0.025em 1em),
		radial-gradient(
		circle at 0.26em 0.6em,
		var(--spice) 0 0.04em,
		var(--trans) 0.045em 1em),
		radial-gradient(
		circle at 0.22em 0.57em,
		var(--charcoal) 0 0.04em,
		var(--trans) 0.045em 1em),
		radial-gradient(
		circle at 0.22em -0.02em,
		var(--charcoal) 0 0.04em,
		var(--trans) 0.045em 1em),
		radial-gradient(
		circle at 0.12em 0.58em,
		var(--white) 0 0.12em,
		var(--trans) 0.125em 1em),
		radial-gradient(
		circle at 0.12em -0.02em,
		var(--white) 0 0.12em,
		var(--trans) 0.125em 1em),
		radial-gradient(
		circle at 0.24em 0.8em,
		var(--spice) 0 0.24em,
		var(--trans) 0.245em 1em),
		radial-gradient(
		circle at 0.22em -0.53em,
		var(--charcoal) 0 0.54em,
		var(--trans) 0.545em 1em),
		radial-gradient(
		circle at 0.1em 1.18em,
		var(--charcoal) 0 0.64em,
		var(--trans) 0.645em 1em);
	background-position: 0em -0.3em;
	border-radius: 1em;
	height: 0.6em; 
	left: 0.7em;
	top: -1.43em;
	transform:
		rotate(54deg)
		translateZ(-1em);
	width: 0.6em;
}

.grove-snail { background-color: var(--purple-slate); }
.grove-snail div {
	background-image:
		radial-gradient(
			circle at 0.6em 0.75em,
			var(--banana) 0 0.09em,
			var(--trans) 0.095em 0.2em),
		repeating-radial-gradient(
			circle at 0.7em 0.75em,
			var(--coffee) 0 0.07em,
			var(--trans) 0.075em 0.2em,
			var(--coffee) 0.205em 0.2em), 
		radial-gradient(
			circle at 0.75em 0.75em,
			var(--butter) 0,
			var(--mushroom) 0.45em,
			var(--banana) 1em);
	background-size: 2em 2em;
	background-position: -0.15em -0.15em;
	border-radius: 1em 1em 0.1em 0 ;
	height: 0.6em; 
	left: 0.5em;
	top: 0.48em;
	transform:
		rotate(32deg);
	width: 1.22em;
}
.grove-snail div::before {
	background-image:
		radial-gradient(
			circle at 0.6em 0.75em,
			var(--banana) 0 0.09em,
			var(--trans) 0.095em 0.2em),
		repeating-radial-gradient(
			circle at 0.7em 0.75em,
			var(--coffee) 0 0.07em,
			var(--trans) 0.075em 0.2em,
			var(--coffee) 0.205em 0.2em), 
		radial-gradient(
			circle at 0.45em 0.75em,
			var(--butter) 0,
			var(--mushroom) 0.45em,
			var(--banana) 1em);
	background-size: 2em 2em;
	background-position: -0.015em -0.15em;
	border-radius: 1em 1.5em 0 0 ;
	height: 0.6em; 
	left: 0;
	top: 0.59em;
	transform:
		rotate(180deg);
	width: 1.03em;
}

.sheep { background-color: var(--meadow); }
.sheep div {
	background:
		radial-gradient(
			circle at 0.735em 0.53em,
			var(--iron) 0 0.18em,
			var(--trans) 0.185em 2em),
		radial-gradient(
			circle at 0.6em 0.6em,
			var(--mushroom) 0 0.52em,
			var(--trans) 0.525em 2em);
	background-size: 2em 2em;
	background-position: -0.15em -0.15em;
	border-radius: 1em;
	border: 0.12em dotted var(--mushroom);
	height: 0.9em; 
	left: 0.42em;
	top: 0.4em;
	transform:
		rotate(13deg)
		translateZ(1em);
	width: 0.9em;
}
.sheep div::before {
	background: var(--charcoal);
	border-radius: 0.1em;
	box-shadow: 0.26em 0 0 var(--charcoal);
	height: 0.6em; 
	left: 0.35em;
	top: 0.56em;
	transform:
		rotate(-13deg)
		translateZ(-1em);
	width: 0.12em;
}
.sheep div::after {
	background:
		/* eyes */
		radial-gradient(
			circle at 0.1em 0.03em,
			var(--mushroom) 0 0.02em,
			var(--trans) 0.025em 2em),
		radial-gradient(
			circle at 1.91em 0.025em,
			var(--mushroom) 0 0.02em,
			var(--trans) 0.025em 2em),
		
		/* ears */
		radial-gradient(
			circle at 0.19em 2.02em,
			var(--iron) 0 0.06em,
			var(--trans) 0.065em 2em),
		radial-gradient(
			circle at 1.81em 2.02em,
			var(--iron) 0 0.06em,
			var(--trans) 0.065em 2em),
		radial-gradient(
			circle at 0.16em -0.02em,
			var(--iron) 0 0.09em,
			var(--trans) 0.095em 2em),
		radial-gradient(
			circle at 1.84em -0.02em,
			var(--iron) 0 0.09em,
			var(--trans) 0.095em 2em);
	background-size: 2em 2em;
	background-position: 0.6em 0.35em;
	border-radius: 1em;
	border: 0.12em dotted var(--mushroom);
	height: 0.9em; 
	left: -0.12em;
	top: -0.72em;
	transform:
		rotate(-13deg)
		translateZ(1em);
	width: 0.9em;
}

.hedgehog { background-color: var(--pond-bottom); }
.hedgehog div {
	background: var(--latte);
  background-image:
		/* eyes */
		radial-gradient(
			circle at 0.55em 0.78em,
			var(--coffee) 0 0.04em,
			var(--champagne) 0.044em 0.045em,
			var(--trans) 0.1em 1em),
		radial-gradient(
			circle at 0.78em 0.55em,
			var(--coffee) 0 0.04em,
			var(--champagne) 0.044em 0.045em,
			var(--trans) 0.1em 1em),
		
		/* nose */
		radial-gradient(
			circle at 0.775em 0.755em,
			var(--terracotta) 0 0.034em,
			var(--trans) 0.036em 1em),
		radial-gradient(
			circle at 0.755em 0.775em,
			var(--terracotta) 0 0.034em,
			var(--trans) 0.036em 1em),
		radial-gradient(
			circle at 0.78em 0.765em,
			var(--clay) 0 0.034em,
			var(--trans) 0.036em 1em),
		radial-gradient(
			circle at 0.765em 0.78em,
			var(--clay) 0 0.034em,
			var(--trans) 0.036em 1em),
		radial-gradient(
			circle at 0.78em 0.78em,
			var(--strawberry-yogurt) 0,
			var(--trans) 0.35em 1em),
		
		/* face */
		radial-gradient(
			circle at 0.8em 0.8em,
			var(--mushroom) 0,
			var(--trans) 0.45em 1em),
		radial-gradient(
			circle at 0.8em 0.8em,
			var(--mink) 0,
			var(--trans) 0.55em 1em),
		radial-gradient(
			circle at 0.8em 0.8em,
			var(--cappuccino) 0,
			var(--trans) 0.65em 1em),
		
		/* ears */
		radial-gradient(
			circle at 0.44em 0.7em,
			var(--latte) 0 0.095em,
			var(--trans) 0.15em 1em),
		radial-gradient(
			circle at 0.7em 0.44em,
			var(--latte) 0 0.095em,
			var(--trans) 0.15em 1em),
		radial-gradient(
			circle at 0.37em 0.7em,
			var(--clay) 0 0.095em,
			var(--trans) 0.105em 1em),
		radial-gradient(
			circle at 0.7em 0.37em,
			var(--clay) 0 0.095em,
			var(--trans) 0.105em 1em),
		radial-gradient(
			circle at 0.35em 0.7em,
			var(--strawberry-yogurt) 0 0.1em,
			var(--trans) 0.105em 1em),
		radial-gradient(
			circle at 0.7em 0.35em,
			var(--strawberry-yogurt) 0 0.1em,
			var(--trans) 0.105em 1em);
	border-radius: 0.02em 0.02em 0.5em 0.02em;
	height: 1em; 
	left: 0.5em;
	top: 0.6em;
	transform:
		rotate(45deg);
	width: 1em;
}
.hedgehog div::before,
.hedgehog div::after {
  background-image:
		radial-gradient(
			circle at 0.8em 0.8em,
			var(--cappuccino) 0,
			var(--latte) 0.75em 1em);
	border-radius: 0.02em 0.02em 0.5em 0.02em; 
	height: 1em; 
	left: 0;
	top: 0;
	width: 1em;
}
.hedgehog div::before {
  background-image:
		radial-gradient(
			circle at 0.8em 0.6em,
			var(--mushroom) 0,
			var(--trans) 0.45em 1em),
		radial-gradient(
			circle at 0.8em 0.6em,
			var(--mink) 0,
			var(--trans) 0.55em 1em),
		radial-gradient(
			circle at 0.8em 0.6em,
			var(--cappuccino) 0,
			var(--latte) 0.65em 1em);
	transform:
		rotate(30deg)
		translateZ(-1em);
}
.hedgehog div::after {
  background-image:
		radial-gradient(
			circle at 0.6em 0.8em,
			var(--mushroom) 0,
			var(--trans) 0.45em 1em),
		radial-gradient(
			circle at 0.6em 0.8em,
			var(--mink) 0,
			var(--trans) 0.55em 1em),
		radial-gradient(
			circle at 0.6em 0.8em,
			var(--cappuccino) 0,
			var(--latte) 0.65em 1em);
	transform:
		rotate(-30deg)
		translateZ(-1em);
	top: -1em;
	left: 0em;
}


.hungry-chick { background-color: var(--cappuccino); }
.hungry-chick div {
  background-image:
		radial-gradient(
			circle at 0.16em 0.3em,
			var(--salmon) 0,
			var(--peach) 0.25em 0.3em,
			var(--butter) 0.5em 1em);
	border-radius: 1em 0.1em; 
	border: 0.04em solid var(--butter);
	height: 0.6em; 
	left: 0.75em;
	top: 0.65em;
	transform:
		rotate(-64deg);
	width: 0.7em;
}
.hungry-chick div::before {
	background: var(--latte);
	background-image:
		radial-gradient(
		circle at 0.27em 0.22em,
		var(--ink) 0 0.07em,
		var(--butter) 0.075em 0.1em,
		var(--trans) 0.105em 4em);
	border-radius: 80%;
	left: -0.32em;
	height: 0.9em;
	top: -0.16em;
	transform:
		translateZ(-1em);
	width: 0.9em;
}
.hungry-chick div::after {
	background: var(--butter);
	border-radius: 0.18em 0.6em; 
	left: 0.08em;
	height: 0.46em;
	top: -0.8em;
	transform:
		rotate(0deg)
		translateZ(-1em);
	width: 0.46em;
}


.down-feather { background-color: var(--sea-fog); }
.down-feather div {
  background-image:
		repeating-radial-gradient(
			circle at 0 -0.12em,
			var(--cloud) 0 0.01em,
			var(--trans5) 0.015em 0.02em,
			var(--cloud) 0.025em);
	background-clip: content-box;
	border-radius: 100%/90%; 
	border-left: 0.26em solid var(--mushroom);
	border-right: 0.06em solid var(--trans);
	height: 1em; 
	left: 0.7em;
	top: 0.4em;
	transform:
		rotate(22deg);
	width: 0.36em;
}
.down-feather div::before {
	background-position: 0.5em;
	border-bottom: 0.12em solid var(--trans);
	border-left: 0.05em solid var(--cloud);
	border-radius: 100%; 
	height: 1.25em; 
	left: -0.01em;
	transform:
		rotate(-3deg);
	width: 0.2em;
}
.down-feather div::after {
	background-size: 1em 1em;
	background-position: 0.5em;
	border-top: 0.07em double var(--mushroom);
	border-radius: 100%; 
	height: 0.24em; 
	left: -0.15em;
	opacity: 0.8;
	top: -0.38em;
	transform:
		rotate(-10deg)
		translateZ(-1em);
	width: 0.45em;
}

.bird-print { background-color: var(--carmine); }
.bird-print div {
	background: var(--magenta);
	background-position: 0.6em 0.5em;
	background-size: 1.4em 2.1em;
	border-radius: 1em;
	height: 1em; 
	left: 0.94em;
	top: 0.55em;
	transform:
		rotate(0deg)
		translateZ(1em);
	width: 0.12em;
}
.bird-print div::before,
.bird-print div::after {
	background: var(--magenta);
	border-radius: 2em;
	height: 0.6em;
	left: -0.17em;
	top: 0.16em;
	transform:
		rotate(-45deg);
	width: 0.12em;
}
.bird-print div::after {
	left: 0.17em;
	top: -0.45em;
	transform:
		rotate(45deg);
}

.cinnabar-caterpillar { background-color: var(--fudge); }
.cinnabar-caterpillar div {
	background-color: var(--charcoal);
	background-image:
		repeating-radial-gradient(
			circle at -0.05em 0.15em,
			var(--charcoal) 0 0.2em,
			var(--trans) 0.21em 2em),
		repeating-radial-gradient(
			circle at 0.07em 0.15em,
			var(--sun) 0 0.2em,
			var(--trans) 0.21em 2em);
	background-clip: content-box;
	background-size: 0.29em 0.32em;
	border-radius: 1em;
	height: 0.32em; 
	left: 0.3em;
	top: 0.84em;
	transform:
		translateZ(1em);
	width: 1.5em;
}
.cinnabar-caterpillar div::before {
	border-bottom: 0.12em dotted var(--charcoal);
	height: 0.32em; 
	left: 0.1em;
	top: -0.05em;
	transform:
		translateZ(-1em);
	width: 1.3em;
}

.woodlouse { background-color: var(--latte); }
.woodlouse div {
	background:
		repeating-radial-gradient(
			circle at 0.1em 0.13em,
			var(--iron) 0 0.02em,
			var(--trans) 0.04em 2em),
		repeating-radial-gradient(
			circle at 0.54em 0.13em,
			var(--iron) 0 0.02em,
			var(--trans) 0.04em 2em),
		repeating-radial-gradient(
			circle at 0.32em 0.18em,
			var(--charcoal) 0 0.24em,
			var(--iron) 0.31em 0.31em,
			var(--trans) 0.315em 2em);
	background-size: 0.74em 0.2em;
	border-radius: 0 0 100% 100%;
	border: 0.1em solid var(--trans);
	border-top-width: 0;
	border-bottom: 0.05em solid var(--charcoal);
	height: 0.72em; 
	left: 0.46em;
	top: 0.84em;
	transform:
		rotate(80deg)
		skew(0deg)
		translateZ(1em);
	width: 0.64em;
}
.woodlouse div::before {
	background:
		repeating-radial-gradient(
			circle at 0.32em 0.52em,
			var(--charcoal) 0 0.24em,
			var(--iron) 0.31em 0.31em,
			var(--trans) 0.315em 4em),
		repeating-radial-gradient(
			circle at 0.32em 0.32em,
			var(--charcoal) 0 0.11em,
			var(--iron) 0.18em 0.18em,
			var(--trans) 0.185em 4em),
		repeating-radial-gradient(
			circle at 0.96em 0.26em,
			var(--trans) 0 0.58em,
			var(--charcoal) 0.585em 0.61em,
			var(--trans) 0.615em 4em),
		repeating-radial-gradient(
			circle at -0.31em 0.26em,
			var(--trans) 0 0.58em,
			var(--charcoal) 0.585em 0.61em,
			var(--trans) 0.615em 4em);
	background-position: 0 0.2em;
	background-size: 0.64em 2em;
	border-radius: 100%;
	height: 0.58em;
	left: -0.03em;
	top: -0.54em;
	transform:
		rotate(-2deg)
		translateZ(-1em);
	width: 0.64em;
}

.bumblebee { background-color: var(--camo); }
.bumblebee div {
	background:
		/* upper wing */
		repeating-radial-gradient(
			circle at 0.4em -0.05em,
			var(--charcoal) 0 0.28em,
			var(--trans) 0.32em 3em),
		repeating-radial-gradient(
			circle at 0.4em 0.08em,
			var(--mustard) 0 0.2em,
			var(--butter) 0.26em 0.25em,
			var(--trans) 0.3em 3em),
		repeating-radial-gradient(
			circle at 0.41em 0.15em,
			var(--charcoal) 0 0.28em,
			var(--trans) 0.32em 3em),
		repeating-radial-gradient(
			circle at 0.42em 0.24em,
			var(--mushroom) 0 0.28em,
			var(--trans) 0.32em 3em),
		
		repeating-radial-gradient(
			circle at 0.4em 1.25em,
			var(--charcoal) 0 0.28em,
			var(--trans) 0.32em 3em),
		repeating-radial-gradient(
			circle at 0.42em 1.12em,
			var(--mustard) 0 0.2em,
			var(--butter) 0.26em 0.25em,
			var(--trans) 0.29em 3em),
		repeating-radial-gradient(
			circle at 0.44em 0.92em,
			var(--charcoal) 0 0.11em,
			var(--trans) 0.15em 3em);
	background-position: 0 0.6em;
	height: 1.2em; 
	left: 0.65em;
	top: 0.32em;
	transform:
		rotate(30deg)
		skew(5deg)
		translateZ(1em);
	width: 0.76em;
}
.bumblebee div::before {
	background:	
		repeating-radial-gradient(
			circle at 0.39em 0.04em,
			var(--iron) 0 0.03em,
			var(--trans) 0.04em 3em),
		repeating-radial-gradient(
			circle at 0.04em 0.39em,
			var(--iron) 0 0.03em,
			var(--trans) 0.04em 3em),
		
		repeating-radial-gradient(
			circle at -0.5em 0.7em,
			var(--cloud) 0 0.6em,
			var(--trans) 0.61em 3em),
		repeating-radial-gradient(
			circle at 0.7em -0.5em,
			var(--cloud) 0 0.6em,
			var(--trans) 0.61em 3em),
		
		repeating-radial-gradient(
			circle at -0.49em 0.71em,
			var(--mink) 0 0.6em,
			var(--trans) 0.61em 3em),
		repeating-radial-gradient(
			circle at 0.71em -0.49em,
			var(--mink) 0 0.6em,
			var(--trans) 0.61em 3em),
		
		repeating-radial-gradient(
			circle at -0.46em 0.77em,
			var(--white) 0 0.6em,
			var(--trans) 0.61em 3em),
		repeating-radial-gradient(
			circle at 0.77em -0.46em,
			var(--white) 0 0.6em,
			var(--trans) 0.61em 3em),
		
		repeating-radial-gradient(
			circle at -0.44em 0.77em,
			var(--cappuccino) 0 0.6em,
			var(--trans) 0.61em 3em),
		repeating-radial-gradient(
			circle at 0.77em -0.44em,
			var(--cappuccino) 0 0.6em,
			var(--trans) 0.61em 3em),
		
		repeating-radial-gradient(
			circle at -0.41em 0.83em,
			var(--ice) 0 0.6em,
			var(--trans) 0.61em 3em),
		repeating-radial-gradient(
			circle at 0.83em -0.41em,
			var(--ice) 0 0.6em,
			var(--trans) 0.61em 3em),
		
		repeating-radial-gradient(
			circle at -0.4em 0.85em,
			var(--latte) 0 0.6em,
			var(--trans) 0.61em 3em),
		repeating-radial-gradient(
			circle at 0.85em -0.4em,
			var(--latte) 0 0.6em,
			var(--trans) 0.61em 3em),
		
		repeating-radial-gradient(
			circle at 0.03em -0.02em,
			var(--charcoal) 0 0.5em,
			var(--trans) 0.51em 3em);
	border-radius: 0.5em 0.1em;
	height: 1.2em; 
	left: -0.18em;
	opacity: 0.45;
	top: 0.56em;
	transform:
		rotate(50deg)
		skew(20deg)
		translateZ(1em);
	width: 1.2em;
}

.starfish { background-color: var(--sand); }
.starfish div {
	background: var(--melon);
	background-position: 0.3em;
	border-radius: 100% 100% 80% 80%;
	border-bottom: 0.05em solid var(--hazelnut);
	height: 0.25em; 
	left: 0.4em;
	top: 0.8em;
	transform: 
		rotate(-10deg);
	width: 1.2em;
}
.starfish div::before {
	background: var(--melon);
	background-position: 0.3em;
	border-radius: 100% 100% 80% 80%;
	border-bottom: 0.05em solid var(--hazelnut);
	height: 0.25em; 
	left: 0.03em;
	top: 0.17em;
	transform: 
		rotate(-20deg);
	width: 1.2em;
}
.starfish div::after {
	background: var(--melon);
	background-clip: padding-box;
	background-position: 0.3em;
	border-radius: 100%;
	border-right: 0.05em solid var(--hazelnut);
	border-bottom: 0.005em solid var(--trans);
	border-top: 0 solid var(--trans);
	height: 0.34em; 
	left: 0.16em;
	top: -0.2em;
	transform: 
		rotate(80deg)
		skew(-30deg);
	width: 1em;
}

.moon-jellyfish { background-color: var(--navy); }
.moon-jellyfish div {
	background:
		radial-gradient(
			var(--trans2) 0,
			var(--trans1) 30% 65%,
			var(--robins-egg) 85% 100%);
	background-position: 0 0.01em;
	border-radius: 2em 1.9em 2.2em 1.8em;
	border: 0.018em solid var(--robins-egg);
	border-left-width: 0;
	border-right-width: 0;
	box-shadow: 0 0 0.2em 0.01em var(--sea-fog);
	height: 1em; 
	left: 0.5em;
	top: 0.5em;
	transform:
		rotate(10deg);
	width: 1em;
}
.moon-jellyfish div::before {
	background:
		repeating-radial-gradient(
			circle at 0.43em 0.39em,
			var(--trans) 0 0.07em,
			var(--petal) 0.09em 0.1em,
			var(--trans) 0.12em 2em),
		repeating-radial-gradient(
			circle at 0.63em 0.63em,
			var(--trans) 0 0.07em,
			var(--petal) 0.09em 0.1em,
			var(--trans) 0.12em 2em),
		repeating-radial-gradient(
			circle at 0.65em 0.39em,
			var(--trans) 0 0.06em,
			var(--petal) 0.08em 0.09em,
			var(--trans) 0.11em 2em),
		repeating-radial-gradient(
			circle at 0.4em 0.62em,
			var(--trans) 0 0.06em,
			var(--petal) 0.08em 0.09em,
			var(--trans) 0.11em 2em);
	background-position: 0 0.01em;
	border-radius: 2em 1.9em 2em 1.8em;
	height: 1em;
	opacity: 0.9;
	transform: 
		skew(5deg);
	width: 1em;
}

.spider-web { background-color: var(--aubergine); }
.spider-web div,
.spider-web div::before,
.spider-web div::after {
  background-image:		
		/*top right */
		repeating-radial-gradient(
			circle at 3.625em 3.63em,
			var(--trans) 0 0.45em,
			var(--mushroom) 0.455em 0.46em,
			var(--trans) 0.465em 6em),
		repeating-radial-gradient(
			circle at 3.48em 3.45em,
			var(--trans) 0 0.6em,
			var(--mushroom) 0.605em 0.61em,
			var(--trans) 0.615em 6em),
		repeating-radial-gradient(
			circle at 3.28em 3.25em,
			var(--trans) 0 0.8em,
			var(--mushroom) 0.805em 0.81em,
			var(--trans) 0.815em 6em),
		repeating-radial-gradient(
			circle at 3.08em 3.05em,
			var(--trans) 0 1em,
			var(--mushroom) 1.005em 1.01em,
			var(--trans) 1.015em 6em),
		
		/*bottom left */
		repeating-radial-gradient(
			circle at 0.36em 0.39em,
			var(--trans) 0 0.45em,
			var(--cloud) 0.455em 0.46em,
			var(--trans) 0.465em 6em),
		repeating-radial-gradient(
			circle at 0.52em 0.55em,
			var(--trans) 0 0.6em,
			var(--cloud) 0.605em 0.61em,
			var(--trans) 0.615em 6em),
		repeating-radial-gradient(
			circle at 0.71em 0.75em,
			var(--trans) 0 0.8em,
			var(--cloud) 0.805em 0.81em,
			var(--trans) 0.815em 6em),
		repeating-radial-gradient(
			circle at 0.91em 0.95em,
			var(--trans) 0 1em,
			var(--cloud) 1.005em 1.01em,
			var(--trans) 1.015em 6em);
	background-position: 0.6em 0.6em;
	background-size: 4em 4em;
	border-radius: 100%;
	height: 1.2em; 
	left: 0.4em;
	top: 0.4em;
	width: 1.2em;
}
.spider-web div {
	transform:
		rotate(31deg)
		skew(30deg);
}
.spider-web div::before {
	left: 0;
	top: 0;
	transform:
		skew(-30deg)
		rotate(60deg)
		skew(30deg);
	opacity: 0.75;
}
.spider-web div::after {
	left: 0;
	top: -1.2em;
	transform:
		skew(-30deg)
		rotate(-60deg)
		skew(30deg);
	opacity: 0.5;
}

.cabbage-white { background-color: var(--forest); }
.cabbage-white div {
	background-image:
		
		/* body */
		repeating-radial-gradient(
			circle at 1.21em 0.47em,
			var(--pebble) 0,
			var(--dove) 0.06em,
			var(--trans) 0.065em 2em),
		repeating-radial-gradient(
			circle at -0.055em 0.47em,
			var(--pebble) 0,
			var(--dove) 0.08em,
			var(--trans) 0.085em 2em),
		repeating-radial-gradient(
			circle at 1.45em 0.62em,
			var(--gray) 0,
			var(--dove) 0.32em,
			var(--trans) 0.325em 2em),
		repeating-radial-gradient(
			circle at -0.44em 0.72em,
			var(--gray) 0 0.2em,
			var(--dove) 0.53em,
			var(--trans) 0.535em 2em),
		repeating-radial-gradient(
			circle at 1.3em 0.85em,
			var(--gray) 0,
			var(--dove) 0.16em,
			var(--trans) 0.165em 2em),
		repeating-radial-gradient(
			circle at 1.21em 0.94em,
			var(--pebble) 0,
			var(--dove) 0.08em,
			var(--trans) 0.085em 2em);
	background-position: 0.3em;
	border-radius: 0.2em;
	height: 1.1em; 
	left: 0.34em; 
	top: 0.5em;
	transform: 
		rotate(-40deg)
		skew(0deg);
	width: 1.2em;
}
.cabbage-white div::after {
	background-image:
		repeating-radial-gradient(
			circle at 0.5em 0.77em,
			var(--cloud) 0 0.5em,
			var(--trans) 0.51em 2em),
	
		repeating-radial-gradient(
			circle at 0.52em 0.75em,
			var(--mushroom) 0 0.5em,
			var(--trans) 0.51em 2em),
		repeating-radial-gradient(
			circle at 0.5em 0.68em,
			var(--cloud) 0 0.5em,
			var(--trans) 0.51em 2em),
	
		repeating-radial-gradient(
			circle at 0.52em 0.66em,
			var(--mushroom) 0 0.5em,
			var(--trans) 0.51em 2em),
		repeating-radial-gradient(
			circle at 0.5em 0.59em,
			var(--cloud) 0 0.5em,
			var(--trans) 0.51em 2em),
	
		repeating-radial-gradient(
			circle at 0.52em 0.57em,
			var(--mushroom) 0 0.5em,
			var(--trans) 0.51em 2em),
		repeating-radial-gradient(
			circle at 0.5em 0.52em,
			var(--cloud) 0 0.5em,
			var(--trans) 0.51em 2em);
	border-radius: 0.2em 0.6em 0.5em 0.1em;
	height: 0.6em; 
	left: 0.42em;
	opacity: 0.95;
	top: -0.2em;
	transform: 
		rotate(55deg);
	width: 0.75em;
}
.cabbage-white div::before {
	background-image:
		repeating-radial-gradient(
			circle at 0.74em -0.08em,
			var(--charcoal) 0 0.08em,
			var(--trans) 0.2em 2em),
		repeating-radial-gradient(
			circle at 0.9em 0.07em,
			var(--charcoal) 0 0.08em,
			var(--trans) 0.2em 2em),
		
		repeating-radial-gradient(
			circle at 0.58em 0.34em,
			var(--charcoal) 0 0.03em,
			var(--trans) 0.06em 2em),
		repeating-radial-gradient(
			circle at 0.54em 0.5em,
			var(--charcoal) 0 0.02em,
			var(--trans) 0.05em 2em),
		
		repeating-radial-gradient(
			circle at 0.82em 0.78em,
			var(--mushroom) 0,
			var(--cloud) 0.8em,
			var(--trans) 0.81em 2em),
		repeating-radial-gradient(
			circle at 0.77em 0.78em,
			var(--mushroom) 0 0.8em,
			var(--trans) 0.81em 2em);
	border-radius: 0.5em 0.1em 0.32em 0.1em;
	height: 0.72em; 
	left: 0.36em;
	opacity: 0.95;
	top: 0.05em;
	transform: 
		rotate(10deg);
	width: 0.84em;
}

.cat-tracks { background-color: var(--blush); }
.cat-tracks div {
	background: var(--strawberry-yogurt);
	border-radius: 100%;
	box-shadow: 0.37em 0 0 var(--strawberry-yogurt);
	height: 0.42em; 
	left: 0.65em;
	top: 0.52em;
	width: 0.32em;
}
.cat-tracks div::before {
	background: var(--strawberry-yogurt);
	border-radius: 100%;
	box-shadow: 0.98em 0 0 var(--strawberry-yogurt);
	height: 0.42em; 
	left: -0.3em;
	top: 0.28em;
	width: 0.32em;
}
.cat-tracks div::after {
	background:
		repeating-radial-gradient(
			circle at 0.19em 0.28em,
			var(--strawberry-yogurt) 0 0.26em,
			var(--trans) 0.261em 1em),
		repeating-radial-gradient(
			circle at 0.56em 0.28em,
			var(--strawberry-yogurt) 0 0.26em,
			var(--trans) 0.261em 1em),
		repeating-radial-gradient(
			circle at 0.4em 0.1em,
			var(--strawberry-yogurt) 0 0.26em,
			var(--trans) 0.261em 1em);
	border-radius: 1em 1em 0.6em 0.6em;
	height: 0.56em; 
	left: -0.02em;
	top: 0.06em;
	width: 0.76em;
}

.common-blue { background-color: var(--powder-blue); }
.common-blue div {
	background:
		/* body */
		repeating-radial-gradient(
			circle at 1.35em 0.34em,
			var(--slate) 0 0.5em,
			var(--trans) 0.51em 3em),
		repeating-radial-gradient(
			circle at -0.43em 0.34em,
			var(--slate) 0 0.5em,
			var(--trans) 0.51em 3em),
		
		/* fuzz */
		repeating-radial-gradient(
			circle at 1.05em 0.4em,
			var(--blue-gray) 0 0.2em,
			var(--trans) 0.3em 3em),
		repeating-radial-gradient(
			circle at -0.13em 0.4em,
			var(--blue-gray) 0 0.2em,
			var(--trans) 0.3em 3em),
		
		/* upper wing */
		repeating-radial-gradient(
			circle at 0.46em 0.54em,
			var(--forget-me-not) 0,
			var(--blue-gray) 0.5em 0.54em,
			var(--trans) 0.545em 3em);
	background-position: 0.6em;
	background-size: 0.92em;
	border-radius: 0.7em 0.7em 2em 2em;
	box-shadow:
		-0.04em 0.02em 0 0 var(--cloud),
		0.04em 0.02em 0 0 var(--cloud);
	height: 0.7em; 
	left: 0.4em;
	top: 0.6em;
	transform:
		rotate(30deg)
		skew(5deg)
		translateZ(1em);
	width: 1.2em;
}
.common-blue div::before {
	background:	
		/* body */
		repeating-radial-gradient(
			circle at 1.73em 0.2em,
			var(--slate) 0 0.48em,
			var(--trans) 0.49em 3em),
		repeating-radial-gradient(
			circle at -0.43em 0.2em,
			var(--slate) 0 0.48em,
			var(--trans) 0.49em 3em),
		
		/* lower wing */
		repeating-radial-gradient(
			circle at 0.27em 0.32em,
			var(--forget-me-not) 0,
			var(--blue-gray) 0.24em 0.24em,
			var(--trans) 0.245em 3em),
		repeating-radial-gradient(
			circle at 01.03em 0.32em,
			var(--forget-me-not) 0,
			var(--blue-gray) 0.24em 0.24em,
			var(--trans) 0.245em 3em),
		
		/* lower wing */
		repeating-radial-gradient(
			circle at 0.29em 0.35em,
			var(--mushroom) 0 0.25em,
			var(--trans) 0.255em 3em),
		repeating-radial-gradient(
			circle at 1.01em 0.35em,
			var(--mushroom) 0 0.25em,
			var(--trans) 0.255em 3em);
	background-position: 0.6em;
	background-size: 1.3em;
	border-radius: 0em;
	height: 0.7em; 
	left: 0em;
	top: 0.4em;
	transform:
		rotate(0deg)
		translateZ(1em);
	width: 1.2em;
}

.fox-face { background-color: var(--chestnut); }
.fox-face div {
	background:
		/* cheeks */
		repeating-radial-gradient(
			circle at 1.36em 0.9em,
			var(--mushroom) 0 0.4em,
			var(--trans) 0.405em 3em),
		repeating-radial-gradient(
			circle at 0.9em 1.36em,
			var(--mushroom) 0 0.4em,
			var(--trans) 0.405em 3em),
		
		/* nose */
		repeating-radial-gradient(
			circle at 1.12em 1.12em,
			var(--clay) 0 0.3em,
			var(--trans) 0.305em 3em),
		
		/* head */
		repeating-radial-gradient(
			circle at 1.2em 1.2em,
			var(--melon) 0 0.9em,
			var(--trans) 0.905em 3em),
		
		/* ears */
		repeating-radial-gradient(
			circle at 1.2em 0.1em,
			var(--melon) 0 0.5em,
			var(--trans) 0.505em 3em),
		repeating-radial-gradient(
			circle at 0.1em 1.2em,
			var(--melon) 0 0.5em,
			var(--trans) 0.505em 3em),
		repeating-radial-gradient(
			circle at 1.17em 0.1em,
			var(--clay) 0 0.5em,
			var(--trans) 0.505em 3em),
		repeating-radial-gradient(
			circle at 0.1em 1.17em,
			var(--clay) 0 0.5em,
			var(--trans) 0.505em 3em);
	border-radius: 2em 2em 1.4em 2em;
	height: 1.2em; 
	left: 0.4em;
	top: 0.3em;
	transform:
		rotate(45deg)
		translateZ(1em);
	width: 1.2em;
}
.fox-face div::before {
	background:
		repeating-radial-gradient(
			circle at -0.09em 0.62em,
			var(--clay) 0 0.14em,
			var(--trans) 0.145em 4em),
		repeating-radial-gradient(
			circle at 0.62em -0.09em,
			var(--clay) 0 0.14em,
			var(--trans) 0.145em 4em),
		
		repeating-radial-gradient(
			circle at 1.09em 0.63em,
			var(--coffee) 0 0.14em,
			var(--trans) 0.145em 4em),
		repeating-radial-gradient(
			circle at 0.63em 1.09em,
			var(--coffee) 0 0.14em,
			var(--trans) 0.145em 4em);
	background-position: 0.8em 0.8em;
	background-size: 1em 1em;
	border: 0.1em solid var(--trans);
	border-radius: 100%;
	height: 1em; 
	left: 0.05em;
	top: 0.05em;
	transform:
		skew(-0deg)
		rotate(-0deg);
	width: 1em;
}
.fox-face div::after {
	border: 0.12em solid var(--trans);
	border-bottom: 0.12em solid var(--cloud);
	border-radius: 100%;
	height: 0.2em; 
	left: 0.71em;
	top: -0.54em;
	transform:
		rotate(-45deg);
	width: 0.1em;
}

.rabbit { background-color: var(--slate); }
.rabbit div {
	background:
		repeating-radial-gradient(
			circle at 1.26em 2.05em,
			var(--coffee) 0 0.03em,
			var(--trans) 0.035em 3em),
		
		/* front-ear */
		repeating-radial-gradient(
			circle at 1.63em 1.82em,
			var(--strawberry-yogurt) 0 0.28em,
			var(--trans) 0.285em 3em),
		
		/* back-ear */
		repeating-radial-gradient(
			circle at -0.26em 1.88em,
			var(--strawberry-yogurt) 0 0.34em,
			var(--trans) 0.345em 3em),
		
		/* forehead */
		repeating-radial-gradient(
			circle at 1.34em 2.2em,
			var(--strawberry-yogurt) 0 0.28em,
			var(--trans) 0.285em 3em),
		
		/* muzzle */
		repeating-radial-gradient(
			circle at 1.205em -0.03em,
			var(--strawberry-yogurt) 0 0.13em,
			var(--trans) 0.135em 3em),
		
		/* chest */
		repeating-radial-gradient(
			circle at 1.48em 0.2em,
			var(--strawberry-yogurt) 0 0.28em,
			var(--trans) 0.285em 3em),
		
		/* rump */
		repeating-radial-gradient(
			circle at 0.27em 0.36em,
			var(--strawberry-yogurt) 0 0.28em,
			var(--trans) 0.285em 3em),
		repeating-radial-gradient(
			circle at 0 0.5em,
			var(--strawberry-yogurt) 0 0.38em,
			var(--trans) 0.385em 3em),
		
		/* scut */
		repeating-radial-gradient(
			circle at 0.54em 0.44em,
			var(--mushroom) 0 0.08em,
			var(--trans) 0.085em 3em),
		
		/* foot */
		repeating-radial-gradient(
			circle at 1.4em 0.535em,
			var(--strawberry-yogurt) 0 0.06em,
			var(--trans) 0.065em 3em);
	background-position: 0.6em 0.5em;
	background-size: 1.4em 2.1em;
	border-radius: 100%/60%;
	height: 1.1em; 
	left: 0.3em;
	top: 0.5em;
	transform:
		rotate(0deg)
		translateZ(1em);
	width: 1.4em;
}
.rabbit div::before {
	border: 0.1em solid var(--trans);
	border-bottom: 0.2em solid var(--strawberry-yogurt);
	border-radius: 100%;
	height: 0.4em; 
	left: 0.54em;
	top: 0.06em;
	transform:
		rotate(55deg);
	width: 0.4em;
}
.rabbit div::after {
	background:
		repeating-radial-gradient(
			circle at 1.26em 2.05em,
			var(--purple-slate) 0 0.03em,
			var(--trans) 0.035em 3em),
		
		/* front-ear */
		repeating-radial-gradient(
			circle at 1.63em 1.82em,
			var(--strawberry-yogurt) 0 0.28em,
			var(--trans) 0.285em 3em),
		
		/* back-ear */
		repeating-radial-gradient(
			circle at -0.26em 1.88em,
			var(--strawberry-yogurt) 0 0.34em,
			var(--trans) 0.345em 3em),
		
		/* forehead */
		repeating-radial-gradient(
			circle at 1.34em 2.2em,
			var(--strawberry-yogurt) 0 0.28em,
			var(--trans) 0.285em 3em),
		
		/* muzzle */
		repeating-radial-gradient(
			circle at 1.205em -0.03em,
			var(--strawberry-yogurt) 0 0.13em,
			var(--trans) 0.135em 3em),
		
		/* chest */
		repeating-radial-gradient(
			circle at 1.48em 0.2em,
			var(--strawberry-yogurt) 0 0.28em,
			var(--trans) 0.285em 3em),
		
		/* rump */
		repeating-radial-gradient(
			circle at 0.27em 0.36em,
			var(--strawberry-yogurt) 0 0.28em,
			var(--trans) 0.285em 3em),
		repeating-radial-gradient(
			circle at 0 0.5em,
			var(--strawberry-yogurt) 0 0.38em,
			var(--trans) 0.385em 3em),
		
		/* scut */
		repeating-radial-gradient(
			circle at 0.54em 0.44em,
			var(--mushroom) 0 0.08em,
			var(--trans) 0.085em 3em),
		
		/* foot */
		repeating-radial-gradient(
			circle at 1.4em 0.535em,
			var(--strawberry-yogurt) 0 0.06em,
			var(--trans) 0.065em 3em);
	background-position: 0.6em 0.5em;
	background-size: 1.4em 2.1em;
	border-radius: 100%/60%;
	height: 1.1em; 
	left: 0.01em;
	top: -0.71em;
	transform:
		rotate(0deg)
		translateZ(1em);
	width: 1.4em;
}

.goats-eye { background-color: var(--clay); }
.goats-eye div {
	background-color: var(--walnut);
  background-image:
    repeating-radial-gradient(
			var(--bronze) 0 0.44em,
      var(--chocolate) 0.54em 0.55em,
      var(--walnut) 0.56em 3em);
	background-position: -0.52em 1.5em;
	background-size: 2em 2em;
	border-radius: 0.75em 0.2em; 
	border: 0.03em solid var(--walnut);
	height: 1.1em; 
	left: 0.45em;
	transform:
		rotate(45deg)
		skew(-6deg);
	top: 0.45em;
	width: 1.1em;
}
.goats-eye div::before {
	background: var(--walnut);
	background-position: 0.5em;
	border-radius: 0.22em/0.3em;
	box-shadow: 0 0 0.09em 0.06em var(--chocolate);
	height: 0.3em; 
	left: 0.16em;
	top: 0.37em;
	transform:
		rotate(-45deg);
	width: 0.7em;
}
.goats-eye div::after {
	background-image:
		repeating-radial-gradient(
			circle at 0.34em 0.1em,
			var(--trans1) 0 0.12em,
			var(--trans) 0.4em 4em),
		repeating-radial-gradient(
			circle at 0.45em 0.77em,
			var(--melon) 0,
			var(--trans) 0.14em 4em);
	background-size: 1em 1em;
	background-position: 0.15em;
	border-radius: 1em; 
	height: 1em; 
	left: 0.04em;
	opacity: 0.6;
	top: -0.2em;
	width: 1em;
}

.spider-dangle { background-color: var(--eucalyptus); }
.spider-dangle div {
	background:
		repeating-radial-gradient(
			circle at 0.5em 0.52em,
			var(--walnut) 0 0.18em,
			var(--trans) 0.185em 3em),
		repeating-radial-gradient(
			circle at 0.5em 0.35em,
			var(--walnut) 0 0.1em,
			var(--trans) 0.105em 3em),
		repeating-radial-gradient(
			circle at 0.45em 0.26em,
			var(--walnut) 0 0.02em,
			var(--trans) 0.025em 3em),
		repeating-radial-gradient(
			circle at 0.55em 0.26em,
			var(--walnut) 0 0.02em,
			var(--trans) 0.025em 3em);
	border-radius: 0.8em 1em;
	height: 1em; 
	left: 0.5em;
	top: 0.6em;
	transform:
		rotate(0deg);
	width: 1em;
}
.spider-dangle div::before,
.spider-dangle div::after {
	background:
		repeating-radial-gradient(
			circle at 0.25em -0.86em,
			var(--walnut) 0 0.9em,
			var(--trans) 0.905em 3em),
		repeating-radial-gradient(
			circle at 0.25em 1.36em,
			var(--walnut) 0 0.9em,
			var(--trans) 0.905em 3em),
		repeating-radial-gradient(
			circle at -0.86em 0.25em,
			var(--walnut) 0 0.9em,
			var(--trans) 0.905em 3em),
		repeating-radial-gradient(
			circle at 1.36em 0.25em,
			var(--walnut) 0 0.9em,
			var(--trans) 0.905em 3em);
	height: 0.5em; 
	left: 0.24em;
	top: -0.23em;
	transform:
		rotate(58deg)
		skew(35deg);
	width: 0.5em;
  filter: drop-shadow(0.42em 0.4em 0 var(--walnut));
}
.spider-dangle div::after {
	left: 0.24em;
	top: -0.58em;
	transform:
		rotate(42deg)
		skew(-6deg);
} 

.mouse { background-color: var(--terracotta); }
.mouse div {
	background:
		repeating-radial-gradient(
			circle at 0.92em 0.295em,
			var(--strawberry-yogurt) 0 0.02em,
			var(--trans) 0.025em 3em),
		repeating-radial-gradient(
			circle at 0.93em 0.3em,
			var(--coffee) 0 0.04em,
			var(--trans) 0.045em 3em),
		repeating-radial-gradient(
			circle at 0.45em -1.28em,
			var(--mink) 0 0.7em,
			var(--latte) 1.7em 1.8em,
			var(--trans) 1.81em 3em);
	border-radius: 70% 100%;
	height: 1em; 
	left: 0.4em;
	top: 0.7em;
	transform:
		rotate(0deg)
		translateZ(1em);
	width: 1.2em;
}
.mouse div::before {
	border: 0.01em solid var(--trans);
	border-left: 0.07em solid var(--strawberry-yogurt);
	border-bottom: 0.07em solid var(--strawberry-yogurt);
	border-radius: 100%;
	height: 0.4em; 
	left: -0.075em;
	top: 0.27em;
	transform:
		rotate(15deg)
		translateZ(-1em);
	width: 0.7em;
}
.mouse div::after {
	background: var(--strawberry-yogurt);
	border-radius: 1em 1.2em 0.4em 1em;
	border-right: 0.05em solid var(--latte);
	height: 0.34em;
	left: 0.46em;
	top: -0.54em;
	transform:
		rotate(-5deg);
	width: 0.32em;
}

.bat { background-color: var(--charcoal); }
.bat div {
	background:
		repeating-radial-gradient(
			circle at 0.09em 0.05em,
			var(--trans) 0 0.05em,
			var(--clay) 0.055em 1em
			);
	border-radius: 1em/2em;
	height: 0.36em; 
	left: 1em;
	top: 0.9em;
	transform:
		rotate(5deg)
		translateZ(1em);
	width: 0.18em;
}
.bat div::before,
.bat div::after {
  background-image:
		repeating-radial-gradient(
			circle at 0.16em 0.4em,
			var(--trans) 0 0.16em,
			var(--navy) 0.17em 0.2em,
			var(--purple-slate) 0.32em 0.36em,
			var(--clay) 0.37em 3em);
	background-size: 0.32em 2em;
	border-radius: 2em 1.2em 0 0;
	height: 0.42em;
	left: -0.72em;
	top: -0.16em;
	transform:
		rotate(60deg)
		translateZ(-1em);
	width: 0.9em;
}
.bat div::after {
  background-image:
		repeating-radial-gradient(
			circle at 0.16em 0.39em,
			var(--trans) 0 0.16em,
			var(--navy) 0.17em 0.2em,
			var(--purple-slate) 0.32em 0.36em,
			var(--clay) 0.37em 3em);
  background-clip: padding-box;
	background-position: -0.05em 0;
	background-size: 0.32em 2em;
	border-radius: 1.1em 2em 0 0;
	left: 0.02em;
	top: -0.55em;
	transform:
		rotate(-55deg)
		translateZ(-1em);
}

.sparrow { background-color: var(--coffee); }
.sparrow div {
	background: var(--latte);
	border-radius: 2em 0;
	border-bottom: 0.08em solid var(--clay);
	height: 0.85em; 
	left: 0.75em;
	top: 0.55em;
	transform:
		rotate(30deg);
	width: 0.5em;
}
.sparrow div::before {
	background: var(--clay);
	border-radius: 2em 0; 
	height: 0.55em; 
	left: -0.15em;
	top: 0.25em;
	transform:
		rotate(0deg);
	width: 0.55em;
}

.cats-nose { background-color: var(--cappuccino); }
.cats-nose div {
	background: var(--hazelnut);
	background:
		linear-gradient(
			var(--hazelnut) 0.2em,
			var(--chocolate) 0.4em 0.55em,
			var(--bronze) 0.7em
			);
	border-radius: 25% 25% 40% 40%;
	height: 0.86em; 
	left: 0.8em;
	top: 0.7em;
	transform:
		rotate(-1deg)
		translateZ(1em);
	width: 0.45em;
}
.cats-nose div::before {
  background-image:
		repeating-radial-gradient(
			circle at 0.12em 0.66em,
			var(--trans) 0 0.4em,
			var(--bronze) 0.41em 3em),
		repeating-radial-gradient(
			circle at 0.44em 0.06em,
			var(--chocolate) 0 0.48em,
			var(--trans) 0.49em 3em);
  background-clip: padding-box;
	border-radius: 0.32em 0.22em 0 0.32em;
	height: 0.7em;
	left: -0.48em;
	top: -0.01em;
	transform:
		translateZ(1em);
	width: 0.7em;
}
.cats-nose div::after {
  background-image:
		repeating-radial-gradient(
			circle at 0.58em 0.66em,
			var(--trans) 0 0.4em,
			var(--bronze) 0.41em 3em),
		repeating-radial-gradient(
			circle at 0.26em 0.06em,
			var(--chocolate) 0 0.48em,
			var(--trans) 0.49em 3em);
  background-clip: padding-box;
	border-bottom: 0.08em solid var(--trans);
	border-radius: 0.22em 0.32em 0.32em 0;
	height: 0.7em;
	left: 0.24em;
	top: -0.71em;
	transform:
		translateZ(1em);
	width: 0.7em;
}

.ladybird { background-color: var(--sage); }
.ladybird div {
	background: var(--ink);
  background-image:
		repeating-radial-gradient(
			circle at 0.07em 0.03em,
			var(--mushroom) 0 0.06em,
			var(--trans) 0.07em 4em),
		repeating-radial-gradient(
			circle at 0.35em 0.03em,
			var(--mushroom) 0 0.06em,
			var(--trans) 0.07em 4em);
	border-radius: 0.24em/0.8em;
	height: 0.8em; 
	left: 0.8em;
	top: 0.6em;
	transform:
		rotate(3deg)
		translateZ(1em);
	width: 0.42em;
}
.ladybird div::before {
	background: var(--coral);
  background-image:
		repeating-radial-gradient(
			circle at 0.2em 0.2em,
			var(--trans2) 0 0.08em,
			var(--trans) 0.09em 3em),
		
		repeating-radial-gradient(
			circle at 0.02em 0.08em,
			var(--raspberry-jam) 0 0.07em,
			var(--trans) 0.08em 3em),
		repeating-radial-gradient(
			circle at 0.16em 0.3em,
			var(--raspberry-jam) 0 0.07em,
			var(--trans) 0.08em 3em),
		repeating-radial-gradient(
			circle at 0.2em 0.54em,
			var(--raspberry-jam) 0 0.05em,
			var(--trans) 0.06em 3em),
		repeating-radial-gradient(
			circle at 0.3em 0.15em,
			var(--raspberry-jam) 0 0.04em,
			var(--trans) 0.05em 3em),
		
		repeating-radial-gradient(
			circle at 0.06em 0.28em,
			var(--trans) 0 0.36em,
			var(--rouge) 0.37em 3em);
	border-radius: 0.1em 1em 1.2em 0.1em;
	height: 0.7em;
	left: 0.25em;
	top: 0.12em;
	transform:
		rotate(-5deg)
		translateZ(1em);
	width: 0.34em;
}
.ladybird div::after {
	background: var(--coral);
  background-image:
		repeating-radial-gradient(
			circle at 0.32em 0.08em,
			var(--raspberry-jam) 0 0.07em,
			var(--trans) 0.08em 3em),
		repeating-radial-gradient(
			circle at 0.21em 0.32em,
			var(--raspberry-jam) 0 0.07em,
			var(--trans) 0.08em 3em),
		repeating-radial-gradient(
			circle at 0.16em 0.54em,
			var(--raspberry-jam) 0 0.05em,
			var(--trans) 0.06em 3em),
		repeating-radial-gradient(
			circle at 0.04em 0.15em,
			var(--raspberry-jam) 0 0.04em,
			var(--trans) 0.05em 3em),
		
		repeating-radial-gradient(
			circle at 0.38em 0.28em,
			var(--trans) 0 0.36em,
			var(--rouge) 0.37em 3em);
	border-radius: 1em 0.1em 0.1em 1.2em;
	height: 0.7em;
	left: -0.17em;
	top: -0.58em;
	transform:
		rotate(5deg)
		translateZ(1em);
	width: 0.34em;
}

.money-spider { background-color: var(--sea-fog); }
.money-spider div {
	background: var(--clay);
	border-right: 0.02em solid var(--twilight);
	border-radius: 0.8em 1em;
	height: 0.36em; 
	left: 0.7em;
	top: 0.73em;
	transform:
		rotate(24deg);
	width: 0.36em;
  filter: drop-shadow(0.01em 0.01em 0 var(--twilight));
}
.money-spider div::before {
	border: 0.005em solid var(--trans);
	border-top: 0.05em solid var(--clay);
	border-radius: 100%;
	height: 0.2em; 
	left: -0.24em;
	top: 0.1em;
	transform:
		rotate(-29deg);
	width: 0.9em;
  filter: drop-shadow(0.01em 0.1em 0 var(--clay));
}
.money-spider div::after {
	border: 0.005em solid var(--trans);
	border-top: 0.05em solid var(--clay);
	border-radius: 100%;
	height: 0.2em; 
	left: -0.26em;
	top: -0.18em;
	transform:
		rotate(-70deg);
	width: 0.9em;
  filter: drop-shadow(0 0.1em 0 var(--clay));
} 

.swift { background-color: var(--dusty-purple); }
.swift div {
	border: 0.004em solid var(--trans);
	border-right: 0.05em solid var(--walnut);
  background-clip: padding-box;
  background-image:
		repeating-radial-gradient(
			circle at 1.67em 0.7em,
			var(--mushroom) 0 0.5em,
			var(--trans) 0.51em 4em),
		
		repeating-radial-gradient(
			circle at 1.45em 0,
			var(--walnut) 0 0.54em,
			var(--trans) 0.55em 3em),
		repeating-radial-gradient(
			circle at 1.45em 1.4em,
			var(--walnut) 0 0.54em,
			var(--trans) 0.55em 3em),
		
		repeating-radial-gradient(
			circle at 1.58em 0.7em,
			var(--iron) 0 0.5em,
			var(--trans) 0.51em 3em);
	border-radius: 100%;
	height: 1.4em; 
	left: 0.12em;
	top: 0.22em;
	transform:
		rotate(44deg)
		translateZ(1em);
	width: 1.4em;
}
.swift div::after {
  background-image:
		repeating-radial-gradient(
			circle at 1em 1.7em,
			var(--walnut) 0 0.11em,
			var(--trans) 0.115em 3em),
		repeating-radial-gradient(
			circle at 1em -0.02em,
			var(--walnut) 0 0.11em,
			var(--trans) 0.115em 3em),
		
		repeating-radial-gradient(
			circle at 0.75em 2.05em,
			var(--mushroom) 0 0.49em,
			var(--trans) 0.495em 3em),
		repeating-radial-gradient(
			circle at 0.75em -0.35em,
			var(--mushroom) 0 0.49em,
			var(--trans) 0.495em 3em),
		
		repeating-radial-gradient(
			circle at 1.07em 1.75em,
			var(--walnut) 0 0.085em,
			var(--trans) 0.09em 3em),
		repeating-radial-gradient(
			circle at 1.07em -0.06em,
			var(--walnut) 0 0.085em,
			var(--trans) 0.09em 3em);
	background-position: 0 -1em;
	background-size: 2em 1.7em;
	height: 1em;
	left: 0.45em;
	top: -0.22em;
	transform:
		rotate(-5deg)
		translateZ(1em);
	width: 1.4em;
}
.swift div::before {
	border: 0.036em solid var(--walnut);
	border-right: 0.26em solid var(--walnut);
	border-left: 0.03em solid var(--trans);
	border-radius: 0 100% 100% 0;
	height: 0.14em; 
	left: 0.42em;
	top: 0.63em;
	transform:
		rotate(-5deg)
		translateZ(1em);
	width: 0.36em;
}

.blackbird { background-color: var(--powder-blue); }
.blackbird div {
	border: 0 solid var(--trans);
	border-bottom: 0.4em solid var(--ink);
	border-left: 0.12em solid var(--ink);
	border-radius: 0em 0.5em 0.5em 1em;
	height: 0.7em; 
	left: 0.55em;
	top: 0.4em;
	transform:
		rotate(-15deg)
		translateZ(1em);
	width: 0.7em;
}
.blackbird div::before {
  background-image:
		repeating-radial-gradient(
			circle at 1.02em 1.64em,
			var(--trans) 0 0.02em,
			var(--yellow) 0.023em 0.04em,
			var(--trans) 0.045em 3em),
		
		repeating-radial-gradient(
			circle at 1em 1.65em,
			var(--ink) 0 0.14em,
			var(--trans) 0.145em 3em),
		repeating-radial-gradient(
			circle at 1em -0.05em,
			var(--ink) 0 0.14em,
			var(--trans) 0.145em 3em),
		
		repeating-radial-gradient(
			circle at 0.5em -0.25em,
			var(--ink),
			var(--iron) 0.44em,
			var(--trans) 0.445em 3em),
		
		repeating-radial-gradient(
			circle at 1.13em 1.75em,
			var(--yellow) 0 0.085em,
			var(--trans) 0.09em 3em),
		repeating-radial-gradient(
			circle at 1.12em -0.05em,
			var(--butter) 0 0.085em,
			var(--trans) 0.09em 3em);
	background-position: 0 -1em;
	background-size: 2em 1.7em;
	height: 1em;
	left: -0.4em;
	width: 1.4em;
}
.blackbird div::after {
	border: 0.04em solid var(--clay);
	border-bottom: 0.0em solid var(--trans);
	border-radius: 0.12em 0.12em 0 0; 
	height: 0.22em; 
	left: 0.15em;
	transform:
		rotate(-10deg)
		skew(-15deg)
		translateZ(-1em);
	width: 0.06em;
}

.mussel { background-color: var(--navy); }
.mussel div {
  background-image:
    radial-gradient(
      var(--powder-blue) 0 0.08em,
      var(--blue-gray) 0.09em 0.3em);
	border: 0.05em solid var(--slate);
	border-top-width: 0.12em;
	border-radius: 100%; 
	height: 0.5em; 
	left: 0.75em;
	top: 1.1em;
	transform: 
		rotate(20deg)
		skew(25deg);
	width: 0.3em;
}
.mussel div::before {
  background-image:
    radial-gradient(
      var(--blue-gray) 0 0.2em,
      var(--slate) 0.21em 0.26em); 
	border-radius: 1em/1.6em; 
	height: 1em; 
	left: -0.11em;
	top: -0.48em;
	transform:
		rotate(10deg)
		translateZ(-1em);
	width: 0.54em;
}
.mussel div::after {
  background-image:
    radial-gradient(
      var(--blue-gray) 0 0.22em,
      var(--slate) 0.23em 0.28em); 
	border-radius: 1em/1.6em; 
	border-top: 0.2em solid var(--trans1);
	border-right: 0.02em solid var(--trans1);
	border-left: 0.01em solid var(--trans1);
	height: 1.2em; 
	left: -0.06em;
	top: -2em;
	transform:
		rotate(45deg)
		skew(15deg)
		translateZ(-2em);
	width: 0.67em;
}

.earthworm { background-color: var(--latte); }
.earthworm div {
  background-image:
		repeating-radial-gradient(
			circle at 0.16em 0.25em,
			var(--trans2) 0 0.04em,
			var(--trans) 0.05em 2em),
		repeating-radial-gradient(
			circle at 0.12em 0.30em,
			var(--trans4) 0 0.04em,
			var(--trans) 0.05em 2em),
		repeating-radial-gradient(
			circle at 0.095em 0.35em,
			var(--trans5) 0 0.04em,
			var(--trans) 0.05em 2em),
		repeating-radial-gradient(
			circle at 0.08em 0.41em,
			var(--trans4) 0 0.04em,
			var(--trans) 0.05em 2em),
		repeating-radial-gradient(
			circle at 0.09em 0.47em,
			var(--trans2) 0 0.04em,
			var(--trans) 0.05em 2em),
		
		repeating-radial-gradient(
			circle at 1.19em 0.65em,
			var(--trans2) 0 0.04em,
			var(--trans) 0.05em 2em),
		repeating-radial-gradient(
			circle at 1.24em 0.68em,
			var(--trans4) 0 0.04em,
			var(--trans) 0.05em 2em),
		repeating-radial-gradient(
			circle at 1.29em 0.74em,
			var(--trans5) 0 0.04em,
			var(--trans) 0.05em 2em),
		repeating-radial-gradient(
			circle at 1.32em 0.81em,
			var(--trans4) 0 0.04em,
			var(--trans) 0.05em 2em),
		repeating-radial-gradient(
			circle at 1.31em 0.87em,
			var(--trans2) 0 0.04em,
			var(--trans) 0.05em 2em),
		
		repeating-radial-gradient(
			circle at 0.89em 0.22em,
			var(--ambrosia) 0 0.09em,
			var(--trans) 0.1em 2em),
		repeating-radial-gradient(
			circle at 0.81em 1.05em,
			var(--ambrosia) 0 0.09em,
			var(--trans) 0.1em 2em);
	height: 1.2em; 
	left: 0.3em;
	transform: 
		translateZ(1em);
	top: 0.4em;
	width: 1.4em;
}
.earthworm div::before {
	border: 0.16em solid var(--ambrosia);
	border-left: 0.2em solid var(--trans);
	border-right: 0.2em solid var(--ambrosia);
	border-radius: 100%;
	height: 0.3em; 
	left: 0.6em;
	top: 0.55em;
	transform: 
		rotate(-10deg)
		translateZ(-1em);
	width: 0.4em;
}
.earthworm div::after {
	border: 0.16em solid var(--ambrosia);
	border-left: 0.2em solid var(--ambrosia);
	border-right: 0.2em solid var(--trans);
	border-radius: 100%;
	height: 0.5em;
	left: 0;
	transform:
		translateZ(-1em);
	top: -0.6em;
	width: 0.7em;
}

.dove { background-color: var(--blue-gray); }
.dove div {
  background: var(--mushroom);
	border-radius: 0 1em 0.1em 1em;
	height: 0.6em; 
	left: 1em;
	top: 0.8em;
	transform:
		rotate(-40deg)
		translateZ(1em);
	width: 0.16em;
}
.dove div::before {
	border: 0.01em solid var(--trans);
	border-bottom: 0.16em solid var(--cloud);
	border-right: 0.3em solid var(--mushroom);
	border-radius: 0.1em 0.4em; 
	height: 0.5em; 
	left: -0.15em;
	top: -0.26em;
	transform:
		rotate(55deg)
		skew(-25deg)
		translateZ(-1em);
	width: 0.4em;
}

.minnow { background-color: var(--pond-bottom); }
.minnow div {
  background-image:
		repeating-radial-gradient(
			circle at 1em 0.1em,
			var(--iron) 0 0.03em,
			var(--powder-blue) 0.04em 0.05em,
			var(--trans) 0.06em 2em),
		repeating-radial-gradient(
			circle at 1.2em -0.1em,
			var(--sea-foam) 0 0.13em,
			var(--sage) 0.62em,
			var(--sea-fog) 1.1em 1.7em);
	border-radius: 3em/1em; 
	border-top: 0.06em solid var(--sea-fog);
	height: 0.35em; 
	left: 0.5em;
	opacity: 0.9;
	top: 0.8em;
	transform:
		rotate(-5deg)
		translateZ(1em);
	width: 1.25em;
}
.minnow div::before,
.minnow div::after {
	background-size: 1em 1em;
	background-position: 0.5em;
	border: 0 solid var(--trans);
	border-bottom: 0.16em solid var(--sea-fog);
	border-radius: 100%;
	height: 0.3em;
	left: -0.21em;
	opacity: 0.9;
	top: -0.27em;
	transform:
		rotate(20deg)
		translateZ(-1em);
	width: 0.5em;
}
.minnow div::after {
	left: -0.24em;
	top: -0.36em;
	transform: 
		rotate(155deg)
		translateZ(-2em);
}

.shell { background-color: var(--purple-slate); }
.shell div {
	border-radius: 100%; 
	height: 2em;
	width: 2em;
}
.shell div::before {
	background-image:
		repeating-radial-gradient(
			circle at 1.13em 0.44em,
			var(--hazelnut) 0 0.16em,
			var(--trans) 0.17em 4em),
		repeating-radial-gradient(
			circle at 1.08em 0.46em,
			var(--bronze) 0 0.16em,
			var(--trans) 0.17em 4em),
		
		repeating-radial-gradient(
			circle at 1.05em 0.56em,
			var(--hazelnut) 0 0.3em,
			var(--trans) 0.31em 4em),
		repeating-radial-gradient(
			circle at 0.99em 0.58em,
			var(--bronze) 0 0.3em,
			var(--trans) 0.31em 4em),
		
		repeating-radial-gradient(
			circle at 0.86em 0.77em,
			var(--hazelnut) 0 0.5em,
			var(--trans) 0.51em 4em),
		repeating-radial-gradient(
			circle at 0.78em 0.81em,
			var(--bronze) 0 0.51em,
			var(--trans) 0.52em 4em);
	border-radius: 100%; 
	height: 2em; 
	left: 0.4em;
	top: -0.1em;
	transform:
		rotate(-50deg)
		skew(40deg);
	width: 2em;
}
.shell div::after {
	background-image:
		repeating-radial-gradient(
			circle at 0.2em 0.12em,
			var(--chocolate) 0 0.22em,
			var(--trans) 0.23em 4em),
		repeating-radial-gradient(
			circle at 0.22em 0.22em,
			var(--bronze) 0 0.26em,
			var(--trans) 0.27em 4em);
	border-radius: 100%;
	height: 0.6em; 
	left: 1.23em;
	top: -1.15em;
	transform:
		rotate(10deg)
		skew(-15deg);
	width: 0.6em;
}

.crow-feather { background-color: var(--sea-fog); }
.crow-feather div {
	background: var(--iron);
  background-image:
		repeating-radial-gradient(
			circle at 0.2em -0.5em,
			var(--ink) 0 0.01em,
			var(--trans) 0.02em 0.03em,
			var(--ink) 0.04em);
	border-radius: 100%; 
	border-left: 0.15em solid var(--ink);
	height: 1.1em; 
	left: 0.8em;
	top: 0.35em;
	transform:
		rotate(-5deg)
		skew(-40deg);
	width: 0.4em;
}
.crow-feather div::before {
	background-size: 1em 1em;
	background-position: 0.5em;
	border-bottom: 0.17em solid var(--trans);
	border-left: 0.08em solid var(--dove);
	border-radius: 100%; 
	height: 1.18em; 
	left: -0.08em;
	top: 0.23em;
	transform:
		rotate(35deg)
		skew(40deg);
	width: 0.7em;
}

.cats-eye { background-color: var(--cappuccino); }
.cats-eye div {
  background-image:
    radial-gradient(
			var(--melon),
			var(--bud),
      var(--sea-foam),
      var(--pond-bottom),
      var(--rainforest)); 
	border-radius: 0.75em 0; 
	border-top: 0.05em solid var(--ink);
	border-bottom: 0.03em solid var(--ink);
	height: 1em; 
	left: 0.4em;
	top: 0.5em;
	width: 1.2em;
}
.cats-eye div::before {
	background-image:
		repeating-radial-gradient(
			circle at -0.82em 0.5em,
			var(--ink) 0 0.9em,
			var(--trans) 0.91em 4em),
		repeating-radial-gradient(
			circle at 1.82em 0.5em,
			var(--ink) 0 0.9em,
			var(--trans) 0.91em 4em);
	background-size: 1em 1em;
	background-position: 0.5em;
	border-radius: 2em; 
	height: 1em; 
	left: 0.09em;
	top: 0.04em;
	width: 1em;
}
.cats-eye div::after {
	background-image:
		repeating-radial-gradient(
			circle at -0.82em 0.5em,
			var(--ink) 0 0.9em,
			var(--trans) 0.91em 4em),
		repeating-radial-gradient(
			circle at 1.82em 0.5em,
			var(--ink) 0 0.9em,
			var(--trans) 0.91em 4em),
		repeating-radial-gradient(
			circle at 0.24em 0.1em,
			var(--trans2) 0 0.12em,
			var(--trans) 0.13em 4em),
		repeating-radial-gradient(
			circle at 0.13em 0.2em,
			var(--trans5) 0 0.05em,
			var(--trans) 0.06em 4em);
	background-size: 1em 1em;
	background-position: 0.5em;
	border-radius: 1em 0.4em; 
	height: 1em; 
	left: 0.09em;
	top: -0.94em;
	width: 1em;
}

.frog-submerged { background-color: var(--pond-bottom); }
.frog-submerged div {
	background-image:
		repeating-radial-gradient(
			circle at 2.54em 3.73em,
			var(--walnut) 0 0.03em,
			var(--trans) 0.04em 9em),
		repeating-radial-gradient(
			circle at 2.57em 3.73em,
			var(--trans1) 0 0.05em,
			var(--trans) 0.06em 9em),
		repeating-radial-gradient(
			circle at 2.1em 3.7em,
			var(--walnut) 0 0.09em,
			var(--trans) 0.1em 9em),
		repeating-radial-gradient(
			circle at 2.1em 3.7em,
			var(--walnut) 0.09em,
			var(--chocolate) 0.1em 0.12em,
			var(--walnut) 0.17em 0.18em,
			var(--camo) 0.19em 0.22em,
			var(--trans) 0.23em 5em),
		repeating-radial-gradient(
			circle at 2.02em 3.78em,
			var(--camo) 0 0.22em,
			var(--trans) 0.23em 5em),
		repeating-radial-gradient(
			circle at 2.4em 4.1em,
			var(--camo) 0 0.5em,
			var(--trans) 0.51em 5em),
		repeating-radial-gradient(
			circle at 2.1em 4.7em,
			var(--camo) 0 1em,
			var(--trans) 1.01em 5em),
		repeating-radial-gradient(
			circle at 2.35em 3.63em,
			var(--latte),
			var(--camo) 0.22em,
			var(--trans) 0.23em 5em);
	border-radius: 2em; 
	height: 4em; 
	left: -1.1em;
	top: -2.6em;
	width: 4em;
}
.frog-submerged div::before {
	border: 0.005em solid var(--trans);
	border-right: 0.05em solid var(--forest);
	border-left: 0.05em solid var(--forest);
	border-radius: 6em/3em;
	height: 0.25em;
	left: 1.26em;
	top: 3.75em;
	transform: rotate(-2deg);
	width: 1.65em;
}

.slug { background-color: var(--conker); }
.slug div {
	background: var(--raspberry-jam);
	border-radius: 1em 0.12em; 
	height: 0.6em; 
	left: 0.4em;
	top: 0.9em;
	transform:
		rotate(-6deg);
	width: 1.3em;
}
.slug div::before {
	background-image:
		repeating-radial-gradient(
			circle at 0.2em -0.02em,
			var(--trans) 0 0.2em,
			var(--raspberry-jam) 0.21em 0.5em,
			var(--trans) 0.51em 3em);
	background-position: 0.15em;
	background-size: 0.4em 0.8em;
	border-right: 0.05em solid var(--raspberry-jam);
	border-top: 0.15em solid var(--trans);
	border-radius: 4em;
	height: 0.5em;
	left: 0.69em;
	top: -0.3em;
	transform: 
		rotate(-25deg);
	width: 0.55em;
}
.slug div::after {
	background-image:
		repeating-radial-gradient(
			circle at 0.1em 0.21em,
			var(--raspberry-jam) 0 0.04em,
			var(--trans) 0.05em 3em),
		repeating-radial-gradient(
			circle at 0.45em 0.26em,
			var(--raspberry-jam) 0 0.04em,
			var(--trans) 0.05em 3em);
	height: 0.6em;
	left: 0.64em;
	top: -1.2em;
	transform: 
		rotate(-25deg);
	width: 0.6em;
}

.moth { background-color: var(--mink); }
.moth div {
	background-image:
		repeating-radial-gradient(
			circle at 0.02em 0.02em,
			var(--clay) 0 0.22em,
			var(--trans) 0.37em 3em),
		repeating-radial-gradient(
			circle at -0.2em 0.4em,
			var(--latte) 0 0.67em,
			var(--clay) 0.68em 0.7em,
			var(--trans) 0.71em 2em),
		repeating-radial-gradient(
			circle at 0.6em -0.3em,
			var(--latte) 0 0.67em,
			var(--clay) 0.68em 0.7em,
			var(--trans) 0.71em 2em);
	border-radius: 0.2em; 
	height: 1.1em; 
	left: 0.5em; 
	top: 0.92em;
	transform: 
		rotate(55deg)
		skew(40deg);
	width: 1.2em;
}
.moth div::before {
	background-image:
		repeating-radial-gradient(
			circle at 0.09em 0.07em,
			var(--trans) 0 0.16em,
			var(--clay) 0.17em 0.21em,
			var(--trans) 0.22em 3em);
	left: -0.16em;
	height: 1em;
	top: -0.12em;
	transform: 
		skew(-10deg)
		translateZ(-1em);
	width: 1em;
}

.songbird-eggs { background-color: var(--clay); }
.songbird-eggs div,
.songbird-eggs div::before,
.songbird-eggs div::after {
  background-image:
    radial-gradient(
      var(--robins-egg),
      var(--slate)); 
	border-radius: 1em/0.76em; 
	height: 0.5em; 
	left: 0.75em;
	top: 1em;
	transform: rotate(-10deg);
	width: 0.67em;
}
.songbird-eggs div::before {
	left: 0.24em;
	top: -0.3em;
	transform:
		rotate(50deg)
		translateZ(-1em);
}
.songbird-eggs div::after {
	left: -0.25em;
	top: -0.75em;
	transform:
		rotate(130deg)
		translateZ(-1em);
}

.caterpillar { background-color: var(--forest); }
.caterpillar div {
	background-image:
		repeating-radial-gradient(
			circle at 1.3em 0.9em,
			var(--grassy) 0 0.18em,
			var(--trans) 0.19em 2em),
		repeating-radial-gradient(
			circle at 1.15em 1.05em,
			var(--bud) 0 0.18em,
			var(--trans) 0.19em 2em),
		
		repeating-radial-gradient(
			circle at 1.25em 1.2em,
			var(--bud) 0 0.07em,
			var(--trans) 0.08em 2em),
		repeating-radial-gradient(
			circle at 1.07em 1.22em,
			var(--bud) 0 0.07em,
			var(--trans) 0.08em 2em),
		
		repeating-radial-gradient(
			circle at 0.98em 1.02em,
			var(--grassy) 0 0.18em,
			var(--trans) 0.19em 2em),
		repeating-radial-gradient(
			circle at 0.88em 0.86em,
			var(--bud) 0 0.18em,
			var(--trans) 0.19em 2em),
		repeating-radial-gradient(
			circle at 0.8em 0.7em,
			var(--grassy) 0 0.18em,
			var(--trans) 0.19em 2em),
		repeating-radial-gradient(
			circle at 0.65em 0.71em,
			var(--bud) 0 0.18em,
			var(--trans) 0.19em 2em),
		repeating-radial-gradient(
			circle at 0.53em 0.83em,
			var(--grassy) 0 0.18em,
			var(--trans) 0.19em 2em),
		repeating-radial-gradient(
			circle at 0.43em 0.96em,
			var(--bud) 0 0.18em,
			var(--trans) 0.19em 2em),
		
		repeating-radial-gradient(
			circle at 0.47em 1.13em,
			var(--bud) 0 0.07em,
			var(--trans) 0.08em 2em),
		repeating-radial-gradient(
			circle at 0.32em 1.08em,
			var(--bud) 0 0.07em,
			var(--trans) 0.08em 2em),
		
		repeating-radial-gradient(
			circle at 0.3em 0.89em,
			var(--grassy) 0 0.15em,
			var(--trans) 0.16em 2em);
	border-radius: 2em/1.5em; 
	height: 1.6em; 
	left: 0.2em; 
	top: 0.2em;
	width: 1.6em;
}

.gnat { background-color: var(--bronze); }
.gnat div {
	background: var(--iron);
	border-radius: 1em/0.8em; 
	height: 0.4em; 
	left: 0.9em;
	top: 0.9em;
	transform: rotate(-10deg);
	width: 0.55em;
}
.gnat div::before,
.gnat div::after {
	background: var(--robins-egg);
	border-radius: 0.5em 1em 0.5em 0.5em; 
	height: 0.4em;
	left: 0.04em;
	opacity: 0.8;
	top: -0.3em;
	transform:
		rotate(-60deg)
		skew(-20deg, -15deg);
	width: 0.4em;
}
.gnat div::after {
	font-family: comic-sans;
	left: -0.05em;
	top: -0.68em;
	transform:
		rotate(-90deg)
		skew(-15deg, -20deg)
		translateZ(-1em);
}
              
            
!

JS

              
                
              
            
!
999px

Console