body {
 background-color: #073b4c;
}

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

h2 {
 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: #ffffff;
 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 {
 font-family: ChopinScript;
 text-align: center;
 font-size: 21px;
 margin: 30px;
 transition: .1s;
}

.image {
    text-align: center; 
    margin-top: 10px; 
  }
  
  .image img {
    max-width: 100%; 
    width: 80%;
    height: auto; 
    border-radius: 50%; 
    border: 5px solid #117568; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); 
  }
  

.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 {
 font-family: century gothic;
 margin: 3px 10px 10px 30px;
 color: #333;
 text-align: justify;
}

.name {
 position: absolute;
 left: 150px;
 color: #333;
 text-decoration: underline;
}

.back {
 font-family: century gothic;
 color: #333;
 text-align: start;
 margin: 30px;
 font-size: 12px;

}
/* Add this CSS to your "style.css" file */
#playButton {
  display: block;
  margin: 0 auto;
  padding: 10px 20px;
  background-color: #3498db; /* Blue background color */
  color: #fff; /* White text color */
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

#playButton:hover {
  background-color: #2980b9; /* Darker blue color on hover */
}

.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;
 }
}
footer{
 font-size: 10px;
 color: white;
 position: absolute;
 bottom: 0px;
}
footer a{
 color: white;
}