@keyframes rotate
	from
		transform: rotate(0deg)
	
	to
		transform: rotate(360deg)

@keyframes pop-in
	0%
		transform: scale(0)

	8%
		transform: scale(1.4)
	
	10%, 100%
		transform: scale(1)

:root
	--color-fg: #c00
	--color-bg: #fff

body, html
	margin: 0
	padding: 0
	width: 100%

html
	height: 100%
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif
	font-size: 2vmin
	color: var(--color-fg)

body
	min-height: 100%
	align-items: center
	justify-content: center
	display: flex
	background-color: var(--color-bg)

figure
	margin: 0
	position: relative
	height: 10rem
	width: 10rem
	animation: pop-in 4s 1s ease-in infinite

	.symbol
		align-items: center
		justify-content: center
		display: flex
		font-size: 40rem
		line-height: 1
		position: absolute
		z-index: -1
		inset: 0
		animation: rotate 3s infinite linear
		transform-origin: center center
		text-align: center
	
	.caption
		align-items: center
		justify-content: center
		display: flex
		position: absolute
		line-height: 1
		z-index: 1
		inset: 2rem 0
		font-size: 8rem
		font-style: italic
		font-weight: bold
		color: var(--color-bg)
		-webkit-text-stroke: 0.2rem var(--color-fg)
		transform: skewX(-10deg) skewY(-10deg)