.content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.card-wrapper {
  width: 560px;
}
.card-wrapper .card {
  position: relative;
  width: 280px;
  height: 497.7777777778px;
  transform: perspective(1000px) translate(50%) scale(0.5) rotateY(0deg);
  transform-origin: 50px center;
  transition: 1s cubic-bezier(0, 0, 0, 0.94);
}
.card-wrapper .card .side {
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: perspective(1000px) rotateY(0);
  transform-origin: right center;
  transform-style: preserve-3d;
  transition: 1s cubic-bezier(0, 0, 0, 0.94);
}
.card-wrapper .card .side.side-a {
  border-radius: 10px 0 0 10px;
}
.card-wrapper .card .side.side-b {
  border-radius: 10px 0 0 10px;
}
.card-wrapper .card .side .back,
.card-wrapper .card .side .front {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backface-visibility: hidden;
  transition: 0 0.5s cubic-bezier(0, 0, 0, 0.94);
  overflow: hidden;
}
.card-wrapper .card .side .front {
  z-index: 2;
  transform-origin: center;
}
.card-wrapper .card .side .back {
  transform: rotateY(180deg);
}
.card-wrapper .card .side .back .heart {
  transform: rotateY(180deg);
  max-height: 100%;
}
.card-wrapper .card .side.side-b .front .heart .circle,
.card-wrapper .card .side.side-b .front .heart .rect {
  background: #f9bec7;
}
.card-wrapper .card .side.side-b .back .heart .title {
  display: none;
}
.card-wrapper.active .card {
  transform: perspective(1000px) translate(0%) scale(1) rotateY(0);
}
.card-wrapper.active .card .side.side-b {
  transform: perspective(1000px) rotateY(180deg);
}
.card-wrapper.active .card .side-a .front .heart .circle,
.card-wrapper.active .card .side-a .front .heart .rect {
  background: #ff5c8a !important;
}
.card-wrapper.active .card .side-b .back .heart .circle,
.card-wrapper.active .card .side-b .back .heart .rect {
  background: #ff5c8a !important;
}
.card-wrapper:not(.active) .heart {
  cursor: pointer;
}

.heart {
  font-family: "Satisfy", cursive;
}
.heart .heart-half {
  transform: rotate(-45deg) scale(0.8) translateX(23%) translateY(10%);
  transform-origin: 140px 140px;
}
.heart .heart-half .circle {
  width: 280px;
  height: 280px;
  background: red;
  border-radius: 50%;
  transition: background 1s cubic-bezier(0, 0, 0, 0.94);
}
.heart .heart-half .rect {
  width: 280px;
  height: 280px;
  background: red;
  margin-top: -140px;
  transition: background 1s cubic-bezier(0, 0, 0, 0.94);
}
.heart .title {
  position: absolute;
  top: 30%;
  font-family: "Quicksand", sans-serif;
  right: 10%;
  font-size: 38px;
  transform: rotate(45deg);
  color: #ff0a54;
}

.ijustcode {
  position: absolute;
  top: 124.4444444444px;
  right: 0;
  height: 100px;
  margin: auto;
  backface-visibility: hidden;
  transform: translateX(50%);
}

.side-b .ijustcode code {
  transform: rotateY(-180deg);
}
.side-b .front .ijustcode {
  display: none;
}

.hljs-addition, .hljs-attribute, .hljs-meta .hljs-string, .hljs-regexp, .hljs-string {
  color: #c379ba;
  font-weight: 600;
}

pre code.hljs {
  border-radius: 10px;
}

audio {
  display: none;
}

/*******
********

Confeti styles

********
*******/
@keyframes confetti-slow {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
  }
  100% {
    transform: translate3d(25px, 105vh, 0) rotateX(360deg) rotateY(180deg);
  }
}
@keyframes confetti-medium {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
  }
  100% {
    transform: translate3d(100px, 105vh, 0) rotateX(100deg) rotateY(360deg);
  }
}
@keyframes confetti-fast {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
  }
  100% {
    transform: translate3d(-50px, 105vh, 0) rotateX(10deg) rotateY(250deg);
  }
}
.container {
  /*width: 100vw;
  height: 100vh;
  background: #f0f0f0;*/
}

.confetti-container {
  perspective: 700px;
  position: absolute;
  overflow: hidden;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.confetti {
  position: absolute;
  z-index: 1;
  top: -10px;
  border-radius: 0%;
}

.confetti-animation-slow {
  animation: confetti-slow 2.5s linear 1 forwards;
}

.confetti-animation-medium {
  animation: confetti-medium 2s linear 1 forwards;
}

.confetti-animation-fast {
  animation: confetti-fast 1.5s linear 1 forwards;
}

#gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2;
  opacity: 0;
  transition: opacity 1s cubic-bezier(0, 0, 0, 0.94);
}