.card-back,
.card-front {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -moz-backface-visibility: hidden;
}
body,
html {
  margin: 0;
  padding: 0;
}
img {
  position: absolute;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
}
.gr {
  filter: hue-rotate(120deg) saturate(100%) brightness(300%);
}
.cy {
  filter: hue-rotate(175deg) saturate(100%) brightness(300%);
}
.bl {
  filter: hue-rotate(218deg) saturate(100%) brightness(150%);
}
.pu {
  filter: hue-rotate(290deg) saturate(200%) brightness(200%);
}
.re {
  filter: hue-rotate(342deg) saturate(100%) brightness(100%);
}
.or {
  filter: hue-rotate(52deg) saturate(200%) brightness(250%);
}
.ye {
  filter: hue-rotate(65deg) saturate(100%) brightness(400%);
}
.wh {
  filter: hue-rotate(0deg) saturate(0%) brightness(1000%);
}
@keyframes rotate360 {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.rotating {
  animation: 60s linear infinite rotate360;
}
.card {
  width: 100%;
  transform-style: preserve-3d;
  transition: transform 1.2s;
}
.card-back,
.flipped {
  transform: rotateY(180deg);
}
.card-front {
  padding-top: 100%;
  top: 50%;
  overflow: hidden;
}
.card-back {
  padding-bottom: 100%;
  overflow: hidden;
  background-color: #000;
  color: orange;
  font-size: 4vw;
  font-family: Arial, Helvetica, sans-serif;
  white-space: pre;
}