html {
	font-family: sans-serif;
}
body {
	height: 100vh;
	margin: 0;
	padding: 0;
}

main {
	height: 100%;
	display: grid;

	overflow: hidden;
}

main > * {
	grid-row: 1 / 2;
	grid-column: 1 / 2;

	display: grid;
	place-content: center;

	--asterisk-max-size: 400px;
	--asterisk-size: clamp(100px, 33vw, var(--asterisk-max-size));
}

#mesh-gradient {
	height: 100%;
	width: 100%;
}

.rotate {
	animation: rotate 120s linear infinite;
}

div > img {
	width: var(--asterisk-size);
	aspect-ratio: 1;
}

div:first-of-type {
	z-index: 2;
}

div:last-of-type {
	position: relative;
	bottom: -200px;
	perspective: 500px;
	perspective-origin: bottom;
	transform-style: preserve-3d;
	transform: scale3d(1.15, 0.5, 1);
	opacity: 0.4;
	filter: blur(15px) brightness(0);
	z-index: 1;
}

@keyframes rotate {
	to {
		rotate: 1turn;
	}
}