@font-face {
  font-family: 'Minecraft';
  src: url('fonts/Minecraft.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin: 0;
  background-color: #49264b;
  overflow-x: hidden;
}

h1 {
  font-family: 'Minecraft', sans-serif;
  font-size: 3vw; /* scales with screen width */
  color: #ffffff;
  margin-top: 6%;
  margin-bottom: -10px;
  letter-spacing: 0.5vw;
  z-index: 3;
  text-align: center;
}

h2 {
  font-family: 'Minecraft', sans-serif;
  font-size: 1.5vw;
  z-index: 3;
  letter-spacing: 0.3vw;
  color: #ecdb3d;
  text-align: center;
}

h3 {
  font-family: 'Minecraft', sans-serif;
  font-size: .8vw;
  z-index: 5;
  letter-spacing: 0.1vw;
  color: #ecdb3d;
  animation: breathe 3s ease-in-out infinite;
  text-align: center;
}

/* Cake container */
.cake-container {
  position: relative;
  display: inline-block;
}

.cake-container img {
  width: 80vw; /* scale with viewport width */
  max-width: 500px;
  height: auto;
  image-rendering: pixelated;
  display: block;
}

/* Candle GIFs */
.candle {
  position: absolute;
  cursor: pointer;
  width: 8vw; /* responsive width */
  max-width: 60px;
  height: auto;
}

/* Sign popup */
.sign {
  position: fixed;
  bottom: -300px; /* start hidden */
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  transition: bottom 0.6s ease, opacity 0.6s ease;
  z-index: 100;
  text-align: center;
  opacity: 0;
}

.sign img {
  display: block;
  width: 70vw; /* scale sign */
  max-width: 500px;
  height: auto;
}

.sign-text {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2vw;
  font-family: 'Minecraft', sans-serif;
  color: black;
  width: 80%;
  pointer-events: none;
}

/* Rise animation */
@keyframes rise {
  0% { bottom: -300px; opacity: 0; }
  100% { bottom: -150px; opacity: 1; }
}

/* Fall animation */
@keyframes fall {
  0% { bottom: -150px; opacity: 1; }
  100% { bottom: -300px; opacity: 0; }
}

/* Fade text */
@keyframes fadeOutIn {
  0% { opacity: 0; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.sign.show {
  animation: rise 0.6s ease forwards;
}

.sign.hide {
  animation: fall 0.6s ease forwards;
}

.sign.fadeText {
  animation: fadeOutIn 0.6s ease forwards;
}

/* Breathing animation for text */
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* MOBILE MEDIA QUERIES */
@media (max-width: 768px) {
  h1 { font-size: 8vw; letter-spacing: 0.8vw; margin-top: 70px;}
  h2 { font-size: 5vw; letter-spacing: 0.5vw; }
  h3 { font-size: 3.5vw; letter-spacing: 0.3vw; margin-top: 50px;}
  
  .cake-container img { width: 90vw; }
  .sign img { width: 90vw; }
  .sign-text { font-size: 5vw; }
  .candle { width: 12vw; max-width: 50px; }
}

/* Media query for mobile: center all signs */
@media (max-width: 768px) {
  #sign1,
  #sign2,
  #sign3 {
    left: 50% !important; /* override left positions */
    bottom: -7% !important; /* center vertically */
 transform: translateX(-50%) scale(1.2) !important;
  }

  .sign img {
    width: 100vw !important; /* scale sign to fit screen */
    max-width: 300px;
  }

  .sign-text {
    font-size: 5vw !important;
  }

}