.word {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	perspective: 1000px;
	font-weight: bold;
}

.word span {
	cursor: pointer;
	display: inline-block;
	font-size: 60px;
	user-select: none;
	line-height: .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, .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(-37vh) scaleY(1);
	}
	
	90% {
		transform: translateY(-37vh) scaleY(8);
	}
}

/* Other styles */



 body {


/*	height: 100vh; */
	margin: 0; 
}  





@media (max-width: 1750px) {
	
@keyframes toplong {
	10%, 40% {
		transform: translateY(-45vh) scaleY(1);
	}
	
	90% {
		transform: translateY(-45vh) scaleY(6);
	}
}


@media (max-width: 1441px) {
	
@keyframes toplong {
	10%, 40% {
		transform: translateY(-49vh) scaleY(1);
	}
	
	90% {
		transform: translateY(-49vh) scaleY(6);
	}
}
	
	
@media (max-width: 1280px) {
	
@keyframes toplong {
	10%, 40% {
		transform: translateY(-53vh) scaleY(1);
	}
	
	90% {
		transform: translateY(-53vh) scaleY(6);
	}
}
	
@media (max-width: 1025px) {
	
@keyframes toplong {
	10%, 40% {
		transform: translateY(-59vh) scaleY(1);
	}
	
	90% {
		transform: translateY(-59vh) scaleY(8);
	}
}

	@media (max-width: 769px) {
	
@keyframes toplong {
	10%, 50% {
		transform: translateY(-45vh) scaleY(1);
	}
	
	90% {
		transform: translateY(-45vh) scaleY(7);
	}
}