.flip-board {
	position: relative;
	display: inline-block;
	font-family: 'Arial Black', sans-serif;
	font-size: 62px;
	color: white;
	background: linear-gradient(#222, #111);
	border-radius: 6px;
	perspective: 800px;
	overflow: hidden;
	height: 85px;
	width: 100%;
}
.flip-board::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	top: 50%;
	border-top: 1px solid #000;
	box-shadow: 0 2px 3px 1px #000, 0 -2px 5px 1px #0f0f0f;
	z-index: 3;
}

.flip-board .flip-top,
.flip-board .flip-bottom,
.flip-board .flip-top.next,
.flip-board .flip-bottom.next {
	position: absolute;
	width: 100%;
	height: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	backface-visibility: hidden;
	overflow: hidden;
	transform-style: preserve-3d;
	background: linear-gradient(#333, #111);
}
.flip-top {
	top: 0;
	transform-origin: bottom;
}
.flip-bottom {
	bottom: 0;
	transform-origin: top;
}

.flip-board .flip-top.next {
	transform: rotateX(-180deg);
}
.flip-board .flip-bottom.next {
	transform: rotateX(180deg);
}

.flip-top .content,
.flip-bottom .content {
	position: absolute;
	width: 100%;
	height: 200%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.flip-top .content {
	top: 0;
}

.flip-bottom .content {
	bottom: 0;
}

.flip-top.next {
	transform: rotateX(-180deg);
}

.flip-bottom.next {
	transform: rotateX(180deg);
}

.flip-board.flip .flip-top.current {
	animation: flipTop 0.6s ease-in-out forwards;
}
.flip-board.flip .flip-bottom.next {
	animation: flipBottom 0.6s ease-in-out forwards;
}

@keyframes flipTop {
	0% {
		transform: rotateX(0deg);
	}
	100% {
		transform: rotateX(-90deg);
	}
}

@keyframes flipBottom {
	0% {
		transform: rotateX(90deg);
	}
	100% {
		transform: rotateX(0deg);
	}
}