From 49182e08b0bbe42043adbbb092a91e53721f693d Mon Sep 17 00:00:00 2001
From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com>
Date: Sun, 27 Apr 2025 16:47:22 -0500
Subject: [PATCH] Edit postbox.css

---
 view/src/postbox.css | 957 +++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 914 insertions(+), 43 deletions(-)

diff --git a/view/src/postbox.css b/view/src/postbox.css
index 7e7fb87..d9275b5 100644
--- a/view/src/postbox.css
+++ b/view/src/postbox.css
@@ -24,52 +24,193 @@
 			[class^="postbox-"]:focus a {
 				text-decoration: underline;
 			}
-		/* Solid Color Backgrounds */
+			[class^="postbox-"]:hover,
+			[class^="postbox-"]:hover::before,
+			[class^="postbox-"]:hover::after,
+      		[class^="postbox-"]:active,
+      		[class^="postbox-"]:active::before,
+      		[class^="postbox-"]:active::after {
+				animation: none;
+			}
+		/* 	SOLID COLOR BACKGROUNDS 
+			=======================
+		*/
 		.postbox-black {
-			background-color: black;
+			background-color: #000000;
 			color: white;
 		}
-		.postbox-red {
-			background-color: rgb(226, 1, 59);
+		.postbox-cornflowerblue, .postbox-blue {
+			background-color: #6495ed;
 			color: white;
 		}
-		.postbox-green {
-			background-color: rgb(38, 146, 127);
+		.postbox-darkblue, .postbox-ocean {
+			background-color: #00008b;
 			color: white;
 		}
-		.postbox-blue {
-			background-color: rgb(32, 136, 175);
+		.postbox-darkgrey {
+			background-color: #a9a9a9;
+			color: #eeeeee;
+		}
+		.postbox-darkorange, .postbox-orange {
+			background-color: #ff8c00;
 			color: black;
 		}
-		.postbox-orange {
-			background-color: rgb(255, 99, 35);
+		.postbox-darkred {
+			background-color: #8b0000;
+			color: white;
+		}
+		.postbox-darkslateblue {
+			background-color: #483d8b;
+			color: white;
+		}
+		.postbox-forestgreen, .postbox-forest {
+			background-color: #228b22;
+			color: white;
+		}
+		.postbox-gold {
+			background-color: #ffd700;
+			color: black;
+		}
+		.postbox-goldenrod {
+			background-color: #daa520;
+			color: white;
+		}
+		.postbox-honeydew {
+			background-color: #f0fff0;
+			color: black;
+		}
+		.postbox-hotpink {
+			background-color: #ff69b4;
+			color: white;
+		}
+		.postbox-lavender {
+			background-color: #e6e6fa;
+			color: purple;
+		}
+		.postbox-lightpink {
+			background-color: #ffb6c1;
+			color: black;
+		}
+		.postbox-lightyellow {
+			background-color: #ffffe0;
+			color: black;
+		}
+		.postbox-limegreen, .postbox-green {
+			background-color: #32cd32;
+			color: white;
+		}
+		.postbox-lightsalmon, .postbox-salmon {
+			background-color: #ffa07a;
+			color: black;
+		}
+		.postbox-mediumaquamarine {
+			background-color: #66CDAA;
+			color: white;
+		}
+		.postbox-mediumslateblue {
+			background-color: #7b68ee;
+			color: white;
+		}
+		.postbox-mediumvioletred {
+			background-color: #c71585;
+			color: white;
+		}
+		.postbox-mintcream {
+			background-color: #f5fffa;
+			color: black;
+		}
+		.postbox-olivedrab {
+			background-color: #6b8e23;
+			color: white;
+		}
+		.postbox-palegreen {
+			background-color: #98fb98;
+			color: black;
+		}		
+		.postbox-peachpuff {
+			background-color: #ffdab9;
+			color: black;
+		}		
+		.postbox-pink {
+			background-color: #ffc0cb;
 			color: black;
 		}
 		.postbox-purple {
-			background-color: rgb(115, 33, 173);
+			background-color: #800080;
 			color: white;
 		}
-		.postbox-forest {
-			background-color: rgb(22, 83, 72);
+		.postbox-red {
+			background-color: #ff0000;
 			color: white;
 		}
-		.postbox-ocean {
-			background-color: rgb(36, 55, 98);
+		.postbox-seagreen {
+			background-color: #2e8b57;
 			color: white;
 		}
-		.postbox-pink {
-			background-color: rgb(243, 83, 105);
+		.postbox-sienna {
+			background-color: #a0522d;
+			color: white;
+		}
+		.postbox-skyblue {
+			background-color: #87ceeb;
 			color: black;
 		}
-		.postbox-salmon {
-			background-color: rgb(250, 128, 114);
+		.postbox-thistle {
+			background-color: #d8bfd8;
 			color: black;
 		}
-		/* Gradient Backgrounds */
-		.postbox-darkgray {
+		.postbox-violet {
+			background-color: #ee82ee;
+			color: lavender;
+		}
+		.postbox-whitesmoke {
+			background-color: #f5f5f5;
+			color: black;
+		}
+
+		.postbox-yellowgreen {
+			background-color: #9acd32;
+			color: white;
+		}
+		/*	GRADIENT BACKGROUNDS 
+			====================
+		*/
+		.postbox-aurora {
+			background-size: 100% 100%;
+			background-position: 0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px;
+			background-image: 
+			radial-gradient(18% 28% at 24% 50%, #CEFAFFFF 7%, #073AFF00 100%),
+			radial-gradient(18% 28% at 18% 71%, #FFFFFF59 6%, #073AFF00 100%),
+			radial-gradient(70% 53% at 36% 76%, #73F2FFFF 0%, #073AFF00 100%),
+			radial-gradient(42% 53% at 15% 94%, #FFFFFFFF 7%, #073AFF00 100%),
+			radial-gradient(42% 53% at 34% 72%, #FFFFFFFF 7%, #073AFF00 100%),
+			radial-gradient(18% 28% at 35% 87%, #FFFFFFFF 7%, #073AFF00 100%),
+			radial-gradient(31% 43% at 7% 98%, #FFFFFFFF 24%, #073AFF00 100%),
+			radial-gradient(21% 37% at 72% 23%, #D3FF6D9C 24%, #073AFF00 100%),
+			radial-gradient(35% 56% at 91% 74%, #8A4FFFF5 9%, #073AFF00 100%),
+			radial-gradient(74% 86% at 67% 38%, #6DFFAEF5 24%, #073AFF00 100%),
+			linear-gradient(125deg, #4EB5FFFF 1%, #4C00FCFF 100%);
+		}
+		.postbox-bluegray {
+			background-image:  linear-gradient(to right,  #94bbeb 0%,#dedede 100%);
+			color: black;
+		}
+		.postbox-graygrey, .postbox-darkgray {
 			background-image: linear-gradient(135deg, rgb(119, 125, 136), rgb(79, 87, 102));
 			color: white;
 		}
+		.postbox-grayblack {
+			background-image: linear-gradient(45deg, rgb(93, 99, 116), rgb(22, 24, 29));
+			color: white;
+		}
+		.postbox-greengray {
+			background-image: linear-gradient(to right,  #c8dbbd 0%,#dedede 100%);
+			color: black;
+		}
+		.postbox-lavendergray {
+			background-image: linear-gradient(to right,  #cfbfda 0%,#dedede 100%);
+			color: black;
+		}
 		.postbox-minty {
 			background-image: linear-gradient(135deg, rgb(143, 199, 173), rgb(72, 229, 169));
 			color: black;
@@ -78,43 +219,773 @@
 			background-image: linear-gradient(135deg, rgb(143, 199, 173), rgb(72, 229, 169));
 			color: black;
 		}
+		.postbox-rainbow {
+			background: linear-gradient(135deg,  #ff0000 0%,#f2af00 17%,#fff200 33%,#00e400 50%,#009cfe 69%,#935cf9 86%,#e40df2 100%);
+			color: white;
+  			text-shadow: 0 0 3px black, 3px 3px 3px black;
+		}
 		.postbox-redblue {
 			background-image: linear-gradient(45deg, rgb(255, 0, 71), rgb(44, 52, 199));
 			color: white;
+		}	
+		.postbox-sherbert, .postbox-sherbet {
+			background-image: linear-gradient(45deg,  #fcd6cd 6%,#f8bc44 25%,#fb7d88 44%,#fb7d88 64%,#fb7d88 64%,#fed640 100%);
+			color: black;
 		}
-		.postbox-violets {
-			background-image: linear-gradient(45deg, rgb(93, 63, 218), rgb(252, 54, 253));
+		.postbox-spectrum {
+			background: linear-gradient(to right,  darkred 0%,#ff0000 5%,#f2af00 17%,#fff200 33%,#00e400 50%,#009cfe 69%,#935cf9 86%,#e40df2 95%, darkmagenta 100%);
+			color: white;
+  			text-shadow: 0 0 3px black, 3px 3px 3px black;
+		}
+		.postbox-strawberrycream {
+			background: linear-gradient(to bottom,  #fff2cd 0%,#ffa0ac 20%,#fea1ac 20%,#ff84a3 28%,#fd4f8c 40%,#d91b65 79%,#d61a64 79%,#c11a5f 100%);
 			color: white;
 		}
-		.postbox-grayblack {
-			background-image: linear-gradient(45deg, rgb(93, 99, 116), rgb(22, 24, 29));
+		.postbox-sunset {
+			background-image: linear-gradient(to bottom,  #fecf41 0%,#fd7440 50%,#b623b1 100%);
 			color: white;
 		}
 		.postbox-tealblue {
 			background-image:  linear-gradient(to bottom,  #4bdfdf 0%,#207cca 50%,#19094a 100%);
 			color: white;
 		}
-		.postbox-greengray {
-			background-image: linear-gradient(to right,  #c8dbbd 0%,#dedede 100%);
-			color: black;
-		}
 		.postbox-tealgray {
 			background-image: linear-gradient(to right,  #8dcad0 0%,#dedede 100%);
 			color: black;
 		}
-		.postbox-bluegray {
-			background-image:  linear-gradient(to right,  #94bbeb 0%,#dedede 100%);
-			color: black;
-		}
-		.postbox-lavendergray {
-			background-image: linear-gradient(to right,  #cfbfda 0%,#dedede 100%);
-			color: black;
-		}
-		.postbox-sunset {
-			background-image: linear-gradient(to bottom,  #fecf41 0%,#fd7440 50%,#b623b1 100%);
+		.postbox-violets {
+			background-image: linear-gradient(45deg, rgb(93, 63, 218), rgb(252, 54, 253));
 			color: white;
 		}
-		.postbox-sherbert {
-			background-image: linear-gradient(45deg,  #fcd6cd 6%,#f8bc44 25%,#fb7d88 44%,#fb7d88 64%,#fb7d88 64%,#fed640 100%);
-			color: black;
-		}
\ No newline at end of file
+		.postbox-violetblue {
+			background: linear-gradient(to bottom,  #cc258f 0%,#9643b5 25%,#626cdd 48%,#629aed 71%,#80ebff 100%);
+			color: white;
+		}
+		/*	PATTERN BACKGROUNDS 
+			===================
+		*/
+		.postbox-blueprint {
+			background-color: blue;
+			background-image:  
+			linear-gradient(lightblue 2px, transparent 2px), 
+			linear-gradient(90deg, lightblue 2px, transparent 2px), 
+			linear-gradient(lightblue 1px, transparent 1px), 
+			linear-gradient(90deg, lightblue 1px, transparent 1px);
+			background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
+			background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
+			color: white;
+			position: relative;
+			z-index: 0;
+			font-family: 'Bradley Hand', 'Comic-Sans MS', sans-serif !important;
+			text-shadow: -2px 2px 2px midnightblue, 2px 2px 2px blue, 0 0 20px blue;
+			box-shadow: inset 0 50px 100px black;
+		}
+		.postbox-birds {
+			background: 
+				  radial-gradient(calc(1.28*50px + 18.75px/2) at left 50% bottom calc(-.8*50px),#BCE4FE calc(100% - 18.75px),#FFFFFF calc(101% - 18.75px) 100%,#0000 101%) calc(2*50px) calc(-1*calc(1.5*50px + 18.75px)),
+				  radial-gradient(calc(1.28*50px + 18.75px/2) at left 50% bottom calc(-.8*50px),#FEE993 calc(100% - 18.75px),#FFFFFF calc(101% - 18.75px) 100%,#0000 101%) calc(-1*50px) calc(calc(1.5*50px + 18.75px)/-2),
+				  radial-gradient(calc(1.28*50px + 18.75px/2) at left 50% top    calc(-.8*50px),#FEE993 calc(100% - 18.75px),#FFFFFF calc(101% - 18.75px) 100%,#0000 101%) 0 calc(1.5*50px + 18.75px),
+				  radial-gradient(calc(1.28*50px + 18.75px/2) at left 50% top    calc(-.8*50px),#BCE4FE calc(100% - 18.75px),#FFFFFF calc(101% - 18.75px) 100%,#0000 101%) 50px calc(calc(1.5*50px + 18.75px)/ 2),
+				  linear-gradient(#BCE4FE 50%,#FEE993 0);
+			background-size: calc(4*50px) calc(1.5*50px + 18.75px);
+		}	
+		.postbox-checkered {
+			background-image: repeating-conic-gradient(#000000 0% 25%, #AD0505 0% 50%);
+			background-position: 0 0, 32px 32px;
+			background-size: 64px 64px;
+			background-color: #AD0505;	
+			color: white;
+		}
+		.postbox-cubes {
+			background-image:  linear-gradient(30deg, #B6AEE5 12%, transparent 12.5%, transparent 87%, #B6AEE5 87.5%, #B6AEE5), linear-gradient(150deg, #B6AEE5 12%, transparent 12.5%, transparent 87%, #B6AEE5 87.5%, #B6AEE5), linear-gradient(30deg, #B6AEE5 12%, transparent 12.5%, transparent 87%, #B6AEE5 87.5%, #B6AEE5), linear-gradient(150deg, #B6AEE5 12%, transparent 12.5%, transparent 87%, #B6AEE5 87.5%, #B6AEE5), linear-gradient(60deg, #B6AEE580 25%, transparent 25.5%, transparent 75%, #B6AEE580 75%, #B6AEE580), linear-gradient(60deg, #B6AEE580 25%, transparent 25.5%, transparent 75%, #B6AEE580 75%, #B6AEE580);
+			background-size: 100px 175px;
+			background-position: 0 0, 0 0, 50px 87.5px, 50px 87.5px, 0 0, 50px 87.5px;
+			background-color: #E4E4ED;
+			text-shadow: -1px -1px 2px white, 1px 1px 2px white;
+		}
+
+		.postbox-lemonlime {
+			background: 
+				  radial-gradient(calc(1.28 * 42px + 10.5px/2) at top 50% right calc(-.8*42px), #E5E500 calc(99.5% - 10.5px),#FFFFFF calc(101% - 10.5px) 99.5%,#0000 101%) calc(-1*calc(1.8 * 42px + 10.5px)) 42px,
+				  radial-gradient(calc(1.28 * 42px + 10.5px/2) at top 50% left calc(-.8*42px), #04E164 calc(99.5% - 10.5px),#FFFFFF calc(101% - 10.5px) 99.5%,#0000 101%) calc(1.8 * 42px + 10.5px)  calc(-1*42px),
+				  radial-gradient(calc(1.28 * 42px + 10.5px/2) at top 50% right calc(-.8*42px), #04E164 calc(99.5% - 10.5px),#FFFFFF calc(101% - 10.5px) 99.5%,#0000 101%) calc(calc(1.8 * 42px + 10.5px)/-2) calc(-1*42px),
+				  radial-gradient(calc(1.28 * 42px + 10.5px/2) at top 50% left calc(-.8*42px), #E5E500 calc(99.5% - 10.5px),#FFFFFF calc(101% - 10.5px) 99.5%,#0000 101%) calc(calc(1.8 * 42px + 10.5px)/ 2) 42px,
+				  linear-gradient(90deg, #E5E500 50%, #04E164 0);
+			background-size: calc(1.8 * 42px + 10.5px) 168px;
+			text-shadow: 1px 1px 5px white, -1px -1px 5px white;
+			font-size: 52px !important;
+			font-size: 42px !important;
+		}
+		.postbox-gingham {
+			background-image: linear-gradient(0deg, rgba(226, 9, 4, 0.6) 0% 25%, rgba(251, 248, 239, 0.6) 25% 75%, rgba(226, 9, 4, 0.6) 75% 100%), linear-gradient(90deg, rgba(226, 9, 4, 0.6) 0% 25%, rgba(251, 248, 239, 0.6) 25% 75%, rgba(226, 9, 4, 0.6) 75% 100% ); 
+			background-size: 64px 64px,64px 64px;
+			color: white;
+			text-shadow: 0 0 2px black, 3px 3px 5px black;
+		}
+		.postbox-grid {
+			background-image: linear-gradient(#027816 2px, transparent 2px), linear-gradient(to right, #027816 2px, transparent 2px);
+			background-size: 24px 24px;
+			background-color: #000000;
+			color: lime;
+			text-shadow: 0 0 3px black, 3px 3px 5px black, -3px -3px 5px black;
+		}
+		.postbox-hearts {
+			background:
+				  radial-gradient(at 80% 80%,#FF6969 25.4%,#0000 26%),
+				  radial-gradient(at 20% 80%,#FF6969 25.4%,#0000 26%),
+				  conic-gradient(from -45deg at 50% 41%,#FF6969 90deg,#FFACAC 0) 
+					21px 0;
+			background-size: 42px 42px;
+				color: white;
+				font-size: 42px !important;
+				text-shadow: 2px 2px 3px darkred;
+		}
+		.postbox-honeycomb {
+			background:
+				  radial-gradient(circle farthest-side at 0% 50%,#FBEB00 23.5%,#0000 0)33.6px 48px,
+				  radial-gradient(circle farthest-side at 0% 50%,#EDBE03 24%,#0000 0)30.4px 48px,
+				  linear-gradient(#FBEB00 14%,#0000 0, #0000 85%,#FBEB00 0)0 0,
+				  linear-gradient(150deg,#FBEB00 24%,#EDBE03 0,#EDBE03 26%,#0000 0,#0000 74%,#EDBE03 0,#EDBE03 76%,#FBEB00 0)0 0,
+				  linear-gradient(30deg,#FBEB00 24%,#EDBE03 0,#EDBE03 26%,#0000 0,#0000 74%,#EDBE03 0,#EDBE03 76%,#FBEB00 0)0 0,
+				  linear-gradient(90deg,#EDBE03 2%,#FBEB00 0,#FBEB00 98%,#EDBE03 0%)0 0 #FBEB00;
+			background-size: 64px 96px;
+			background-color: #FBEB00;
+		}
+		.postbox-notebook {
+			 background: linear-gradient(to right, transparent 10%, #f7c1c1 10% 10.2%, transparent 10.5%), repeating-linear-gradient(#ebf8e1a2 10%, #b5def0 10%, #b5def0 10.2%, #ebf8e1a2 11%, #ebf8e1a2 18.5%);
+			 background-color: #ebf8e1;
+  			 background-size: 100% 25px, 100% 100%;
+  			 background-repeat: repeat-y, repeat;
+  			 font-family: 'Bradley Hand', 'Comic-Sans MS', sans-serif !important;
+  			 color: #333;
+		}
+		.postbox-plaid {
+			background: repeating-linear-gradient(transparent, transparent 8px, #A19100 8px, #A19100 12px, transparent 12px, transparent 16px, #A19100 12px, #A19100 32px, transparent 32px, transparent 36px, #A19100 36px, #A19100 40px, transparent 40px, transparent 64px), repeating-linear-gradient(90deg, transparent, transparent 8px, #A19100 8px, #A19100 12px, transparent 12px, transparent 16px, #A19100 12px, #A19100 32px, transparent 32px, transparent 36px, #A19100 36px, #A19100 40px, transparent 40px, transparent 64px), #A50000;
+			background-blend-mode: multiply;
+			background-color: #A50000;
+			color: white;
+			text-shadow: 0 0 2px black, 3px 3px 5px black;
+		}
+		.postbox-polkadots {
+			background-image: radial-gradient(#87D9E5 2px, transparent 2px), radial-gradient(#87D9E5 2px, transparent 2px);
+			background-size: 32px 32px;
+			background-position: 0 0, 16px 16px;
+			background-color: #1A8FE5;
+			color: white;
+			text-shadow: 3px 3px 5px darkblue;
+		}
+		.postbox-shadedots {
+			background:
+				  conic-gradient(#0CBEFE 25%,#0000 0) 0 0/calc(2*50px) calc(50px/9.5),
+				  conic-gradient(#0CBEFE 25%,#0000 0) 0 0/calc(50px/9.5) calc(2*50px),
+				  repeating-conic-gradient(#0000 0 25%,#0CBEFE 0 50%) 
+				   50px 0 /calc(2*50px) calc(2*50px),
+				  radial-gradient(50% 50%,#1872A2 98%,#0CBEFE) 
+				   0 0/50px 50px;
+			color: white;
+			text-shadow: 3px 3px 3px darkblue;
+		}
+		.postbox-shadowbox {
+			background-image:  radial-gradient(rgba(0,0,0,.2) 5px, transparent 2px), radial-gradient(ellipse at center, #969faa 0%,#6d7782 35%,#6c7680 35%,#28343b 99%);
+			background-size: 40px 40px, 100% 100%;
+			font-family: Impact, sans-serif !important;
+			text-transform: uppercase;
+			font-size: 42px !important;
+			line-height: 52px !important;
+			color: #ddd;
+			text-shadow: 0px 5px 2px rgba(0,0,0,.5), 0px -1px 0px white;
+		}
+		.postbox-stars {
+			background:
+				  conic-gradient(from 162deg at calc(42px * .5)  calc(42px * .68), #0D4975 36deg, #0000 0),
+				  conic-gradient(from 18deg  at calc(42px * .19) calc(42px * .59), #0D4975 36deg, #0000 0),
+				  conic-gradient(from 306deg at calc(42px * .81) calc(42px * .59), #0D4975 36deg, #0000 0),
+				  #000000;
+			background-position: 0 calc(42px * 0.35);
+			background-size: calc(42px + 1.7px) calc(42px + 1.7px);
+			color: white;
+		}
+		.postbox-warpgrid {
+			background: 
+				  radial-gradient(farthest-side at -33.33% 50%,#0000 52%,#027816 54% 57%,#0000 59%) 0 calc(128px/2),
+				  radial-gradient(farthest-side at 50% 133.33%,#0000 52%,#027816 54% 57%,#0000 59%) calc(128px/2) 0,
+				  radial-gradient(farthest-side at 133.33% 50%,#0000 52%,#027816 54% 57%,#0000 59%),
+				  radial-gradient(farthest-side at 50% -33.33%,#0000 52%,#027816 54% 57%,#0000 59%),
+				  #000000;
+			background-size: calc(128px/4.667) 128px,128px calc(128px/4.667);
+				color: lime;
+				text-shadow: 0 0 3px black, 3px 3px 5px black, -3px -3px 5px black;
+		}
+		.postbox-wavy {
+			background: radial-gradient(at bottom right, #57D2FF 0, #57D2FF 12.5px, #57D2FF33 12.5px, #57D2FF33 25px, #57D2FFBF 25px, #57D2FFBF 37.5px, #57D2FF40 37.5px, #57D2FF40 50px, #57D2FF4D 50px, #57D2FF4D 62.5px, #57D2FFBF 62.5px, #57D2FFBF 75px, #57D2FF33 75px, #57D2FF33 87.5px, transparent 87.5px, transparent 100px), radial-gradient(at top left, transparent 0, transparent 12.5px, #57D2FF33 12.5px, #57D2FF33 25px, #57D2FFBF 25px, #57D2FFBF 37.5px, #57D2FF4D 37.5px, #57D2FF4D 50px, #57D2FF40 50px, #57D2FF40 62.5px, #57D2FFBF 62.5px, #57D2FFBF 75px, #57D2FF33 75px, #57D2FF33 87.5px, #57D2FF 87.5px, #57D2FF 100px, transparent 100px, transparent 250px);
+			background-blend-mode: multiply;
+			background-size: 100px 100px, 100px 100px;
+			background-color: #E4E4ED;		
+			color: darkblue;
+		}
+
+		/* ANIMATED */
+		
+		.postbox-anigradient {
+		  width: 100%;
+		  height: 100vh;
+		  display: flex;
+		  align-items: center;
+		  justify-content: center;
+		  background-size: 300% 300%;
+		  background-image: linear-gradient(-45deg, yellow 0%, yellow 25%, yellow 51%, #ff357f 100%);
+		  -webkit-animation: anigrad 20s ease infinite;
+				  animation: anigrad 20s ease infinite;
+		}
+		@-webkit-keyframes anigrad {
+		 0% {
+			background-position: 0% 50%;
+		  }
+		  50% {
+			background-position: 100% 50%;
+		  }
+		  100% {
+			background-position: 0% 50%;
+		  }
+		}
+		@keyframes anigrad {
+		  0% {
+			background-position: 0% 50%;
+		  }
+		  50% {
+			background-position: 100% 50%;
+		  }
+		  100% {
+			background-position: 0% 50%;
+		  }
+		}
+		
+		.postbox-blob {
+			position: relative;
+			overflow: hidden;
+			background: red;
+			z-index: 0;
+			color: white;
+		}
+		.postbox-blob::before {
+		  position: absolute;
+		  content: "";
+		  left: 50%;
+		  top: -5%;
+		  width: 90%;
+		  height: 120%;
+		  margin-left: -45%;
+		  background: rgba(120, 60, 240, 0.35);
+		  box-shadow: inset 0 0 50px rgb(120,60,240);
+		  border-radius: 62% 47% 82% 35% / 45% 45% 80% 66%;
+		  will-change: border-radius, transform, opacity;
+		  display: block;
+		  z-index: -1;
+		  animation: blobby 5s linear infinite;
+		}
+		@keyframes blobby {
+		  0%,100%{
+		  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
+			transform: translate3d(0,0,0) rotateZ(0.01deg);
+		  }
+		  34%{
+			  border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
+			transform:  translate3d(0,5px,0) rotateZ(0.01deg);
+		  }
+		  50%{
+			transform: translate3d(0,0,0) rotateZ(0.01deg);
+		  }
+		  67%{
+			border-radius: 100% 60% 60% 100% / 100% 100% 60% 60% ;
+			transform: translate3d(0,-3px,0) rotateZ(0.01deg);
+		  }
+		}
+
+		.postbox-colorfade {
+			background: #33CCCC; /* Fallback */
+			animation: colorfade 9s infinite linear;
+		}
+		@keyframes colorfade {
+			0%   { background: #33CCCC; }
+			20%  { background: #33CC36; }
+			40%  { background: #B8CC33; }
+			60%  { background: #FCCA00; }
+			80%  { background: #33CC36; }
+			100% { background: #33CCCC; }
+		}
+
+		.postbox-gridrunner {
+			background-image: linear-gradient(rgb(93, 63, 218), rgb(252, 54, 253));
+			z-index: 0;
+			position: relative;
+			transform: perspective;
+			overflow: hidden;
+			color: white;
+		}
+		.postbox-gridrunner::after{
+			content: '';
+			background-image: 
+				linear-gradient(blue 2px, transparent 2px), 
+				linear-gradient(to right,blue 2px, transparent 2px);
+			background-size: 24px 24px;
+			background-color: transparent;
+			color: lime;
+			text-shadow: 0 0 3px black, 3px 3px 5px black, -3px -3px 5px black;
+			display: block;
+			-webkit-transform: perspective(300px) rotate3d(0,1,.5,3.142rad);
+			transform: perspective(300px) rotate3d(0,1,.5,3.142rad);
+			z-index: -1;
+			position: absolute;
+			bottom: 0;
+			height: 100%;
+			width: 100%;
+			left: 0;
+			background-position: 0px 100px;
+		  animation: gridrun 120s linear infinite;
+		}
+		@keyframes gridrun {
+			from {
+				background-position: 0px 100px;
+			}
+			to {
+				background-position: 0px 10000px;
+			}
+		}
+		
+		.postbox-heartbeat {
+			position: relative;
+			overflow: hidden;
+			z-index: 0;
+			background-color: hotpink;
+			color: white;
+		}
+		.postbox-heartbeat::after {
+			content: '';
+			display: block;
+			position: absolute;
+			left: 50%;
+			top: 50%;
+			width: 24px;
+			height: 24px;
+			margin: -12px 0 0 -12px;
+			background: red;
+			-webkit-clip-path: path("M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 10 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z");
+			clip-path: path("M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z");
+			transform: scale(5);
+			box-shadow: inset 0 0 10px darkred;
+			z-index: -1;
+			animation: heartbeat 5s ease-in-out infinite;
+		}
+		@keyframes heartbeat {
+			0% {
+				transform: scale(5);
+			}
+			50% {
+				transform: scale(8);
+			}
+			100% {
+				transform: scale(5);
+			}
+		}
+
+		.postbox-moonrise {
+			background: url('../images/stars.svg');
+			background-color: black;
+			background-repeat: repeat;
+			background-position: 0px 100%;
+			background-size: 200px 200px;
+			position: relative;
+			z-index: 0;
+			overflow: hidden;
+			color: yellow;
+			text-shadow: 0 0 3px blue;
+			animation: moonrise 20s linear infinite;
+		}
+			.postbox-moonrise::before {
+				 content: '';
+				animation: moonrise1 20s linear infinite;
+				animation-delay: 0s;
+				display: block;
+				width: 100px;
+				height: 100px;
+				background-color: transparent;
+				position: absolute;
+				bottom: 75%;
+				left: 75%;
+				margin-left: -50px;
+				 z-index: -1;
+				 border-radius: 100%;
+				 box-shadow: 20px 20px 0px #eee;
+			}
+			.postbox-moonrise::after {
+				animation: moonrise2 20s linear infinite;
+				content: '';
+				display: block;
+				width: 150%;
+				height: 25%;
+				bottom: -12%;
+				position: absolute;
+				background-color: #333;
+				left: -25%;
+				z-index: -1;
+				border-radius: 100%;
+				box-shadow: 0 -50px 200px #8589bf;
+			}
+			@keyframes moonrise {
+				0% {
+					background-color: midnightblue;
+					background-position: 0px 100%;
+				}
+				100% {
+					background-color: black;
+					background-position: 100px 0%;
+				}
+			}
+			@keyframes moonrise1 {
+				0% {
+					bottom: -25%;
+					left: 5%;
+				}
+				100% {
+					bottom: 100%;
+					left: 75%;
+				}
+			}
+			@keyframes moonrise2 {
+				0% {
+					background-color: darkgreen;
+				}
+				50% {
+					background-color: #01530e;
+				}
+				100% {
+					background-color: #333;
+				}
+			}
+
+		.postbox-rainy {
+		  position: relative;
+		  color: white;
+		  background: none;
+		  background-color: black;
+		  background-image: url("../images/rain.svg"), url("../images/rain.svg");
+		  background-size: 500px 500px, 250px 250px;
+		  -webkit-animation: rainy 5s linear infinite;
+		  -moz-animation: rainy 5s linear infinite;
+		  -o-animation: rainy 5s linear infinite;
+		  -ms-animation: rainy 5s linear infinite;
+		  animation: rainy 5s linear infinite;
+			overflow: hidden;
+			z-index: 0;
+		}
+			.postbox-rainy::after {
+				content: '';
+				display: block;
+				height: 100%;
+				width: 100%;
+				position: absolute;
+				top: 0; left: 0;
+				z-index: 1;
+				background-image: url("../images/rain.svg");
+				background-size: 900px 900px;
+				background-position: top left;
+				-webkit-animation: rainy 5s linear infinite;
+				-moz-animation: rainy 5s linear infinite;
+				-o-animation: rainy 5s linear infinite;
+				-ms-animation: rainy 5s linear infinite;
+				animation: rainy 5s linear infinite;		 
+			}
+			.postbox-rainy:hover::after,
+			.postbox-rainy:active::after {
+				z-index: -1;
+			}
+		@-moz-keyframes rainy {
+		  0% {
+			background-position: 0px 0px, 0px 0px;
+		  }
+		  75% {
+			background-position: 0px 750px, 0px 600px;
+		  }
+		  100% {
+			background-position: 0px 1000px, 0px 800px;
+		  }
+		}
+		@-webkit-keyframes rainy {
+		  0% {
+			background-position: 0px 0px, 0px 0px;
+		  }
+		  75% {
+			background-position: 0px 750px, 0px 600px;
+		  }
+		  100% {
+			background-position: 0px 1000px, 0px 800px;
+		  }
+		}
+		@-o-keyframes rainy {
+		  0% {
+			background-position: 0px 0px, 0px 0px;
+		  }
+		  75% {
+			background-position: 0px 750px, 0px 600px;
+		  }
+		  100% {
+			background-position: 0px 1000px, 0px 800px;
+		  }
+		}
+		@keyframes rainy {
+		  0% {
+			background-position: 0px 0px, 0px 0px;
+		  }
+		  75% {
+			background-position: 0px 750px, 0px 600px;
+		  }
+		  100% {
+			background-position: 0px 1000px, 0px 800px;
+		  }
+		}
+
+		.postbox-rocket {
+			color: white;
+			position: relative;
+			z-index: 0;
+		  background: url("../images/stars.svg"),url("../images/stars.svg");
+		  background-color:black;
+			background-size: 200px, 400px;
+			background-position: 0px 0px, 100px 100px;
+			animation: starfield 100s linear infinite;
+			overflow: hidden;
+		}
+		.postbox-rocket::before {
+			content: '';
+			display: block;
+			position: absolute;
+			height: 100%;
+			width: 100%;
+			top: 0; left: 0;
+			background: url("../images/rocketship.svg");
+			background-position: center center;
+			background-size: contain;
+			background-repeat: no-repeat;
+			animation: rocket 15s linear infinite;
+			z-index: -1;
+		}
+		@keyframes starfield {
+			from {
+				background-position: 0px 0px, 100px 100px;
+			}
+			to {
+				background-position: -1000px 1000px, -10000px 10000px; 
+			}
+		}
+		@keyframes rocket {
+			0% {
+				transform: rotate(0deg);
+				z-index: 1;
+			}
+			50% {
+				z-index: 1;
+			}
+			51% {
+				z-index: -1;
+			}
+		  100% {
+			 transform: rotate(360deg);
+			 z-index: -1;
+			}
+		}
+		
+		.postbox-snowy {
+		  color: white;
+		  position: relative;
+		  background: none;
+		  background-color: darkblue;
+		  background-image: url("../images/snow.svg"),url("../images/snow.svg");
+		  background-size: 500px 500px, 250px 250px, 125px 125px;
+		  -webkit-animation: snowy 9s linear infinite;
+		  -moz-animation: snowy 9s linear infinite;
+		  -o-animation: snowy 9s linear infinite;
+		  -ms-animation: snowy 9s linear infinite;
+		  animation: snowy 9s linear infinite;
+		}
+		@-moz-keyframes snowy {
+		  0% {
+			background-position: 0px 0px, 0px 0px, 0px 0px;
+		  }
+		  75% {
+			background-position: 325px 750px, 275px 600px, -5px 150px;
+		  }
+		  100% {
+			background-position: 500px 1000px, 400px 800px, 0px 300px;
+		  }
+		}
+		@-webkit-keyframes snowy {
+		  0% {
+			background-position: 0px 0px, 0px 0px, 0px 0px;
+		  }
+		  75% {
+			background-position: 325px 750px, 275px 600px, -5px 150px;
+		  }
+		  100% {
+			background-position: 500px 1000px, 400px 800px, 0px 300px;
+		  }
+		}
+		@-o-keyframes snowy {
+		  0% {
+			background-position: 0px 0px, 0px 0px, 0px 0px;
+		  }
+		  75% {
+			background-position: 325px 750px, 275px 600px, -5px 150px;
+		  }
+		  100% {
+			background-position: 500px 1000px, 400px 800px, 0px 300px;
+		  }
+		}
+		@keyframes snowy {
+		  0% {
+			background-position: 0px 0px, 0px 0px, 0px 0px;
+		  }
+		  75% {
+			background-position: 325px 750px, 275px 600px, -5px 150px;
+		  }
+		  100% {
+			background-position: 500px 1000px, 400px 800px, 0px 300px;
+		  }
+		}
+
+		.postbox-sunrise {
+			background: lightblue;
+			position: relative;
+			z-index: 0;
+			overflow: hidden;
+			color: white;
+			text-shadow: 0 0 3px black;
+		}
+			.postbox-sunrise::before {
+				 content: '';
+				animation: sunrise 30s linear infinite;
+				animation-delay: 0s;
+				display: block;
+				width: 200px;
+				height: 200px;
+				background-color: white;
+				position: absolute;
+				bottom: -25%;
+				left: 50%;
+				margin-left: -100px;
+				 z-index: -1;
+				 border-radius: 100%;
+				 box-shadow: 0 0 20px white;
+			}
+			.postbox-sunrise::after {
+				animation: sunrise2 30s linear infinite;
+				content: '';
+				display: block;
+				width: 150%;
+				height: 25%;
+				bottom: -12%;
+				position: absolute;
+				background-color: green;
+				left: -25%;
+				z-index: -1;
+				border-radius: 100%;
+				box-shadow: 0 -50px 400px orange, 0 -100px 300px yellow;
+			}
+		@keyframes sunrise {
+			0% {
+				bottom: -50%;
+				background-color: gold;
+				box-shadow: 0 0 20px gold;
+			}
+			50% {
+				background-color: yellow;
+				box-shadow: 0 0 20px yellow;
+			}
+			100% {
+				bottom: 100%;
+				background-color: white;
+				box-shadow: 0 0 20px white;
+			}
+		}
+		@keyframes sunrise2 {
+			0% {
+				background-color: darkgreen;
+				box-shadow: 0 -50px 400px red, 0 -100px 300px orange;
+			}
+			50% {
+				background-color: green;
+				box-shadow: 0 -50px 300px orange, 0 -100px 200px yellow;
+			}
+			100% {
+				background-color: lightgreen;
+				box-shadow: 0 -50px 200px white, 0 -100px 100px lightblue;
+			}
+		}
+
+		.postbox-waves {
+			position: relative;
+			background: url('../images/wave.svg'), url('../images/wave.svg');
+			background-size: 100% 15%, 100% 20%;
+			background-color: #3586ff;
+			background-position: 0px 100%, 500px 100%;
+			background-repeat: repeat-x;
+			animation: wave 30s linear infinite;
+			animation-delay: 5s;
+			z-index: 0;
+			color: white;
+			overflow: hidden;
+		}
+			.postbox-waves::before, .postbox-waves::after {
+				content: '';
+				position: absolute;
+				left: 0;
+				bottom: 0;
+				width: 100%;
+				height: 20%;
+				display: block;
+				z-index: -1;
+				background: url('../images/wave.svg');
+				background-repeat: repeat-x;
+				background-position: bottom left;
+				background-size: 100% 100%;
+			}
+			.postbox-waves::before {
+				animation: wave1 40s linear infinite;
+			}
+			.postbox-waves::after {
+				animation: wave2 60s linear infinite;
+				bottom: -20px;
+			}
+			@keyframes wave {
+				0% {
+					background-position: 0px 100%, 500px 100%;
+				}
+				100% {
+					background-position: 1000px 100%, -1000px 100%;
+				}
+			}
+			@keyframes wave1 {
+				0% {
+					background-position-x: 0px;
+					bottom: 0;
+				}
+				50% {
+					bottom: -20px;
+				}
+				100% {
+					background-position-x: 1000px;
+					bottom: 0px
+				}
+			}
+			@keyframes wave2 {
+				0% {
+					background-position-x: 0px;
+					bottom: -20px;
+				}
+				50% {
+					bottom: 0px;
+				}
+				100% {
+					background-position-x: -1000px;
+					bottom: -20px;
+				}
+			}
\ No newline at end of file