:root {
	--img-width: calc(117px * 4);
	--img-height: calc(174px * 4);
}

body {
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
  }

  .flip-card {
	background-color: transparent;
	width: var(--img-width);
	height: var(--img-height);
	perspective: 1000px;
  }

  .flip-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 0.6s;
	transform-style: preserve-3d;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  }

  .flip-card[flipped] .flip-card-inner {
	transform: rotateY(180deg);
  }

  .flip-card[horiz] .flip-card-inner {
	transform: rotate3d(1, 1, 0, 180deg);
  }

  .flip-card-front, .flip-card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
  }

  .flip-card-front {
	background-color: #bbb;
	color: black;
	transform: rotateY(180deg);
  }

  .flip-card-back {
	background-color: #2980b9;
	color: white;
  }

  img {
	width: var(--img-width);
	height: var(--img-height);
  }

  #shuffleBtn {
	width: 150px;
  }

  #shuffleBtn[hide] {
	visibility: hidden;
  }