body {
	background-color: #ececec;
	transform-style: preserve-3d;
	perspective: 2000px;
	display: flex;
	justify-content: center;
}

label .cardWrapper {
	position: relative;
	height: 70vmin;
	width: calc(70vmin / 1.4);
	background-color: royalblue;
	background-image: repeating-linear-gradient(120deg,
			rgba(255, 0, 0, 0.5),
			rgba(255, 0, 0, 0.5) 1px,
			transparent 1px,
			transparent 60px),
		repeating-linear-gradient(60deg,
			rgba(255, 0, 0, 0.5),
			rgba(255, 0, 0, 0.5) 1px,
			transparent 1px,
			transparent 60px),
		linear-gradient(60deg,
			rgba(0, 0, 0, 0.1) 25%,
			transparent 25%,
			transparent 75%,
			rgba(0, 0, 0, 0.1) 75%,
			rgba(0, 0, 0, 0.1)),
		linear-gradient(120deg,
			rgba(0, 0, 0, 0.1) 25%,
			transparent 25%,
			transparent 75%,
			rgba(0, 0, 0, 0.1) 75%,
			rgba(0, 0, 0, 0.1));
	background-size: 70px 120px;
	margin: calc(70vmin / 10);
	border-radius: calc(40vmin / 20);
	// box-shadow: 0 calc(40vmin / 40) calc(40vmin / 10) 0 rgba(0, 0, 0, 0.2);

	overflow: hidden;
	float: left;
	transition: transform 200ms linear, box-shadow 100ms linear;
	transform: rotateY(0deg);
}

input:checked+label .cardWrapper {
	transform: rotateY(180deg);
}

.cardRandom {
	width: 100%;
	height: 100%;
	background-color: white;
	opacity: 1;
	cursor: pointer;
	transition: opacity 1ms linear 100ms;
}

.cardWrapper:hover {
	filter: brightness(0.98);
}

input:focus+label .cardWrapper {
	// box-shadow: 0 0 calc(40vmin / 100) 0 rgba(0, 0, 0, 0.5);
}

input:checked+label .cardRandom {
	opacity: 0;
}

.cardRandom::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: cover;
	animation: randomCard 1000ms steps(51, end) infinite;
	animation-play-state: paused;
	transform: rotate(180deg);
}

input:checked+label .cardRandom::before {
	animation-play-state: running;
}

input {
	height: 0;
	width: 0;
	border: none;
	outline: none;
	display: none;
}

@keyframes randomCard {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: 100% 0;
	}
}