/* Scroll smoothly when you click a menu button */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #40E0D0; /* turquoise */
  font-family: sans-serif;
}

/* The top part of the page with the logo and title */
header {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 40px 16px;
}

/* Stars and sparkles that twinkle around the title */
.deco {
  position: absolute;
  height: auto;
  opacity: 0.5;
  animation: twinkle 2s ease-in-out infinite;
}

.star { width: clamp(18px, 3.5vw, 32px); }
.sparkle { width: clamp(12px, 2.5vw, 20px); }

.s1 { top: 6%;  left: 4%; }
.s2 { top: 50%; right: 3%; animation-delay: 0.7s; }
.s3 { bottom: 6%; left: 30%; animation-delay: 1.3s; }
.k1 { top: 55%; left: 10%; animation-delay: 0.4s; }
.k2 { top: 4%;  right: 20%; animation-delay: 1s; }
.k3 { bottom: 5%; right: 15%; animation-delay: 1.6s; }
.k4 { top: 25%; left: 22%; animation-delay: 0.2s; }

@keyframes twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.5; }
  50%      { transform: scale(0.7) rotate(20deg); opacity: 0.25; }
}

/* Turn off the twinkling for people whose computer asks for less movement */
@media (prefers-reduced-motion: reduce) {
  .deco { animation: none; }
}

.logo {
  width: 160px;
  max-width: 50vw;
  height: auto;
}

/* Big rainbow title */
.title {
  margin: 10px 0 0;
  font-size: clamp(48px, 12vw, 110px);
  font-weight: 900;
  background: linear-gradient(90deg, #FF4D6D, #FF9F1C, #FFD60A, #38B000, #00B4D8, #7B2CBF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* white glow so the rainbow stands out on turquoise */
  filter: drop-shadow(0 0 3px white) drop-shadow(0 0 3px white);
}

/* The menu buttons */
.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  padding: 0 16px 30px;
}

.menu a {
  background: white;
  color: #7B2CBF;
  font-size: 22px;
  font-weight: bold;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 999px;
  box-shadow: 0 4px 0 #2BB3A6;
  transition: transform 0.15s;
}

.menu a:hover {
  transform: translateY(-3px) scale(1.05);
}

/* The white boxes for each kind of item */
main {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px 40px;
}

.box {
  background: white;
  border-radius: 24px;
  padding: 24px;
  margin-bottom: 24px;
  text-align: center;
  scroll-margin-top: 16px;
}

.box h2 {
  margin-top: 0;
  font-size: 34px;
  color: #7B2CBF;
}

.box p {
  font-size: 20px;
  color: #333;
}

/* No extra gap at the bottom of a box */
.box > :last-child {
  margin-bottom: 0;
}

/* Price tag */
.box .price {
  display: inline-block;
  background: #FFD60A;
  color: #333;
  font-size: 26px;
  font-weight: bold;
  padding: 6px 20px;
  border-radius: 999px;
}

/* Big "Order it now!" words */
.box .order-now {
  font-size: 30px;
  font-weight: 900;
  color: #FF4D6D;
}

/* The layer of stars that covers the whole page, behind everything */
body {
  position: relative;
}

.sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Keep the real stuff on top of the stars */
header, .menu, main {
  position: relative;
  z-index: 1;
}

/* Speech bubble above the smiley */
.bubble {
  position: relative;
  display: inline-block;
  margin: 0 auto 22px;
  background: white;
  color: #7B2CBF;
  font-size: 22px;
  font-weight: bold;
  padding: 12px 24px;
  border-radius: 24px;
}

/* The little pointy tail under the bubble */
.bubble::after {
  content: "";
  position: absolute;
  bottom: -16px;
  left: 50%;
  margin-left: -12px;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 18px solid white;
}

/* Put the smiley on its own line under the bubble */
.logo {
  display: block;
  margin: 0 auto;
}