@import url('https://fonts.googleapis.com/css2?family=Cookie&family=Dancing+Script:wght@600&display=swap');

.card {
  perspective: 150rem;
  position: relative;
  height: 40rem;
  max-width: 400px;
  margin: 2rem;
  box-shadow: none;
  background: none;
  border: 0 !important;
}

.card-side {
  height: 100%;
  border-radius: 15px;
  transition: all 0.8s ease;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 2rem;
  color: white;
}

.card-side.back {
  transform: rotateY(-180deg);
  background-color: #4158d0;
  background-image: linear-gradient(
    43deg,
    #b99f43 0%,
    #90191d 46%,
    #000 100%
  );
}

.card-side.front {
  background-color: #0093e9;
  background-image: linear-gradient(160deg, #000, #90191d 100%);
}

.card:hover .card-side.front {
  transform: rotateY(180deg);
}

.card:hover .card-side.back {
  transform: rotateY(0deg);
}
/* Start of Custom */


.card-front {
  font-family: "Cookie", cursive;
  font-family: "Dancing Script", cursive;
  font-size: 25px;
}

.card-back{
  font-family: "Cookie", cursive;
  font-family: "Dancing Script", cursive;
  font-size: 25px;
}

.card-back-a {
  text-decoration: none;
  color: #fff;
  font-size: larger;
  transition: all ease-in-out 300ms;
}

.card-back-a:hover {
  color: #000;
  transform: scale(1.2);
  transition: all ease-in-out 300ms;
}

.card_img {
  width:auto;
  height: auto;
  object-fit: cover;
  border-radius: 5px;
}

.card_description{
  font-family: "Seriff", cursive;
  font-size: 17px;
  overflow: hidden;
}