.results-heading{
  max-width: 600px;
  margin-left: 100px;
}

.results-cards {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  gap: 100px;
  justify-content: center;
  margin: auto;
  max-width: 650px;
  margin-bottom: 5%;
}

.card {
  position: relative;
  width: 275px;
  height: 420px;
  perspective: 1000px;
  font-size: 20px;
}

/* Cards for DB results (no images) */
.results-cards-text {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 100px;
  justify-content: center;
  margin: auto;
}

.card-text{
  height: 10px;
}

/* All cards! */

 .results-cards h2{
  text-align: center;
 }

.content {
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);

  transition: transform 1s;
  transform-style: preserve-3d;
}

.card:hover .content {
  transform: rotateY( 180deg ) ;
  transition: transform 0.5s;
}

.front, .back {
  padding: 20px;
  position: absolute;
  height: 100%;
  width: 100%;
  background: #191919;
  border-radius: 5px;
  backface-visibility: hidden;
}

.back {
  text-align: left;
  background: #78CDD7;
  color: #FFF9EF;
  transform: rotateY( 180deg );
}

.front {
  text-align: center;

}

.front-text{
  text-align: left;
}

.miku-front {
  background-color: #191919;
  border: #78CDD7;
  border-style: solid;
  border-width: 10px;
}

.miku-back {
  background-color: #3f8aad;
}

.rin-front {
  background-color: #191919;
  border: #dda01c;
  border-style: solid;
  border-width: 10px;

}

.rin-back {
  background-color: #a36009;

}

.len-front {
  background-color: #191919;
  border: #f8e36e;
  border-style: solid;
  border-width: 10px;
}

.len-back {
  background-color: #a37f09;
}

.MEIKO-front {
  background-color: #191919;
  border: #a5241b;
  border-style: solid;
  border-width: 10px;
}

.MEIKO-back {
  background-color: #69080d;
}

.KAITO-front {
  background-color: #191919;
  border: #18219b;
  border-style: solid;
  border-width: 10px;
}

.KAITO-back {
  background-color: #25065e;
}

.GUMI-front {
  background-color: #191919;
  border: #73f07e;
  border-style: solid;
  border-width: 10px;
}

.GUMI-back {
  background-color: #079268;
}

.v_flower-front {
  background-color: #191919;
  border: #dfa1f1;
  border-style: solid;
  border-width: 10px;
}

.v_flower-back {
  background-color: #820792;
}

.teto-front {
  background-color: #191919;
  border: #f85e6b;
  border-style: solid;
  border-width: 10px;
}

.teto-back {
  background-color: #750647;
}

.KAFU-front {
  background-color: #191919;
  border: #3256f5;
  border-style: solid;
  border-width: 10px;
}

.KAFU-back {
  background-color: #0d1699;
}

.rei-front {
  background-color: #191919;
  border: #fd8700;
  border-style: solid;
  border-width: 10px;
}

.rei-back {
  background-color: #bb3f06;
}

.mikuGUMI-front {
  background-color: #191919;
  border-image: linear-gradient(to right, #78CDD7, #73f07e) 1;
  border-style: solid;
  border-width: 10px;
}

.mikuGUMI-back {
  background: linear-gradient(to right, #3f8aad, #079268);
}

.mikuteto-front {
  background-color: #191919;
  border-image: linear-gradient(to right, #78CDD7, #f85e6b) 1;
  border-style: solid;
  border-width: 10px;
}

.mikuteto-back {
  background: linear-gradient(to right, #3f8aad, #750647);
}

.rinlen-front {
  background-color: #191919;
  border-image: linear-gradient(to right, #dda01c, #f8e36e) 1;
  border-style: solid;
  border-width: 10px;
}

.rinlen-back {
  background: linear-gradient(to right, #a36009, #a37f09);
}

.mikuflower-front {
  background-color: #191919;
  border-image: linear-gradient(to right, #78CDD7, #dfa1f1) 1;
  border-style: solid;
  border-width: 10px;
}

.mikuflower-back {
  background: linear-gradient(to right, #3f8aad, #820792);
}

.icon {
  width: 20%;
}