:root {
  box-sizing: border-box;
}

*,
::before,
::after {
  box-sizing: inherit;
}
body {
  text-align: center;
  margin: 1rem auto;
  background-image: linear-gradient(
    to top left,
    rgb(173, 129, 190) 0%,
    rgb(178, 109, 206) 100%
  );
  color: #333;
  font-family: "Original Surfer", cursive;
  width: 700px;
}
header {
  margin-top: 2rem;
  line-height: 0.6rem;
}
h1 {
  text-shadow: white 4px 3px 10px;
  font-size: 3rem;
}
.score {
  line-height: 0.5rem;
  font-size: small;
  background-color: rgb(191, 156, 204);
  border: 1px dashed;
  width: 50%;
  margin: 0.5rem auto;
}
#deck {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  align-content: space-evenly;
  justify-items: center;
}
#deck.hidden {
  display: none;
}

.scene {
  margin: 0 auto;
  width: 200px;
  height: 200px;
  perspective: 600px;
  margin: 5px;
}
.scene.removed {
  visibility: hidden;
}
.card {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
  flex-direction: row;
  flex-wrap: wrap;
  border: 2px solid #333;
  border-radius: 5px;
}
.card.selected {
  border: 2px solid #333;
  border-radius: 5px;
}
.card__face {
  position: absolute;
  height: 100%;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.card__face--front {
  background-image: url(images/background.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.card__face--back {
  transform: rotateY(180deg);
}
.card.is-flipped {
  transform: rotateY(180deg);
}
.apple {
  background-image: url(images/img1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
.peach {
  background-image: url(images/img2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
.plum {
  background-image: url(images/img3.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
.strawberry {
  background-image: url(images/img4.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
.banana {
  background-image: url(images/img5.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
.cherry {
  background-image: url(images/img6.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
.scene_hide {
  display: none;
}
.result_view {
  text-align: center;
  margin: auto auto;
  box-shadow: 2px 3px 20px #333;
}
#winner {
  background-color: rgb(114, 180, 145);
  padding: 0.7rem;
  color: black;
  margin: 3rem auto;
  border: 2px solid #333;
  border-radius: 3px;
}
#loser {
  background-color: rgb(226 56 42);
  padding: 0.7rem;
  color: black;
  margin: 3rem auto;
  border: 2px solid #333;
  border-radius: 3px;
}

button {
  margin: 0.2rem auto;
  padding: 0.5rem 1rem;
  font-size: 1.3rem;
  color: #333;
  border-radius: 0.3rem;

  background-color: rgb(198, 185, 211);
  cursor: pointer;
  font-weight: bold;
  font-family: "Original Surfer", cursive;
  letter-spacing: 0.07rem;
}

button:active {
  transform: translate(-5%, 2px);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
  background-color: rgb(112, 66, 112);
  color: white;
}

button:hover {
  background-color: rgb(112, 66, 112);
  color: white;
}

button.clicked {
  background-color: rgb(112, 66, 112);
  color: white;
}

@media screen and (max-width: 600px) {
  .score {
    width: 80%;
  }
}