body,
html {
	height: 100%;
}

body {
	perspective: 1000px;
	background: #363a3f;
}

body,
div,
ul,
li {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

div,
ul,
li,
svg {
	will-change: transform;
	transform-style: preserve-3d;
}

li,
svg {
	transform-origin: center top;
}

.gradient {
	opacity: 0;
	height: 0;
	width: 0;
}

.lotus {
	transform-origin: center center;
	transform: rotateX(70deg);
	-webkit-animation: rotate 20000ms linear infinite forwards;
	animation: rotate 20000ms linear infinite forwards;
	position: absolute;
	top: calc(50% - 18px);
	left: calc(50% - 18px);
	width: 36px;
	height: 36px;
}

.lotus ul {
	position: relative;
	width: 36px;
	height: 36px;
}

.lotus li {
	position: absolute;
}

.lotus li svg {
	display: block;
	height: auto;
}

.lotus li svg path {
	fill: url(#gradient);
}

.lotus:nth-child(1) li {
	top: 18px;
	left: calc(50% - 18px);
}

.lotus:nth-child(1) li:nth-child(1) {
	transform: rotateZ(45deg) rotateX(15deg) rotateY(5deg);
}

.lotus:nth-child(1) li:nth-child(2) {
	transform: rotateZ(90deg) rotateX(15deg) rotateY(5deg);
}

.lotus:nth-child(1) li:nth-child(3) {
	transform: rotateZ(135deg) rotateX(15deg) rotateY(5deg);
}

.lotus:nth-child(1) li:nth-child(4) {
	transform: rotateZ(180deg) rotateX(15deg) rotateY(5deg);
}

.lotus:nth-child(1) li:nth-child(5) {
	transform: rotateZ(225deg) rotateX(15deg) rotateY(5deg);
}

.lotus:nth-child(1) li:nth-child(6) {
	transform: rotateZ(270deg) rotateX(15deg) rotateY(5deg);
}

.lotus:nth-child(1) li:nth-child(7) {
	transform: rotateZ(315deg) rotateX(15deg) rotateY(5deg);
}

.lotus:nth-child(1) li:nth-child(8) {
	transform: rotateZ(360deg) rotateX(15deg) rotateY(5deg);
}

.lotus:nth-child(1) li svg {
	width: 72px;
	transform: rotateX(75deg);
	-webkit-animation: bloom 10000ms cubic-bezier(0, 0.75, 0.25, 1) forwards;
	animation: bloom 10000ms cubic-bezier(0, 0.75, 0.25, 1) forwards;
}

.lotus:nth-child(2) li {
	top: 15px;
	left: calc(50% - 15px);
}

.lotus:nth-child(2) li:nth-child(1) {
	transform: rotateZ(60deg) rotateX(30deg) rotateY(5deg);
}

.lotus:nth-child(2) li:nth-child(2) {
	transform: rotateZ(120deg) rotateX(30deg) rotateY(5deg);
}

.lotus:nth-child(2) li:nth-child(3) {
	transform: rotateZ(180deg) rotateX(30deg) rotateY(5deg);
}

.lotus:nth-child(2) li:nth-child(4) {
	transform: rotateZ(240deg) rotateX(30deg) rotateY(5deg);
}

.lotus:nth-child(2) li:nth-child(5) {
	transform: rotateZ(300deg) rotateX(30deg) rotateY(5deg);
}

.lotus:nth-child(2) li:nth-child(6) {
	transform: rotateZ(360deg) rotateX(30deg) rotateY(5deg);
}

.lotus:nth-child(2) li svg {
	width: 60px;
	transform: rotateX(60deg);
	-webkit-animation: bloom 11000ms cubic-bezier(0, 0.75, 0.25, 1) 150ms forwards;
	animation: bloom 11000ms cubic-bezier(0, 0.75, 0.25, 1) 150ms forwards;
}

.lotus:nth-child(3) li {
	top: 12px;
	left: calc(50% - 12px);
}

.lotus:nth-child(3) li:nth-child(1) {
	transform: rotateZ(120deg) rotateX(60deg) rotateY(5deg);
}

.lotus:nth-child(3) li:nth-child(2) {
	transform: rotateZ(240deg) rotateX(60deg) rotateY(5deg);
}

.lotus:nth-child(3) li:nth-child(3) {
	transform: rotateZ(360deg) rotateX(60deg) rotateY(5deg);
}

.lotus:nth-child(3) li svg {
	width: 48px;
	transform: rotateX(30deg);
	-webkit-animation: bloom 12000ms cubic-bezier(0, 0.75, 0.25, 1) 300ms forwards;
	animation: bloom 12000ms cubic-bezier(0, 0.75, 0.25, 1) 300ms forwards;
}

@-webkit-keyframes rotate {
	from {
		transform: rotateX(70deg) rotateZ(0deg);
	}

	to {
		transform: rotateX(70deg) rotateZ(360deg);
	}
}

@keyframes rotate {
	from {
		transform: rotateX(70deg) rotateZ(0deg);
	}

	to {
		transform: rotateX(70deg) rotateZ(360deg);
	}
}

@-webkit-keyframes bloom {
	to {
		transform: none;
	}
}

@keyframes bloom {
	to {
		transform: none;
	}
}

@keyframes fadeIn {
	from {
		opacity: 0.01;
	}

	to {
		opacity: 1;
	}
}

.container {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	height: 100%;
	flex-direction: column;
}

.animated-text {
	animation: fadeIn 5s ease-in-out forwards;
	font-size: xx-large;
	color: white;
	font: 600 48px "Prompt", sans-serif;
}

.prompt-thin {
	font-family: "Prompt", sans-serif;
	font-weight: 100;
	font-style: normal;
}

.prompt-extralight {
	font-family: "Prompt", sans-serif;
	font-weight: 200;
	font-style: normal;
}

.prompt-light {
	font-family: "Prompt", sans-serif;
	font-weight: 300;
	font-style: normal;
}

.prompt-regular {
	font-family: "Prompt", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.prompt-medium {
	font-family: "Prompt", sans-serif;
	font-weight: 500;
	font-style: normal;
}

.prompt-semibold {
	font-family: "Prompt", sans-serif;
	font-weight: 600;
	font-style: normal;
}

.prompt-bold {
	font-family: "Prompt", sans-serif;
	font-weight: 700;
	font-style: normal;
}

.prompt-extrabold {
	font-family: "Prompt", sans-serif;
	font-weight: 800;
	font-style: normal;
}

.prompt-black {
	font-family: "Prompt", sans-serif;
	font-weight: 900;
	font-style: normal;
}

.prompt-thin-italic {
	font-family: "Prompt", sans-serif;
	font-weight: 100;
	font-style: italic;
}

.prompt-extralight-italic {
	font-family: "Prompt", sans-serif;
	font-weight: 200;
	font-style: italic;
}

.prompt-light-italic {
	font-family: "Prompt", sans-serif;
	font-weight: 300;
	font-style: italic;
}

.prompt-regular-italic {
	font-family: "Prompt", sans-serif;
	font-weight: 400;
	font-style: italic;
}

.prompt-medium-italic {
	font-family: "Prompt", sans-serif;
	font-weight: 500;
	font-style: italic;
}

.prompt-semibold-italic {
	font-family: "Prompt", sans-serif;
	font-weight: 600;
	font-style: italic;
}

.prompt-bold-italic {
	font-family: "Prompt", sans-serif;
	font-weight: 700;
	font-style: italic;
}

.prompt-extrabold-italic {
	font-family: "Prompt", sans-serif;
	font-weight: 800;
	font-style: italic;
}

.prompt-black-italic {
	font-family: "Prompt", sans-serif;
	font-weight: 900;
	font-style: italic;
}

.invisible_link {
	text-decoration: none;
	color: inherit;
}