:root{
	--wk:#210;--ww:#eed;
	--ck:#223;--cw:#def;
	--s:#999c;
	--ac0:#6ca;--ac1:#6be;--ac2:#baf;--ac3:#e9b;--ac4:#e97;--ac5:#bb6;
	--ac:var(--ac0);
	--bor:max(2px,.2em);
	--stuff:167px;
	--iconl:url("https://6ca.me/img/icon.svg");
	--icond:url("https://6ca.me/img/icon.svg#!");
	--tf:cubic-bezier(0,0,0,1.5);
	--bc:var(--ww);--fc:var(--wk);
	--sbc:var(--cw);--fc:var(--ck);
	--iimg:var(--iconl);
	color-scheme:light dark;
	color:var(--fc);background:0 0/5cm url("../img/cross.svg") var(--bc);
	font-family:sans-serif;accent-color:var(--ac0);
	text-shadow:0 0 var(--bor) var(--bc),0 0 calc(var(--bor)/2) var(--bc);
	tab-size:2;overflow-wrap:break-word;
}
@media(prefers-color-scheme:dark){
	:root{
		--bc:var(--ck);--fc:var(--cw);
		--sbc:var(--wk);--sfc:var(--ww);
		--iimg:var(--icond);
	}
	/* :link{color:#8cf;}:visited{color:#c8f;}:link:active,:visited:active{color:#f8c;} */
}
@keyframes s9{0%{transform:scale(.9);}}

main{max-width:960px;margin:0 auto;}
hr{border:2px solid var(--s);border-radius:2px;}
.irp{image-rendering:pixelated;}
:any-link{color:unset;}
/* :visited{text-decoration-color:color-mix(currentColor,var(--bc));} */
:visited{text-decoration-color:var(--s);}
/* :any-link.nocol{color:unset;} */
.stuff>*,.zab{color:var(--sfc);}/*color-mix(var(--fc) 75%,var(--ac) 25%);accent-color:var(--ac);}*/

.zab{
	padding:16px;
	margin:16px 0;
	border-radius:32px;
	position:relative;
	overflow:hidden;
}
.zab::before{
	content:"";display:block;position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;
	background-color:var(--ac);
	opacity:.5;
}

.stuff{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(min(var(--stuff),100%),1fr));
	gap:16px;
}
.stuff>*{
	box-shadow:0 0 0 var(--bor) var(--s) inset;
	padding:8px;
	border-radius:16px;
	transition:background-color .2s,transform .3s var(--tf);
	animation:s9 .3s var(--tf);
	outline:none;
}
.stuff>:focus,.stuff>:active{
	transform:scale(1.05);
	background-color:var(--ac);
}
@media(hover:hover){
	.stuff>:hover{
		transform:scale(1.05);
		background-color:var(--bc);
	}
	.stuff>:active{
		transform:scale(.95);
		background-color:var(--ac);
	}
}
.stuff>:any-link{text-decoration-line:none;}
.stuff>*>*,.stuff>::before{
	color:inherit;text-decoration-color:inherit;
	margin:var(--bor) 0 0;display:block;
	border-radius:8px;
	padding:8px;
}
.stuff>::before{
	margin:0;
	content:"";display:block;padding:0;padding-top:calc(100% - calc(4px * 2));
	border:4px var(--bc) solid;
	background:no-repeat center/cover var(--img,var(--iimg));
}
.stuff>*>:first-child{
	font-size:larger;
	font-weight:bold;
	overflow:hidden;
	box-shadow:0 0 0 4px var(--bc) inset;
	position:relative;
}
.stuff>:any-link>:first-child{text-decoration-line:underline;}
.stuff>*>:first-child::before{
	content:"";display:block;position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;
	background-color:var(--ac);
	opacity:.8;
}


:nth-child( 1n+0 of .stuff>*,.zab){--ac:var(--ac1);}
:nth-child( 2n+0 of .stuff>*,.zab){--ac:var(--ac2);}
:nth-child( 3n+1 of .stuff>*,.zab){--ac:var(--ac3);}
:nth-child( 5n+1 of .stuff>*,.zab){--ac:var(--ac4);}
:nth-child( 7n+0 of .stuff>*,.zab){--ac:var(--ac5);}
:nth-child( 7n+3 of .stuff>*,.zab){--ac:var(--ac5);}
:nth-child(11n+1 of .stuff>*,.zab){--ac:var(--ac0);}