html {
	font-size: 3vw;
}
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
body {
	min-height: 100vh;
	display: grid;
	place-items: center;
	font-family: system-ui, sans-serif;
	background: #66023c;
	overflow: hidden;
}
.wrap {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 0 1rem;
	width: 100%;
	margin: 0 auto;
	perspective: 12vmin;
}
.wrap > * {
	grid-area: 1 / 1;
}
.left,
.right {
	font-size: max(2rem, 6cqi);
	font-weight: 900;
	line-height: 4;
	color: #fcf75e;
	text-transform: uppercase;
	transform-style: preserve-3d;
	animation: rotate 5s ease-in-out backwards 1s;
}
@keyframes rotate {
	from {
		perspective: 0vmin;
		transform: rotateY(0deg);
	}
}
.left {
	transform-origin: right;
	transform: rotateY(-10deg) scale(2);
}
.right {
	transform-origin: left;
	transform: rotateY(10deg) scale(2);
}

.centre {
	font-size: max(1rem, 6cqi);
	color: #98ff98;
	line-height: 1;
	writing-mode: vertical-lr;
	transform: rotate(-180deg);
	transform-style: preserve-3d;
	animation: scale 5s ease-in-out forwards 1s;
}
@keyframes scale {
	to {
		transform: rotate(-180deg) rotateX(-20deg) translateY(30%);
	}
}

// Updated positioning and font-size as previous was unnecessarily complicated and not responsive