.shareables-group {
	margin: 8px;
	margin-bottom: 1rem;
	text-align: center;
	image-rendering: pixelated;

	& h-c > a {
		--hover-clr: #0007;
		--hover-clr2: var(--hover-clr);
		position: relative;
		/* font-size: 0; */
		/* margin: 0 6px 0 0; */
	
		bottom: 0;
		/*border-bottom: 0px solid var(--hover-clr);*/
		filter: drop-shadow(0 0 var(--hover-clr));
		transition: .1s ease-in;
	
		display: inline-block;
		/* height: 31px; */

		&:hover, &:focus {
			transition: .1s ease-in;
			bottom: 2px;
			/*border-bottom: 2px solid var(--hover-clr);*/
			filter: drop-shadow(0px 1px var(--hover-clr)) drop-shadow(0px 1px var(--hover-clr2));
			filter: drop-shadow(0px 2px var(--hover-clr));
		}

		&:active {
			transition: .05s ease-in;
			bottom: 0px;
			filter: drop-shadow(0 0 var(--hover-clr));
		}
	}

	& h-c {
		background: none;
		
		&:target {
			position: relative;
			scroll-margin: 64px;

			&::after {
				content: ' ';
				position: absolute;
				width: 1000lvh;
				height: 1000lvh;
				display: block;
				top: calc(-500lvh + 4px);
				left: calc(-500lvh + 50%);
				background: radial-gradient(#0000 50px, #000000d8 100px);
				z-index: 100;
				pointer-events: none;

				animation: hc-spotlight 3s;
				animation-fill-mode: forwards;
			}
		}
	}
}

.sg-buttons h-c img { width: 88px; height: 31px; }
.sg-squares h-c img { width: 32px; height: 32px; }
.sg-stamps h-c img { width: 99px;  height: 56px; }
.sg-blinkies h-c img { width: 150px; height: 20px; }
.sg-badges h-c img { width: 80px; height: 15px; }
img.i-button { width: 88px; height: 31px; }
img.i-square { width: 32px; height: 32px; }
img.i-none { width: unset; height: unset; }
.sg-circle, .sg-circle img { border-radius: 128px; }
.sg-nocircle, .sg-nocircle img { border-radius: 0; }
.sg-squircle, .sg-squircle img { border-radius: 6px; }