html,
body {
	height: 100%;
}
body {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #000;
}

button {
  cursor:pointer;
}

.centered {
  color: #f5f5f5;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-size: 48px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  margin: auto;
}

/* .......................................... */
.blackmirrorLoading {
	--dur: 1;
	/* position: relative; */
	font-size: 100px;
	width: 1em;
	height: 1em;
	/* filter: blur( 1px ); */
}
.blackmirrorLoading-part {
	--pos: 0em;
	position: absolute;
	top: 50%;
	left: 50%;
	width: .16em;
	height: .32em;
	margin: -.08em 0 0 -.08em;
	background: center no-repeat;
	background-image: url( "data:image/svg+xml,\
		<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10.347 21.936' fill='rgb(255,255,255)'>\
			<path d='\
				m 8.325,0 -8.312,3.443\
				c 1.807,4.858 1.802,10.204 -0.013,15.058\
				l 8.292,3.435\
				c 2.729,-7.055 2.7411917779653,-14.873 0.034,-21.936 z'/>\
		</svg>" );
	animation: calc( var( --dur ) * 1s ) linear infinite blackmirrorLoading-anim;
	opacity: 0;
}
@keyframes blackmirrorLoading-anim {
	0% {
		--pos: .04em;
		opacity: 1;
    filter: drop-shadow( 0 0 12px #fff );
	}
	20% {
		--pos: 0em;
	}
	100% {
		--pos: 0em;
		opacity: .2;
	}
}
.blackmirrorLoading-part:nth-child( 1 ) { transform: rotate(   0deg ) translate( calc( .4em + var( --pos ) ) ); animation-delay: calc( var( --dur ) / 8 * 1s ); }
.blackmirrorLoading-part:nth-child( 2 ) { transform: rotate(  45deg ) translate( calc( .4em + var( --pos ) ) ); animation-delay: calc( var( --dur ) / 8 * 2s ); }
.blackmirrorLoading-part:nth-child( 3 ) { transform: rotate(  90deg ) translate( calc( .4em + var( --pos ) ) ); animation-delay: calc( var( --dur ) / 8 * 3s ); }
.blackmirrorLoading-part:nth-child( 4 ) { transform: rotate( 135deg ) translate( calc( .4em + var( --pos ) ) ); animation-delay: calc( var( --dur ) / 8 * 4s ); }
.blackmirrorLoading-part:nth-child( 5 ) { transform: rotate( 180deg ) translate( calc( .4em + var( --pos ) ) ); animation-delay: calc( var( --dur ) / 8 * 5s ); }
.blackmirrorLoading-part:nth-child( 6 ) { transform: rotate( 225deg ) translate( calc( .4em + var( --pos ) ) ); animation-delay: calc( var( --dur ) / 8 * 6s ); }
.blackmirrorLoading-part:nth-child( 7 ) { transform: rotate( 270deg ) translate( calc( .4em + var( --pos ) ) ); animation-delay: calc( var( --dur ) / 8 * 7s ); }
.blackmirrorLoading-part:nth-child( 8 ) { transform: rotate( 315deg ) translate( calc( .4em + var( --pos ) ) ); animation-delay: calc( var( --dur ) / 8 * 8s ); }