/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}

.center-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 500px;
  width: 90%;
}

.balloons {
  position: relative;
  height: 120px;
}

.balloon {
  width: 40px;
  height: 55px;
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  animation: float 6s ease-in-out infinite;
}

.b1 { background:#ff6b6b; left:10%; animation-delay:0s; }
.b2 { background:#ffd93d; left:30%; animation-delay:1s; }
.b3 { background:#6bcBef; left:50%; animation-delay:2s; }
.b4 { background:#b28dff; left:70%; animation-delay:3s; }
.b5 { background:#6ddf8c; left:90%; animation-delay:4s; }

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-25px); }
  100% { transform: translateY(0px); }
}

.menu {
  position: sticky;
  top: 0;
  background: rgba(255,255,255,0.95);
  padding: 12px 10px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  z-index: 1000;
}

.menu a {
  margin: 0 10px;
  text-decoration: none;
  color: #2f5d62;
  font-weight: 600;
  font-size: 15px;
}

.menu a:hover {
  color: #ff6b6b;
}

html {
  scroll-behavior: smooth;
  
}
.sign up-button {
  display:inline-block;
  background:#ff6b6b;
  color:white;
  text-decoration:none;
  padding:12px 18px;
  border-radius:8px;
  font-weight:600;
  margin-top:10px;
}

#countdown {
  text-align: center;
  font-size: 28px;
  font-weight: 600;
  color: #2f5d62;
  background: #fff9e6;
  padding: 16px 20px;
  margin: 20px auto;
  border-radius: 14px;
  max-width: 500px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}

.balloon::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 45px;
  background: #666;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
}

header {
  background: linear-gradient(#bfe9ff, #e9f8ff);
  padding: 40px 20px 60px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.music-button {
  display: inline-block;
  background: #ffd93d;
  color: #2f5d62;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
}

.map-button {
  display: inline-block;
  background: #6bcBef;
  color: white;
  text-decoration: none;
  padding: 12px 18px;
  border-radius: 8px;
  font-weight: 600;
  margin-top: 15px;
}

#music {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

#music h2 {
  grid-column: 1 / -1;
  text-align: center;
}

.song-card {
  background: white;
  padding: 15px;
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
  text-align: center;
}

@media (min-width: 700px) {
  #music {
    grid-template-columns: 1fr 1fr;
  }
}