.outer {
	min-height:200px;
	padding:20px;
	display: grid;
	place-items: center;
	font-size:1.5em;
}

.words { margin:2px; display:inline-block; padding:20px; border-radius:100px; }

@media (min-width: 768px)
{
	/* sizes for big screens */
	.outer { font-size: 4em; }
}

.font_container {
	word-break: break-all;
}

.form-select:disabled {
	background:#999 !important;
}

.credit {
    background: #222;
    color: #ccc;
    padding: 5px;
    border-top: 1px solid #333;
    margin-bottom: 0px;
}

.zz {
	opacity: 0.9;
	z-index:0;
	border-radius:5px;
	padding:20px 20px 30px 20px;
	justify-content: center;
	align-items: center;
	-webkit-box-shadow: 10px 10px 19px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 10px 10px 19px 0px rgba(0,0,0,0.75);
	box-shadow: 10px 10px 19px 0px rgba(0,0,0,0.75);
}

.dd {
	border-radius:5px; box-shadow:0 .125rem 1rem rgb(27 40 50 / 4%),0 .125rem 2rem rgb(27 40 50 / 8%),0 0 0 .0625rem rgb(27 40 50 / 2%); opacity:.7; padding: 30px; background: #efefef;
}

.hidden { display:none; visibility:hidden; }

