#deck-container {
  clear: both;
  position: absolute;
  top: 40vmin;
  left: calc(50% - 15vmin);
  margin: 5vmin;
  height: auto;
  width: auto;
}
.card-container {
  top: 0;
  position: absolute;
  perspective: 90vmin;
  perspective-origin: bottom;
}
.card-container,
.card,
.front,
.back {
  height: 42vmin;
  width: 30vmin;
}

.card-container.card-show .card{
  transform: rotateX(1deg) rotateZ(-1deg) translateZ(10vmin) rotateY(0deg) translateY(-25vmin);
}

.card-container.flipped .card {
  transform: rotateX(40deg) rotateZ(25deg) rotateY(180deg);
}

.card-container .card {
  transition: transform 0.25s linear;
  transform: rotateX(40deg) rotateZ(45deg) rotateY(0deg);
  transform-style: preserve-3d;
}

.card-container .card .front,
.card-container .card .back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  user-select: none;
}
.card-container .card .front, .card-container .card .back {
  border-radius: 2vmin;
}

.card-container .card .front {
  z-index: 2;
  border: #000000 solid 1px;
  background-color: rgb(255, 255, 255);
  transform: rotateY(0deg);
}

.card-container .card .back {
  border: #000000 solid 1px;
  background-color:#ffa06c;
  transform: rotateY(180deg);
}
.card-container.first .card .back {
  background-image: url(../images/bgr.svg), linear-gradient(90deg, rgba(255,156,251,1) 0%, rgba(255,146,82,1) 100%);
}
.card-container.second .card .back {
  background-image: url(../images/bgr.svg), linear-gradient(90deg, rgb(156, 220, 255) 0%, rgb(148, 255, 82) 100%);
}
.card-container.third .card .back {
  background-image: url(../images/bgr.svg), linear-gradient(90deg, rgb(210, 255, 156) 0%, rgb(82, 85, 255) 100%);
}
.card-container.first .card .front {
  background-image: linear-gradient(90deg, rgba(255, 156, 252, 0.2) 0%, rgba(255, 146, 82, 0.2) 100%);
}
.card-container.second .card .front {
  background-image: linear-gradient(90deg, rgba(156, 220, 255, 0.2) 0%, rgba(148, 255, 82, 0.2) 100%);
}
.card-container.third .card .front {
  background-image: linear-gradient(90deg, rgba(210, 255, 156, 0.2) 0%, rgba(82, 85, 255, 0.2) 100%);
}
.card-container.empty .card .back {
  z-index: 2;
  border: #c6c6c6 dashed;
  background: #fffbf7;
}
.card-container .card .card-label {
  font-size: 25vmin;
  line-height: 39vmin;
  color: blue;
}
h1 {
  font-size: 5vmin;
}
.flat-card {
  border-radius: 1vmin;
  height: 14vmin;
  width: 10vmin;
  border: #6ea329 solid;
  background-color: antiquewhite;
}
.flat-card .card-label {
  font-size: 8vmin;
  line-height: 13vmin;
  color: blue;
}
.left {
  left: 10vmin;
  bottom: 15vmin;
  position: absolute;
}
.right {
  right: 10vmin;
  bottom: 15vmin;
  position: absolute;
}
.answer {
  position: absolute;
  top: 25vmin;
  left: 30vmin;
  border-radius: 50%;
  height: 15vmin;
  width: 35vmin;
  border: #25505e solid;
  display: none;
  line-height: 14vmin;
  font-size: 6vmin;
  text-align: center;
}
.answer.true {
  background-color: rgb(189, 255, 148);
  color:rgb(19, 93, 0);
  display: block;
}
.answer.false {
  background-color: #ff8f8f;
  color:rgb(93, 0, 0);
  display: block;
}
.answer .text {
  display: none;
}
.answer.true .true {
  display: block;
}
.answer.false .false {
  display: block;
}
.flat-card.empty {
  border: #c6c6c6 dashed;
  background: None;
}
.flat-card.success {
  box-shadow: 0 0 0.3vmin 0.3vmin rgba(0, 255, 0, 0.3);
}
.flat-card.failed {
  box-shadow: 0 0 0.3vmin 0.3vmin rgba(255, 0, 0, 0.3);
}
.flat-card.selected {
  border: #c6c6c6 dashed;
  background: None;
  animation-name: blinking;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
@keyframes blinking {
50% {
  border-color: #0f0052;
}
}
#recall-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 60vmin;
  width: 90vw;
}
.series {
  color:rgb(255, 255, 255);
  display: flex;
  padding-bottom: 1vmin;
  padding-top: 5vmin;
  justify-content: space-around;
  flex-direction: row;
  position: relative;
  width: 100%;
  font-size: 3vmin;
  text-align: center;
  align-items: center;
}
.light {
  color:lightgoldenrodyellow;
}
.dark {
  color: rgb(61, 31, 10);
}
.left-button {
  max-width: 35vmin;
  padding-top: 2vmin;
  font-size: 2.5vmin;
  left: 15vmin;
  bottom: 6vmin;
  position: absolute;
}
.right-button {
  max-width: 35vmin;
  padding-top: 2vmin;
  font-size: 2.5vmin;
  right: 15vmin;
  bottom: 6vmin;
  position: absolute;
}
.center-button {
  font-size: 2.5vmin;
}
.bottom-button {
  max-width: 60vmin;
  padding-top: 2vmin;
  font-size: 2.5vmin;
}