* {
  margin: 0%;
  padding: 0%;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: aqua;
  min-height: 100vh;
}

.wrapper {
  height: 400px;
  width: 400px;
  background-color: white;
  border-radius: 15px;
  padding: 25px;
}

.cards,
.card,
.view {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cards {
  height: 100%;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
}

.cards .card {
  cursor: pointer;
  position: relative;
  perspective: 800px;
  transform-style: preserve-3d;
  height: calc(100%/4 - 10px);
  width: calc(100%/4 - 10px);
}

/* card shaking animation */
.card.shake {
  animation: shake 0.3s ease-in-out !important;
}

@keyframes shake {

  0%,
  100% {
    transform: translateX(0px);
  }

  20% {
    transform: translateX(10px);
  }

  40% {
    transform: translateX(-10px);
  }

  60% {
    transform: translateX(7px);
  }

  80% {
    transform: translateX(-px);
  }
}

.cards .card .view {
  width: 100%;
  height: 100%;
  position: absolute;
  pointer-events: none;
  user-select: none;
  /* background: #fff; */
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(8, 0, 0, 0.3);
  backface-visibility: hidden;
  transition: transform 0.25s linear;
}

.card .front-view span {
  font-size: 43px;
  color: blueviolet;
  font-family: 'Courier New', Courier, monospace;
}

.card .back-view {
  transform: rotateY(-90deg);
}

.card .back-view img {
  max-width: 45px;
}

.card.flip .front-view {
  transform: rotateY(90deg);
}

.card.flip .back-view {
  transform: rotateY(0deg);
}
@media (max-width:500px) {
  .wrapper{
    height: 300px;
    width: 300px;
  }
}