.font1 { font-family: 'Abel', sans-serif; }
.font2 { font-family: 'Abril Fatface', cursive; }
.font3 { font-family: 'Aclonica', sans-serif; }
.font5 { font-family: 'Adamina', serif; }
.font7 { font-family: 'Aladin', cursive; }
.font9 { font-family: 'Alice', serif; }
.font11 { font-family: 'Alike', serif; }
.font10 { font-family: 'Alike Angular', serif; }
.font13 { font-family: 'Allerta Stencil', sans-serif; }
.font15 { font-family: 'Amaranth', sans-serif; }
.font16 { font-family: 'Amatic SC', cursive; }
.font17 { font-family: 'Andada', serif; }
.font18 { font-family: 'Andika', sans-serif; }
.font21 { font-family: 'Antic', sans-serif; }
.font22 { font-family: 'Anton', sans-serif; }
.font23 { font-family: 'Arapey', serif; }
.font26 { font-family: 'Artifika', serif; }
.font31 { font-family: 'Aubrey', cursive; }
.font32 { font-family: 'Bangers', cursive; }
.font33 { font-family: 'Bentham', serif; }
.font34 { font-family: 'Bevan', serif; }
.font35 { font-family: 'Bigshot One', cursive; }
.font36 { font-family: 'Bitter', serif; }
.font37 { font-family: 'Black Ops One', cursive; }
.font39 { font-family: 'Bowlby One', sans-serif; }
.font38 { font-family: 'Bowlby One SC', sans-serif; }
.font40 { font-family: 'Brawler', serif; }
.font41 { font-family: 'Bubblegum Sans', cursive; }
.font43 { font-family: 'Butcherman Caps', cursive; }
.font44 { font-family: 'Cabin Condensed', sans-serif; }
.font45 { font-family: 'Cabin Sketch', cursive; }
.font47 { font-family: 'Cagliostro', sans-serif; }
.font49 { font-family: 'Candal', sans-serif; }
.font51 { font-family: 'Cardo', serif; }
.font53 { font-family: 'Carter One', sans-serif; }
.font54 { font-family: 'Caudex', serif; }
.font56 { font-family: 'Changa One', cursive; }
.font57 { font-family: 'Cherry Cream Soda', cursive; }
.font58 { font-family: 'Chewy', cursive; }
.font59 { font-family: 'Chicle', cursive; }
.font60 { font-family: 'Chivo', sans-serif; }
.font62 { font-family: 'Coda', cursive; }
.font63 { font-family: 'Comfortaa', cursive; }
.font65 { font-family: 'Contrail One', cursive; }
.font68 { font-family: 'Copse', serif; }
.font69 { font-family: 'Corben', cursive; }
.font71 { font-family: 'Coustard', serif; }
.font74 { font-family: 'Creepster Caps', cursive; }
.font75 { font-family: 'Crimson Text', serif; }
.font76 { font-family: 'Crushed', cursive; }
.font77 { font-family: 'Cuprum', sans-serif; }
.font79 { font-family: 'Dancing Script', cursive; }
.font81 { font-family: 'Days One', sans-serif; }
.font86 { font-family: 'Didact Gothic', sans-serif; }
.font91 { font-family: 'Droid Serif', serif; }
.font93 { font-family: 'Eater Caps', cursive; }
.font92 { font-family: 'EB Garamond', serif; }
.font94 { font-family: 'Expletus Sans', cursive; }
.font95 { font-family: 'Fanwood Text', serif; }
.font96 { font-family: 'Federant', cursive; }
.font97 { font-family: 'Federo', sans-serif; }
.font98 { font-family: 'Fjord One', serif; }
.font99 { font-family: 'Fondamento', cursive; }
.font101 { font-family: 'Forum', cursive; }
.font102 { font-family: 'Francois One', sans-serif; }
.font103 { font-family: 'Gentium Basic', serif; }
.font104 { font-family: 'Gentium Book Basic', serif; }
.font105 { font-family: 'Geo', sans-serif; }
.font112 { font-family: 'Goudy Bookletter 1911', serif; }
.font114 { font-family: 'Gruppo', sans-serif; }
.font115 { font-family: 'Hammersmith One', sans-serif; }
.font117 { font-family: 'Holtwood One SC', serif; }
.font124 { font-family: 'IM Fell English', serif; }
.font132 { font-family: 'Irish Grover', cursive; }
.font133 { font-family: 'Istok Web', sans-serif; }
.font134 { font-family: 'Jockey One', sans-serif; }
.font135 { font-family: 'Josefin Sans', sans-serif; }
.font136 { font-family: 'Josefin Slab', serif; }
.font137 { font-family: 'Judson', serif; }
.font142 { font-family: 'Kameron', serif; }
.font143 { font-family: 'Kelly Slab', cursive; }
.font144 { font-family: 'Kenia', sans-serif; }
.font145 { font-family: 'Knewave', cursive; }
.font147 { font-family: 'Kreon', serif; }
.font150 { font-family: 'Lancelot', cursive; }
.font151 { font-family: 'Lato', sans-serif; }
.font155 { font-family: 'Lemon', cursive; }
.font156 { font-family: 'Limelight', cursive; }
.font157 { font-family: 'Linden Hill', serif; }
.font159 { font-family: 'Lobster', cursive; }
.font158 { font-family: 'Lobster Two', cursive; }
.font160 { font-family: 'Lora', serif; }
.font161 { font-family: 'Love Ya Like A Sister', cursive; }
.font162 { font-family: 'Loved by the King', cursive; }
.font163 { font-family: 'Luckiest Guy', cursive; }
.font164 { font-family: 'Maiden Orange', cursive; }
.font165 { font-family: 'Mako', sans-serif; }
.font166 { font-family: 'Marck Script', cursive; }
.font167 { font-family: 'Marvel', sans-serif; }
.font169 { font-family: 'Mate', serif; }
.font168 { font-family: 'Mate SC', serif; }
.font170 { font-family: 'Maven Pro', sans-serif; }
.font172 { font-family: 'MedievalSharp', cursive; }
.font173 { font-family: 'Megrim', cursive; }
.font174 { font-family: 'Merienda One', cursive; }
.font175 { font-family: 'Merriweather', serif; }
.font176 { font-family: 'Metrophobic', sans-serif; }
.font177 { font-family: 'Michroma', sans-serif; }
.font179 { font-family: 'Miltonian', cursive; }
.font178 { font-family: 'Miltonian Tattoo', cursive; }
.font182 { font-family: 'Modern Antiqua', cursive; }
.font183 { font-family: 'Molengo', sans-serif; }
.font184 { font-family: 'Monofett', cursive; }
.font185 { font-family: 'Monoton', cursive; }
.font187 { font-family: 'Montez', cursive; }
.font188 { font-family: 'Mountains of Christmas', cursive; }
.font193 { font-family: 'Muli', sans-serif; }
.font194 { font-family: 'Neucha', cursive; }
.font195 { font-family: 'Neuton', serif; }
.font196 { font-family: 'News Cycle', sans-serif; }
.font197 { font-family: 'Niconne', cursive; }
.font198 { font-family: 'Nixie One', cursive; }
.font199 { font-family: 'Nobile', sans-serif; }
.font200 { font-family: 'Nosifer Caps', cursive; }
.font202 { font-family: 'Nova Cut', cursive; }
.font203 { font-family: 'Nova Flat', cursive; }
.font204 { font-family: 'Nova Mono', cursive; }
.font209 { font-family: 'Nova Square', cursive; }
.font210 { font-family: 'Numans', sans-serif; }
.font211 { font-family: 'Nunito', sans-serif; }
.font212 { font-family: 'Old Standard TT', serif; }
.font214 { font-family: 'Open Sans', sans-serif; }
.font215 { font-family: 'Orbitron', sans-serif; }
.font216 { font-family: 'Oswald', sans-serif; }
.font218 { font-family: 'Ovo', serif; }
.font225 { font-family: 'Passero One', cursive; }
.font226 { font-family: 'Patrick Hand', cursive; }
.font227 { font-family: 'Paytone One', sans-serif; }
.font229 { font-family: 'Petrona', serif; }
.font230 { font-family: 'Philosopher', sans-serif; }
.font231 { font-family: 'Piedra', cursive; }
.font233 { font-family: 'Play', sans-serif; }
.font234 { font-family: 'Playfair Display', serif; }
.font235 { font-family: 'Podkova', serif; }
.font236 { font-family: 'Poller One', cursive; }
.font237 { font-family: 'Poly', serif; }
.font238 { font-family: 'Pompiere', cursive; }
.font239 { font-family: 'Prata', serif; }
.font240 { font-family: 'Prociono', serif; }
.font221 { font-family: 'PT Sans', sans-serif; }
.font223 { font-family: 'PT Serif', serif; }
.font243 { font-family: 'Quattrocento', serif; }
.font242 { font-family: 'Quattrocento Sans', sans-serif; }
.font244 { font-family: 'Questrial', sans-serif; }
.font245 { font-family: 'Quicksand', sans-serif; }
.font246 { font-family: 'Radley', serif; }
.font247 { font-family: 'Raleway', cursive; }
.font248 { font-family: 'Rammetto One', cursive; }
.font249 { font-family: 'Rancho', cursive; }
.font250 { font-family: 'Rationale', sans-serif; }
.font251 { font-family: 'Redressed', cursive; }
.font254 { font-family: 'Ribeye', cursive; }
.font253 { font-family: 'Ribeye Marrow', cursive; }
.font255 { font-family: 'Righteous', cursive; }
.font256 { font-family: 'Rochester', cursive; }
.font258 { font-family: 'Rokkitt', serif; }
.font259 { font-family: 'Rosario', sans-serif; }
.font260 { font-family: 'Ruslan Display', cursive; }
.font261 { font-family: 'Salsa', cursive; }
.font262 { font-family: 'Sancreek', cursive; }
.font263 { font-family: 'Sansita One', cursive; }
.font269 { font-family: 'Sigmar One', sans-serif; }
.font271 { font-family: 'Signika', sans-serif; }
.font272 { font-family: 'Six Caps', sans-serif; }
.font273 { font-family: 'Slackey', cursive; }
.font274 { font-family: 'Smokum', cursive; }
.font275 { font-family: 'Smythe', cursive; }
.font276 { font-family: 'Sniglet', cursive; }
.font277 { font-family: 'Snippet', sans-serif; }
.font278 { font-family: 'Sorts Mill Goudy', serif; }
.font279 { font-family: 'Special Elite', cursive; }
.font280 { font-family: 'Spinnaker', sans-serif; }
.font282 { font-family: 'Stardos Stencil', cursive; }
.font283 { font-family: 'Sue Ellen Francisco', cursive; }
.font285 { font-family: 'Supermercado One', cursive; }
.font287 { font-family: 'Syncopate', sans-serif; }
.font289 { font-family: 'Tenor Sans', sans-serif; }
.font290 { font-family: 'Terminal Dosis', sans-serif; }
.font292 { font-family: 'Tienne', serif; }
.font293 { font-family: 'Tinos', serif; }
.font295 { font-family: 'Ubuntu Condensed', sans-serif; }
.font298 { font-family: 'Ultra', serif; }
.font302 { font-family: 'Unlock', cursive; }
.font303 { font-family: 'Unna', serif; }
.font306 { font-family: 'Varela', sans-serif; }
.font305 { font-family: 'Varela Round', sans-serif; }
.font307 { font-family: 'Vast Shadow', cursive; }
.font309 { font-family: 'Vidaloka', serif; }
.font310 { font-family: 'Volkhov', serif; }
.font311 { font-family: 'Vollkorn', serif; }
.font312 { font-family: 'Voltaire', sans-serif; }
.font304 { font-family: 'VT323', cursive; }
.font314 { font-family: 'Wallpoet', cursive; }
.font316 { font-family: 'Wire One', sans-serif; }
.font317 { font-family: 'Yanone Kaffeesatz', sans-serif; }
.font319 { font-family: 'Yeseva One', serif; }

