:root {
	--purple: rgb(189.66, 127.5, 255);
}

::selection {
	background-color: var(--purple);
	color: white;
}

body {
	background-color: var(--bs-dark);
	color: var(--purple);
}

.bold {
	font-weight: bold;
}

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

.row {
	justify-content: center;
}

.card {
	border: none;
	perspective: 1000px;
	position: relative;
}

.card-face {
	width: 100%;
	height: 100%;
	position: absolute;
	backface-visibility: hidden;
	transition: transform 0.3s;
	display: flex;
	justify-content: center;
	align-items: center;
}

.front {
	z-index: 2;
	transform: rotateY(0deg);
}

.back {
	transform: rotateY(180deg);
}

.card.flipped .front {
	transform: rotateY(180deg);
}

.card.flipped .back {
	transform: rotateY(360deg);
	z-index: 3;
}

#hearts-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 9999;
}

.heart {
  position: absolute;
  color: rgba(255, 0, 194.97, .6);
  user-select: none;
  transition: all .3s;
  animation: floatUp 5s infinite;
}

@keyframes floatUp {
  0% {
    transform: translateY(100vh) scale(0.5);
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) scale(1.5);
    opacity: 0;
  }
}

#cursor-text {
	transform: translate(-50%, -50%);
	font-weight: bold;
	position: absolute;
	pointer-events: none;
	display: none;
	z-index: 1000;
}