styles.css

 .flipcard:hover .flipcard-body, .flipcard:focus .flipcard-body {
	 transform: rotateY(-180deg);
}

 .flipcard-back {
	 transform: rotateY(-180deg);

}

 .flipcard {
	 perspective: 40rem;
	 transition: z-index, transform 0.2s;
	 transition-delay: 0.7s, 0s;
	 z-index: 0;
   padding: 10px;
   text-decoration: none;
}

 .flipcard:hover {
	 transition-delay: 0s;
	 z-index: 1;
}

 .flipcard:active {
	 transform: scale(0.975);
}

 .flipcard-body {
 	 display: flex;
	 transform-style: preserve-3d;
	 transition: 0.7s transform;
	 border-radius: 0.25rem;
	 flex: 1;
   width: 250px;
   height: 250px;
   margin: auto;
}

 .flipcard-front, .flipcard-back {
	 backface-visibility: hidden;
	 min-width: 100%;
	 display: flex;
	 align-items: center;
	 background-color: white;
	 box-sizing: border-box;
	 border-radius: 0.25rem;
}

 .shadow, .flipcard-front, .flipcard-back {
	 box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.04), 0 2px 2px rgba(0, 0, 0, 0.04), 0 4px 4px rgba(0, 0, 0, 0.04), 0 8px 8px rgba(0, 0, 0, 0.04), 0 16px 16px rgba(0, 0, 0, 0.04);
}