/* Balloon animation styles */
.balloon {
  position: fixed;
  left: 50%;
  bottom: 0;
  width: 40px;
  height: 60px;
  background: radial-gradient(circle at 60% 40%, #ff66a3 60%, #fff 100%);
  border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  z-index: 9999;
  animation: balloon-up 3s linear forwards;
}

.balloon.blue {
  background: radial-gradient(circle at 60% 40%, #77d6f8 60%, #fff 100%);
}

.balloon.pink {
  background: radial-gradient(circle at 60% 40%, #fa9ac0 60%, #fff 100%);
}

.balloon .rope {
  width: 4px;
  height: 32px;
  margin-top: -6px;
  background: linear-gradient(to bottom, #b48a78 60%, #fff 100%);
  border-radius: 50% 50% 60% 60% / 80% 80% 100% 100%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transform: rotate(-10deg);
  position: relative;
}

.balloon .rope:after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #b48a78;
  border-radius: 0 0 10px 10px;
  position: absolute;
  left: -3px;
  bottom: -6px;
}

@keyframes balloon-up {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(-100vh) scale(1.1); opacity: 0; }
}
.balloon {
  position: fixed;
  bottom: 0;
  width: 40px;
  height: 60px;
  background: radial-gradient(circle at 60% 40%, #ff66a3 60%, #fff 100%);
  border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  z-index: 9999;
  animation: balloon-up 3s linear forwards;
  display: block;
  pointer-events: none;
}

.balloon .rope {
  position: absolute;
  left: 50%;
  bottom: -38px;
  width: 3px;
  height: 38px;
  background: linear-gradient(to bottom, #b48a78 60%, #fff 100%);
  border-radius: 0 0 20px 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transform: translateX(-50%) rotate(15deg);
  z-index: 1;
  overflow: visible;
}
.balloon .rope:after {
  content: '';
  position: absolute;
  left: -4px;
  bottom: -2px;
  width: 12px;
  height: 16px;
  border-bottom: 2px solid #b48a78;
  border-radius: 0 0 16px 16px;
}
/* Balloon animation styles */
.balloon {
  position: fixed;
  left: 50%;
  bottom: 0;
  width: 40px;
  height: 60px;
  background: radial-gradient(circle at 60% 40%, #ff66a3 60%, #fff 100%);
  border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  z-index: 9999;
  animation: balloon-up 3s linear forwards;
}

.balloon.blue {
  background: radial-gradient(circle at 60% 40%, #77d6f8 60%, #fff 100%);
}

.balloon.pink {
  background: radial-gradient(circle at 60% 40%, #fa9ac0 60%, #fff 100%);
}

@keyframes balloon-up {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(-100vh) scale(1.1); opacity: 0; }
}
/* Cards Container Flex Layout */
.cards-container {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 3vw;
  width: 90vw;
  max-width: 1200px;
  margin: 3vw auto 3vw auto;
  padding: 0 2vw;
}
html { 
  font-size: 16px; 
}

body { 
  font-size: 1rem; 
  background-image: url('images/birthday.jpg');
  background-repeat: repeat;
  background-attachment: fixed;
}

h1 {
  font-size: clamp(6rem, 6vw, 3.5rem);
}

h2 {
  font-size: clamp(1.25rem, 3vw, 2.5rem);
}

p {
  font-size: clamp(1rem, 2vw, 1.25rem);
}

.Mamma-verjaardag-titel {
  color: pink;
  -webkit-text-stroke: 2.5px black;
}

.centered {
  text-align: center;
}

.justified {
  text-align: justify;
  text-justify: inter-word;
}

/* Card Style Femke - Pink Card */
.card.pink {
  font-family: Montserrat, sans-serif;
  flex: 1 1 0;
  min-width: 280px;
  max-width: 500px;
  background: #fa9ac0;
  border: 3px solid #000000;
  box-shadow: 12px 12px 0 #000000;
  overflow: hidden;
  transition: all 0.3s ease;
  max-width: 100%;
  max-height: 100%;
  translate: -6px -6px;
}

.card.pink .head {
  background: #ffffff;
  color: #000000;
  border-bottom: 3px solid #000000;
  font-size: clamp(1rem, 2vw, 1.1rem);
  font-weight: 900;
  padding: 0.5em 1em;
  height: 2.5em;
  width: 100%;
  box-sizing: border-box;
}

.card.pink .content {
  padding: 0.5em 1em;
  font-size: clamp(0.9rem, 2vw, 1rem);
  font-weight: 600;
  box-sizing: border-box;
}

.card.pink .button {
  padding: 0.4em 0.8em;
  margin-top: 0.7em;
  border: 3px solid #000000;
  box-shadow: 3px 3px 0 #000000;
  font-weight: 750;
  background: #79f0a4;
  transition: all 0.3s ease;
  cursor: pointer;
  font-size: clamp(0.9rem, 2vw, 1rem);
}

.card.pink .button:hover {
  translate: 1.5px 1.5px;
  box-shadow: 1.5px 1.5px 0 #000000;
  background: #1ac2ff;
}

.card.pink .button:active {
  translate: 3px 3px;
  box-shadow: 0 0 0 #000000;
}

.card.pink:hover {
  translate: -6px;
}

/* Card Style Thijmen - Blue Card */
.card.blue {
  font-family: Montserrat, sans-serif;
  flex: 1 1 0;
  min-width: 280px;
  max-width: 500px;
  background: #77d6f8;
  border: 3px solid #000000;
  box-shadow: 12px 12px 0 #000000;
  overflow: hidden;
  transition: all 0.3s ease;
  max-width: 100%;
  max-height: 100%;
  translate: -6px -6px;
}

.card.blue .head {
  background: #ffffff;
  color: #000000;
  border-bottom: 3px solid #000000;
  font-size: clamp(1rem, 2vw, 1.1rem);
  font-weight: 900;
  padding: 0.5em 1em;
  height: 2.5em;
  width: 100%;
  box-sizing: border-box;
}

.card.blue .content {
  padding: 0.5em 1em;
  font-size: clamp(0.9rem, 2vw, 1rem);
  font-weight: 600;
  box-sizing: border-box;
}

.card.blue .button {
  padding: 0.4em 0.8em;
  margin-top: 0.7em;
  border: 3px solid #000000;
  box-shadow: 3px 3px 0 #000000;
  font-weight: 750;
  background: #e6e792;
  transition: all 0.3s ease;
  cursor: pointer;
  font-size: clamp(0.9rem, 2vw, 1rem);
}

.card.blue .button:hover {
  translate: 1.5px 1.5px;
  box-shadow: 1.5px 1.5px 0 #000000;
  background: #4ade80;
}

.card.blue .button:active {
  translate: 3px 3px;
  box-shadow: 0 0 0 #000000;
}

.card.blue:hover {
  translate: -6px;
}