.game {
  position: relative;
  background-color: transparent;
  width: 100%;
  height: 100%;
  perspective: 1000px;
}

.game-inner {
  width: 100%;
  height: 100%;

  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;

  display: flex;
  justify-content: center;
  align-items: center;
}

.game-inner__front {
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;

  /* background-color: #0984e3; */
}

.game-inner__front,
.game-inner__back {
  transition: transform 0.8s;
  position: absolute;
  width: 300px;
  height: 100%;
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
}

.game-inner__back {
  background-color: #d63031;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  transform: rotateY(180deg);
}

.game-inner__front.flip {
  transform: rotateY(180deg);
}

.game-inner__front.flip+.game-inner__back {
  transform: rotateY(360deg);
}

/* user question */

.user-question__question {
  font-size: 25px;
  padding: 10px 15px;
  border: 1px solid #0984e3;
  border-radius: 4px;
  text-align: center;
}

.user-question__answers {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 150px 150px;
}

.user-question__answers p {
  padding: 10px 15px;
  font-size: 20px;
  cursor: pointer;
  transition: transform .3s;
}

.user-question__answers p:hover {
  transform: translateY(-3px);
  color: #00b894;
}