@import url('https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,MONO@-15..0,300..1000,0..1,0..1,0..1&display=swap');

:root {
  font-size: 100%;
  font-family: 'Recursive', monospace;
    background-color: skyblue;
}

/*https://codepen.io/FlorinPop17/pen/WEBNyx*/

.var99 { color: black;
         font-size: 20px;}

/*https://codepen.io/wyattnolen/pen/zzrbjb*/

/*@import url("https://fonts.googleapis.com/css?family=Anton|Roboto");*/

.word {
	font-family: 'Recursive', monospace;
	perspective: 1000px;
}

.word span {
	cursor: pointer;
	display: inline-block;
	font-size: 100px;
	user-select: none;
	line-height: 0.8;
}

.word span:nth-child(1).active {
	animation: balance 1.5s ease-out;
	transform-origin: bottom left;
}

@keyframes balance {
	0%,
	100% {
		transform: rotate(0deg);
	}

	30%,
	60% {
		transform: rotate(-45deg);
	}
}

.word span:nth-child(2).active {
	animation: shrinkjump 1s ease-in-out;
	transform-origin: bottom center;
}

@keyframes shrinkjump {
	10%,
	35% {
		transform: scale(2, 0.2) translate(0, 0);
	}

	45%,
	50% {
		transform: scale(1) translate(0, -150px);
	}

	80% {
		transform: scale(1) translate(0, 0);
	}
}

.word span:nth-child(3).active {
	animation: falling 2s ease-out;
	transform-origin: bottom center;
}

@keyframes falling {
	12% {
		transform: rotateX(240deg);
	}

	24% {
		transform: rotateX(150deg);
	}

	36% {
		transform: rotateX(200deg);
	}

	48% {
		transform: rotateX(175deg);
	}

	60%,
	85% {
		transform: rotateX(180deg);
	}

	100% {
		transform: rotateX(0deg);
	}
}

.word span:nth-child(4).active {
	animation: rotate 1s ease-out;
}

@keyframes rotate {
	20%,
	80% {
		transform: rotateY(180deg);
	}

	100% {
		transform: rotateY(360deg);
	}
}

.word span:nth-child(5).active {
	animation: toplong 1.5s linear;
}

@keyframes toplong {
	10%,
	40% {
		transform: translateY(-48vh) scaleY(1);
	}

	90% {
		transform: translateY(-48vh) scaleY(4);
	}
}

.word span:nth-child(6).active {
	animation: balance 1.5s ease-out;
	transform-origin: bottom left;
}

@keyframes balance {
	0%,
	100% {
		transform: rotate(0deg);
	}

	30%,
	60% {
		transform: rotate(-45deg);
	}
}

.word span:nth-child(7).active {
	animation: shrinkjump 1s ease-in-out;
	transform-origin: bottom center;
}

@keyframes shrinkjump {
	10%,
	35% {
		transform: scale(2, 0.2) translate(0, 0);
	}

	45%,
	50% {
		transform: scale(1) translate(0, -150px);
	}

	80% {
		transform: scale(1) translate(0, 0);
	}
}

.word span:nth-child(8).active {
	animation: falling 2s ease-out;
	transform-origin: bottom center;
}

@keyframes falling {
	12% {
		transform: rotateX(240deg);
	}

	24% {
		transform: rotateX(150deg);
	}

	36% {
		transform: rotateX(200deg);
	}

	48% {
		transform: rotateX(175deg);
	}

	60%,
	85% {
		transform: rotateX(180deg);
	}

	100% {
		transform: rotateX(0deg);
	}
}



/* Other styles */
.body {
	background-color: skyblue;
	color: #fff;
	display: flex;
	font-family: "Roboto", sans-serif;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	height: 100vh;
	margin: 0;
}

.fixed {
	position: fixed;
	top: 40px;
	left: 50%;
	transform: translateX(-50%);
}

footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	letter-spacing: 1px;
}

footer i {
	color: red;
}

footer a {
	color: #3c97bf;
	text-decoration: none;
}