body {
  background-color: #333;
}

@font-face {
  font-family: "handwritten-top";
  src: url("miama_nueava.ttf");
}
@font-face {
  font-family: "handwritten-text";
  src: url("czizh.ttf");
}
.hpb-title {
  font-family: "handwritten-top";
  color: #f0e4d0;
  text-align: center;
  font-size: 100px;
  padding-bottom: 400px;
}

.hpb-text {
  font-size: 3.5em;
  font-weight: bold;
  font-family: "handwritten-text";
  color: #f0e4d0;
  text-align: center;
  width: 80%;
  margin-left: 10%;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 5s;
  padding-top: 100px;
}

.cake {
  position: relative;
  width: 250px;
  height: 200px;
  left: 50%;
  margin-top: -70px;
  margin-left: -125px;
  padding: auto;
}

.plate {
  width: 270px;
  height: 110px;
  position: absolute;
  bottom: -10px;
  left: -10px;
  background-color: #ccc;
  border-radius: 50%;
  box-shadow: 0 2px 0 rgb(178.5, 178.5, 178.5), 0 4px 0 rgb(178.5, 178.5, 178.5), 0 5px 40px rgba(0, 0, 0, 0.5);
}

.cake > * {
  position: absolute;
}

.layer {
  position: absolute;
  display: block;
  width: 250px;
  height: 100px;
  border-radius: 50%;
  background-color: #f8dad2;
  box-shadow: 0 6px 0px rgb(244.43, 199.13, 187.05), 0 9px 0px rgb(244.2926923077, 198.4042307692, 186.1673076923), 0 12px 0px rgb(244.1553846154, 197.6784615385, 185.2846153846), 0 15px 0px rgb(244.0180769231, 196.9526923077, 184.4019230769), 0 18px 0px rgb(243.8807692308, 196.2269230769, 183.5192307692), 0 21px 0px rgb(243.7434615385, 195.5011538462, 182.6365384615), 0 24px 0px rgb(243.6061538462, 194.7753846154, 181.7538461538), 0 27px 0px rgb(243.4688461538, 194.0496153846, 180.8711538462), 0 30px 0px rgb(243.3315384615, 193.3238461538, 179.9884615385), 0 33px 0px rgb(243.1942307692, 192.5980769231, 179.1057692308), 0 36px 0px rgb(243.0569230769, 191.8723076923, 178.2230769231), 0 39px 0px rgb(242.9196153846, 191.1465384615, 177.3403846154), 0 42px 0px rgb(242.7823076923, 190.4207692308, 176.4576923077), 0 45px 0px rgb(242.645, 189.695, 175.575), 0 48px 0px rgb(242.5076923077, 188.9692307692, 174.6923076923), 0 51px 0px rgb(242.3703846154, 188.2434615385, 173.8096153846), 0 54px 0px rgb(242.2330769231, 187.5176923077, 172.9269230769), 0 57px 0px rgb(242.0957692308, 186.7919230769, 172.0442307692), 0 60px 0px rgb(241.9584615385, 186.0661538462, 171.1615384615), 0 63px 0px rgb(241.8211538462, 185.3403846154, 170.2788461538), 0 66px 0px rgb(241.6838461538, 184.6146153846, 169.3961538462), 0 69px 0px rgb(241.5465384615, 183.8888461538, 168.5134615385), 0 72px 0px rgb(241.4092307692, 183.1630769231, 167.6307692308), 0 75px 0px rgb(241.2719230769, 182.4373076923, 166.7480769231), 0 78px 0px rgb(241.1346153846, 181.7115384615, 165.8653846154), 0 81px 0px rgb(240.9973076923, 180.9857692308, 164.9826923077), 0 84px 0px rgb(240.86, 180.26, 164.1), 0 87px 0px rgb(240.7226923077, 179.5342307692, 163.2173076923), 0 90px 0px rgb(240.5853846154, 178.8084615385, 162.3346153846), 0 93px 0px rgb(240.4480769231, 178.0826923077, 161.4519230769), 0 96px 0px rgb(240.3107692308, 177.3569230769, 160.5692307692), 0 99px 0px rgb(240.1734615385, 176.6311538462, 159.6865384615);
}

.cake-top {
  top: -75px;
  left: 0px;
  width: 250px;
  height: 250px;
  background-image: url("cat-cake.svg"); /* replace with your actual SVG path */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transform: scale(1, 0.4); /* small lift effect */
}

.candle {
  background-color: #7b020b;
  width: 9px;
  height: 50px;
  border-radius: 8px/4px;
  top: -30px;
  left: 50%;
  margin-left: -8px;
  z-index: 10;
}
.candle:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 9px;
  height: 4.5px;
  border-radius: 50%;
  background-color: rgb(173.184, 2.816, 15.488);
}

.thread {
  position: absolute;
  width: 3px;
  height: 10px;
  top: -6.5px;
  left: 50%;
  margin-left: -1.5px;
  z-index: 10;
  border-radius: 40% 40% 0 0;
  background: #150a01;
}

.flame {
  position: absolute;
  background-color: orange;
  width: 18px;
  height: 35px;
  border-radius: 10px 10px 10px 10px/25px 25px 10px 10px;
  top: -34px;
  left: 50%;
  margin-left: -9px;
  z-index: 10;
  box-shadow: 0 0 10px rgba(255, 165, 0, 0.5), 0 0 20px rgba(255, 165, 0, 0.5), 0 0 60px rgba(255, 165, 0, 0.5), 0 0 80px rgba(255, 165, 0, 0.5);
  transform-origin: 50% 90%;
  animation: flicker 1s ease-in-out alternate infinite;
}

@keyframes flicker {
  0% {
    transform: skewX(5deg);
    box-shadow: 0 0 10px rgba(255, 165, 0, 0.2), 0 0 20px rgba(255, 165, 0, 0.2), 0 0 60px rgba(255, 165, 0, 0.2), 0 0 80px rgba(255, 165, 0, 0.2);
  }
  25% {
    transform: skewX(-5deg);
    box-shadow: 0 0 10px rgba(255, 165, 0, 0.5), 0 0 20px rgba(255, 165, 0, 0.5), 0 0 60px rgba(255, 165, 0, 0.5), 0 0 80px rgba(255, 165, 0, 0.5);
  }
  50% {
    transform: skewX(10deg);
    box-shadow: 0 0 10px rgba(255, 165, 0, 0.3), 0 0 20px rgba(255, 165, 0, 0.3), 0 0 60px rgba(255, 165, 0, 0.3), 0 0 80px rgba(255, 165, 0, 0.3);
  }
  75% {
    transform: skewX(-10deg);
    box-shadow: 0 0 10px rgba(255, 165, 0, 0.4), 0 0 20px rgba(255, 165, 0, 0.4), 0 0 60px rgba(255, 165, 0, 0.4), 0 0 80px rgba(255, 165, 0, 0.4);
  }
  100% {
    transform: skewX(5deg);
    box-shadow: 0 0 10px rgba(255, 165, 0, 0.5), 0 0 20px rgba(255, 165, 0, 0.5), 0 0 60px rgba(255, 165, 0, 0.5), 0 0 80px rgba(255, 165, 0, 0.5);
  }
}
@keyframes blowOut {
  0% {
    opacity: 1;
  }
  99% {
    opacity: 0.01;
    width: 100%;
    height: 100%;
  }
  100% {
    opacity: 0;
    width: 0;
    height: 0;
  }
}/*# sourceMappingURL=styles.css.map */