.body {
 display: flex;
 align-items: center;
 justify-content: center;
 margin-top: 100px;
}

h7 {
 animation: 1s blink linear infinite;
 display: flex;
 justify-content: center;
}

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

.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;
}

.happy {
 text-align: center;
 margin: 30px;
 background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
 transition: .1s;
}

.balloons {
 position: absolute;
}
.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);
}

p {
 margin: 15px 10px 10px 30px;
 color: #333;
}

.name {
 position: absolute;
 left: 120px;
 /* top: 200px; */
 color: #333;
 text-decoration: underline;
}

.back {
 color: #333;
 text-align: center;
 margin: 30px;
 outline-color: #333;
 outline-style: dashed;
}

.birthdayCard: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);
}

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

.birthdayCard:hover .happy {
 visibility: hidden;
}

@keyframes blink {
 0% {
  color: white;
 }

 20% {
  color: yellow;
 }

 40% {
  color: greenyellow;
 }

 60% {
  color: red;
 }

 80% {
  color: hotpink;
 }

 100% {
  color: blue;
 }
}