html, body {
	overflow: hidden;
}
body {
	display: flex;
	align-items: center;
	justify-content: center;
	height:100vh;
	background-color: #f04747;
}

.loveCard {
  position: relative;
  width: 250px;
  height:350px;
  cursor: pointer;
  transform-style: preserve-3d;
  transform: perspective(2500px);
  transition: 1s;
}

.loveCard:hover {
  transform: perspective(2500px) rotate(5deg);
  box-shadow: inset 100px 20px 100px rgba(0,0,0,.2), 0 10px 100px rgba(0,0,0,0.5);
}

.loveCard:hover .cardFront {
  transform: rotateY(-160deg); 
}

.loveCard:hover .open, .loveCard:hover .cover-img {
  visibility:hidden; 
}

.cardFront {
	position: relative;
	background-color: #fff;
	width: 250px;
	height:350px;
	overflow: hidden;
	transform-origin: left;
	box-shadow: inset 100px 20px 100px rgba(0,0,0,.2), 30px 0 50px rgba(0,0,0,0.4);
	transition: .6s;
	border-radius: 10px;
}

.open {
	font-family: Tahoma, sans-serif;
	text-align: center;
	margin:30px; 
	margin-top: 60px;
	transition: .2s;
}

.cover-img {
	position: relative;
	width: 150px;
	height: 200px;
	margin: 0 auto;
	background-image: url(gift.png);
	background-size: 100%;
	background-repeat: no-repeat;
	transition: .2s;
}

.cardInside {
	position: absolute;
	background-color: #fff;
	width: 250px;
	height:350px;
	z-index:-1;
	left:0;
	top:0;
	box-shadow: inset 100px 20px 100px rgba(0,0,0,0.2);
  	border-radius: 10px;
}

p {
	font-family: 'Shantell Sans', cursive;
	color: #333;
	margin: 20px 30px;	
    margin-bottom: 10px;
}

.name {
  position: absolute;
  left:150px;
  top:250px;
  color: #333;
}

.main {
	font-family: Tahoma, sans-serif;
	color: #333;
	text-align: center;
	margin:30px; 
	margin-bottom: 20px;
}

/*Pulsing heart*/
#heart {
    position: relative;
    width: 150px;
    height: 150px;
    animation: heartbeat 1s infinite;
    margin: 0 auto;
    background-image: url(heart_min.png);
    background-size: 100%;
    background-repeat: no-repeat;
}



@keyframes heartbeat
{
  0%
  {
    transform: scale( .75 );
  }
  20%
  {
    transform: scale( 1 );
  }
  40%
  {
    transform: scale( .75 );
  }
  60%
  {
    transform: scale( 1 );
  }
  80%
  {
    transform: scale( .75 );
  }
  100%
  {
    transform: scale( .75 );
  }
}
/*Bg hearts*/
		@keyframes heartfade {
			0% {
				opacity : 1;
			}
			50% {
				opacity : 0;
			}
		}
		.heart {
			z-index : -1;
			animation : heartfade 6s linear;
			position : absolute; 
		}
		.heart:before,
		.heart:after {
			content : "";
			background-color : #fff;
			position : absolute;
			height : 30px;
			width : 45px;
			border-radius : 15px 0px 0px 15px;
		}

		.heart:before {
			transform : rotate(45deg);
		}

		.heart:after {
			left : 10.5px;
			transform : rotate(135deg);
		}