.textinfo { background:#222; font-size:15px; color:#fff; padding:5px 5px 1px 5px; margin-top:0px; }
.textinfo a { text-decoration: underline; color: #AED6F1; }

.gradient-text { 
	background-color: red;
	background-size: 100%;
	background-repeat: repeat;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-moz-background-clip: text;
	-moz-text-fill-color: transparent; }

.microbial-mat { background:
radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px) 0px 10px,
radial-gradient(at 100% 100%,     rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px), #8a3;
background-size: 20px 20px; justify-content: center; align-items: center; display: flex; }
		
.arrows { background:
linear-gradient(45deg, #eee 45px, transparent 45px)64px 64px,
linear-gradient(45deg, #eee 45px, transparent 45px,transparent 91px, #fff 91px, #fff 135px, transparent 135px),
linear-gradient(-45deg, #eee 23px, transparent 23px, transparent 68px,#eee 68px,#eee 113px,transparent 113px,transparent 158px,#eee 158px);
background-color:#fff;
background-size: 128px 128px; justify-content: center; align-items: center; display: flex; }
		
.weave { background: 
linear-gradient(135deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px),
linear-gradient(225deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px)0 64px;
background-color:#708090;
background-size: 64px 128px; justify-content: center; align-items: center; display: flex; }

.rainbow-bokeh { background: 
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0,
linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%;
background-color: #840b2a; justify-content: center; align-items: center; display: flex; }

.carbon { background: 
linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background-color: #131313;
background-size: 20px 20px; justify-content: center; align-items: center; display: flex; }

.carbon-fibre { background: 
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px; justify-content: center; align-items: center; display: flex; }

.hearts { background: 
radial-gradient(circle closest-side at 60% 43%, #b03 26%, rgba(187,0,51,0) 27%),
radial-gradient(circle closest-side at 40% 43%, #b03 26%, rgba(187,0,51,0) 27%),
radial-gradient(circle closest-side at 40% 22%, #d35 45%, rgba(221,51,85,0) 46%),
radial-gradient(circle closest-side at 60% 22%, #d35 45%, rgba(221,51,85,0) 46%),
radial-gradient(circle closest-side at 50% 35%, #d35 30%, rgba(221,51,85,0) 31%),
radial-gradient(circle closest-side at 60% 43%, #b03 26%, rgba(187,0,51,0) 27%) 50px 50px,
radial-gradient(circle closest-side at 40% 43%, #b03 26%, rgba(187,0,51,0) 27%) 50px 50px,
radial-gradient(circle closest-side at 40% 22%, #d35 45%, rgba(221,51,85,0) 46%) 50px 50px,
radial-gradient(circle closest-side at 60% 22%, #d35 45%, rgba(221,51,85,0) 46%) 50px 50px,
radial-gradient(circle closest-side at 50% 35%, #d35 30%, rgba(221,51,85,0) 31%) 50px 50px;
background-color:#b03;
background-size:100px 100px; justify-content: center; align-items: center; display: flex; }

.argyle { background-color: #6d695c;
background-image:
repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
background-size: 70px 120px; justify-content: center; align-items: center; display: flex; }

.waves { background: 
radial-gradient(circle at 100% 50%, transparent 20%, rgba(255,255,255,.3) 21%, rgba(255,255,255,.3) 34%, transparent 35%, transparent),
radial-gradient(circle at 0% 50%, transparent 20%, rgba(255,255,255,.3) 21%, rgba(255,255,255,.3) 34%, transparent 35%, transparent) 0 -50px;
background-color: slategray;
background-size:75px 100px; justify-content: center; align-items: center; display: flex; }

.cross { background: 
radial-gradient(circle, transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent),
radial-gradient(circle, transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent) 50px 50px,
linear-gradient(#A8B1BB 8px, transparent 8px) 0 -4px,
linear-gradient(90deg, #A8B1BB 8px, transparent 8px) -4px 0;
background-color: slategray;
background-size:100px 100px, 100px 100px, 50px 50px, 50px 50px; justify-content: center; align-items: center; display: flex; }

.yin-yang { background: 
radial-gradient(circle at 50% 59%, #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54,78,39,0) 12%, rgba(54,78,39,0)) 50px 0,
radial-gradient(circle at 50% 41%, #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210,202,171,0) 12%, rgba(210,202,171,0)) 50px 0,
radial-gradient(circle at 50% 59%, #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54,78,39,0) 12%, rgba(54,78,39,0)) 0 50px,
radial-gradient(circle at 50% 41%, #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210,202,171,0) 12%, rgba(210,202,171,0)) 0 50px,
radial-gradient(circle at 100% 50%, #D2CAAB 16%, rgba(210,202,171,0) 17%),
radial-gradient(circle at 0% 50%, #364E27 16%, rgba(54,78,39,0) 17%),
radial-gradient(circle at 100% 50%, #D2CAAB 16%, rgba(210,202,171,0) 17%) 50px 50px,
radial-gradient(circle at 0% 50%, #364E27 16%, rgba(54,78,39,0) 17%) 50px 50px;
background-color:#63773F;
background-size:100px 100px; justify-content: center; align-items: center; display: flex; }

.stars { background: 
linear-gradient(324deg, #232927 4%,   transparent 4%) -70px 43px,
linear-gradient( 36deg, #232927 4%,   transparent 4%) 30px 43px,
linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px,
linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px,
linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px,
linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px,
linear-gradient(324deg, #232927 4%,   transparent 4%) -20px 93px,
linear-gradient( 36deg, #232927 4%,   transparent 4%) 80px 93px,
linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px,
linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px,
linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px,
linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px;
background-color: #232927;
background-size: 100px 100px; justify-content: center; align-items: center; display: flex; }

.brady-bunch { background-image:
radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%, #FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%),
radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%, #FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%);
background-size: 110px 110px;
background-color: #C8D3A7;
background-position: 0 0, 55px 55px; justify-content: center; align-items: center; display: flex; }

.shippo { background-color:#def;
background-image: radial-gradient(closest-side, transparent 98%, rgba(0,0,0,.3) 99%),
radial-gradient(closest-side, transparent 98%, rgba(0,0,0,.3) 99%);
background-size:80px 80px;
background-position:0 0, 40px 40px; justify-content: center; align-items: center; display: flex; }

.seigaiha { background-color:silver;
background-image: 
radial-gradient(circle at 100% 150%, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent),
radial-gradient(circle at 0    150%, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent),
radial-gradient(circle at 50%  100%, white 10%, silver 11%, silver 23%, white 24%, white 30%, silver 31%, silver 43%, white 44%, white 50%, silver 51%, silver 63%, white 64%, white 71%, transparent 71%, transparent),
radial-gradient(circle at 100% 50%, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent),
radial-gradient(circle at 0    50%, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent);
background-size:100px 50px; justify-content: center; align-items: center; display: flex; }

.japanese-cube { background-color:#556;
background-image: linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), 
linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
background-size:80px 140px;
background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px; justify-content: center; align-items: center; display: flex; }

.diagonal-checkerboard { background-color: #eee;
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), 
linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-size:60px 60px; justify-content: center; align-items: center; display: flex; }

.madras { background-color: hsl(34, 53%, 82%);
background-image: repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,                  
  hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
  hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,                
  hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
  hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
  hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px       
  ),
repeating-linear-gradient(135deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, 
  hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
  hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,                
  hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
  hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
  hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, 0.5) 140px, hsla(197, 62%, 11%, 0.5) 160px       
); justify-content: center; align-items: center; display: flex; }

.tablecloth { background-color:white;
background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 50%),
linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%);
background-size:50px 50px; justify-content: center; align-items: center; display: flex; }

.diagonal-stripes { background-color: gray;
background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px); justify-content: center; align-items: center; display: flex; }
		
.cicada-stripes { background-color: #026873;
background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
background-size: 13px, 29px, 37px, 53px; justify-content: center; align-items: center; display: flex; }

.vertical-stripes { background-color: gray;
background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,.5) 50%);
background-size: 50px 50px; justify-content: center; align-items: center; display: flex; }

.horizontal-stripes { background-color: gray;
background-image: linear-gradient(transparent 50%, rgba(255,255,255,.5) 50%);
background-size: 50px 50px; justify-content: center; align-items: center; display: flex; }

.gradient { background:
repeating-radial-gradient(#111 15%, transparent 18%) 0 0,
repeating-radial-gradient(#888 15%, transparent 24%) 100px 100px,
radial-gradient(rgba(255,255,255, .7) 18%, transparent 60%),
radial-gradient(rgba(255,255,255,.9) 26%, transparent 40%) 100px 100px;
background-color:#222;
background-size:200px 200px; justify-content: center; align-items: center; display: flex; }

.circles {   background:
    radial-gradient(
      #fff 1px, #333 5px, 
      #fff 7px, #333 11px, 
      #fff 14px, #333 18px, 
      #fff 21px, #333 25px, 
      #fff 28px, #333 28px, 
      #fff 23px, #333 25px, 
      #fff 27px, transparent 29px, 
      #fff 31px, transparent 33px);
  background-color: #fff; 
  background-size: 50px 50px;
  background-position: 25px; justify-content: center; align-items: center; display: flex; }

.radial { background: repeating-radial-gradient(circle, #306090, #306090 10px, #336699 10px, #336699 20px) repeat scroll 0% 0% transparent; justify-content: center; align-items: center; display: flex; }

.grids { background-color: #fff;
background-image:
 linear-gradient(180deg, transparent 50%, rgba(255,0,0,.1) 50%),
 linear-gradient(90deg, transparent 50%, rgba(255,0,0,.4) 50%),
 linear-gradient(180deg, transparent 50%, rgba(0,255,0,.2) 50%),
 linear-gradient(90deg, transparent 50%, rgba(0,255,0,.2) 50%),
 linear-gradient(-180deg, transparent 50%, rgba(0,0,255,.4) 50%),
 linear-gradient(-90deg, transparent 50%, rgba(0,0,255,.4) 50%);
background-size:
 1em 1em,
 1em 1em,
 2em 2em,
 2em 2em,
 1em 1em,
 1em 1em; justify-content: center; align-items: center; display: flex; }

.elegant { background-image: linear-gradient(135deg, transparent 84px, #d95b43 84px, #d95b43 100px, #ecd078 100px, #ecd078 106px, #c02942 106px, #c02942 120px, #ecd078 121px, #ecd078 127px, #542437 127px, #542437 142px, #ecd078 142px, #ecd078 148px, #53777a 148px, #53777a 163px, #ecd078 163px, #ecd078 168px, #d95b43 169px), linear-gradient(135deg, #d95b43 15px, #d95b43, #ecd078 15px, #ecd078 21px, #c02942 21px, #c02942 36px, #ecd078 36px, #ecd078 42px, #542437 42px, #542437 57.5px, #ecd078 57px, #ecd078 63px, #53777a 63px, #53777a 78px, #ecd078 78px, #ecd078 84px, transparent 84px, transparent 99px);
background-size: 120px 120px; justify-content: center; align-items: center; display: flex; }

.gnome-background {         background-color: #1b8bd2;
        background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
                          linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
                          linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
                          linear-gradient(90deg, transparent 50%, rgba(255,255,255,.29) 50%);
        background-size: 43px, 59px, 67px, 83px; justify-content: center; align-items: center; display: flex; }

.colorful-stripes {   background: 
    linear-gradient(to bottom, #ff0 0%, #f00 100%),
    linear-gradient(to bottom, #e20687 0%, #a21465 100%),
    linear-gradient(to bottom, #d8479e 0%, #a1c4d1 100%),
    linear-gradient(to bottom, #f9d307 0%, #8cc9d7 100%),
    linear-gradient(to bottom, #0077aa 0%, #50a3d8 100%),
    linear-gradient(to bottom, #a1c4d1 0%, #d8479e 100%),
    linear-gradient(to right, 
      #1e5799 4%,
      #1f9b7e 4%,
      #1f9b7e 8%,
      #fff 8%,
      #fff 10%,
      #5d24b7 10%,
      #5d24b7 11%,
      #be2e2e 11%,
      #be2e2e 13%,
      #fff 13%,
      #fff 15%,
      #d6942a 15%,
      #d6942a 17%,
      #b8d899 17%,
      #b8d899 21%,
      #fff 21%,
      #fff 27%,
      #8ace31 27%,
      #8ace31 34%,
      #fff 34%,
      #fff 36%,
      #f6b818 36%,
      #f6b818 40%,
      #e63737 40%,
      #e63737 44%,
      #fff 44%,
      #fff 52%,
      #f00 52%,
      #f00 54%,
      #fff 54%,
      #fff 60%,
      #e20687 60%,
      #e20687 64%,
      #fff 64%,
      #fff 70%,
      #8cd5f7 70%,
      #8cd5f7 72%,
      #fff 72%,
      #fff 73%,
      #ec6529 73%,
      #ec6529 74%,
      #fff 74%,
      #fff 75%,
      #d6942a 75%,
      #d6942a 76%,
      #fbe90f 76%,
      #fbe90f 81%,
      #fff 81%,
      #fff 85%,
      #1e5799 85%,
      #1e5799 88%,
      #8ace31 88%,
      #8ace31 89%,
      #fff 89%,
      #fff 92%,
      #ffe60a 92%,
      #ffe60a 94%,
      #f70909 94%,
      #f70909 96%,
      #8ace31 96%,
      #8ace31 99%,
      #fff 99%,
      #fff 99.5%,
      #d6942a 99.5%
    );
  
  background-size: 
    2% 100%,
    3% 100%,
    5% 100%,
    2% 100%,
    1% 100%,
    2% 100%,
    100% 1em
  ;
  
  background-position:
    12%,
    23%,
    48%,
    55%,
    59%,
    64%,
    0%
  ;
  
  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    repeat; justify-content: center; align-items: center; display: flex; }

.cheese {
	opacity: 0.7; 
	background-color: #000;
	border-radius:10px;
	padding:20px;
	justify-content: center;
	align-items: center;
	-webkit-box-shadow: 10px 10px 19px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 19px 0px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 19px 0px rgba(0,0,0,0.75);
	z-index: 0;
}