.splash {
	background-image: radial-gradient(
		circle farthest-corner at center,
		#ffffff 0%,
		#ffffff 100%
	);
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
}

.book {
	top: 50%;
	transform: translateY(-50%);
	position: relative;
	margin: 0 auto;
	border: 5px solid #f32e9e;
	width: 100px;
	height: 60px;
}
.book__page {
	position: absolute;
	left: 50%;
	top: -5px;
	margin: 0 auto;
	border-top: 5px solid #f32e9e;
	border-bottom: 5px solid #f32e9e;
	border-right: 5px solid #f32e9e;
	background: #ffffff;
	width: 50px;
	height: 60px;
	transform-origin: 0% 50%;
	animation: flip 1.2s infinite linear;
	animation-fill-mode: forwards;
}
.book__page:nth-child(1) {
	z-index: -1;
	animation-delay: 0.2s;
}
.book__page:nth-child(2) {
	z-index: -2;
	animation-delay: 0.4s;
}
.book__page:nth-child(3) {
	z-index: -3;
	animation-delay: 0.6s;
}

@keyframes flip {
	0% {
		transform: perspective(600px) rotateY(-0deg);
	}

	20% {
		background: #ffffff;
	}

	29.9% {
		background: #f0f0f0;
	}
	30% {
		transform: perspective(200px) rotateY(-90deg);
		background: #ffffff;
	}

	54.999% {
		opacity: 1;
	}
	55% {
		opacity: 0;
	}

	60% {
		transform: perspective(200px) rotateY(-180deg);
		background: #ffffff;
	}

	100% {
		transform: perspective(200px) rotateY(-180deg);
		background: #ffffff;
	}
}