*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: inherit;
  font-family: inherit;
  font-size: inherit;
}
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: #efefef;
  color: #030303;
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
}
.section {
  padding: 20px 0;
}
.wrapper {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 10px;
}
.flashcards-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
}
.flashcards {
  perspective: 100px;
  position: relative;
  width: 400px;
  height: 200px;
  cursor: pointer;
  transition: transform 0.4s linear;
  transform-style: preserve-3d;
  margin: 0 0 20px 0;
}
.flashcards.flipped {
  transform: rotateX(180deg);
}
.flashcards__front,
.flashcards__back {
  perspective: 100px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  backface-visibility: hidden;
  background-color: #fff;
  border-radius: 10px;
}
.flashcards__front::before,
.flashcards__back::before,
.flashcards__front::after,
.flashcards__back::after {
  position: absolute;
  font-size: 12px;
  color: #999;
}
.flashcards__front::before,
.flashcards__back::before {
  top: 10px;
}
.flashcards__front::after,
.flashcards__back::after {
  content: "Нажмите на карточку, чтобы перевернуть";
  bottom: 10px;
}
.flashcards__front::before {
  content: "Термин";
}
.flashcards__back {
  transform: rotateX(180deg);
}
.flashcards__back::before {
  content: "Значение";
}
.flashcards__cover {
  display: none;
  z-index: 100;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-color: #fff;
  transition: all 0.2s ease;
}
.flashcards__cover.active {
  display: block;
  animation: scaleCard 0.4s;
}
@keyframes scaleCard {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.flashcards__btn {
  padding: 5px 20px;
  background-color: #fff;
  border: none;
  outline: none;
  border-radius: 5px;
  cursor: pointer;
}
.flashcards__btn:hover {
  background-color: #e6e6e6;
}