body {
  margin: 0;
  font-family: "Segoe UI", sans-serif;
  background: linear-gradient(180deg, #a2e8ff 0%, #79d6a7 50%, #fdf6b5 100%);
  overflow-x: hidden;
  position: relative;
}

.navbar {
  position: sticky;
  top: 0;
  backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.3);
  padding: 10px;
}

.navbar ul {
  display: flex;
  justify-content: center;
  gap: 20px;
  list-style: none;
  padding: 0;
}

.navbar a {
  padding: 10px 20px;
  background: linear-gradient(#ffffffaa, #dddddd88);
  border-radius: 50px;
  border: 1px solid #fff;
  box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.6),
              inset 0 -2px 5px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  color: #004;
  font-weight: bold;
  transition: transform 0.2s;
}

.navbar a:hover {
  transform: scale(1.05);
}

/* Header */
header {
  text-align: center;
  padding: 100px 20px;
  color: #002244;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

header h1 {
  font-size: 3em;
}

/* Bubble animation */
.bubble {
  position: absolute;
  bottom: -100px;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle at 30% 30%, #fff, #aeeaff);
  border-radius: 50%;
  animation: floatUp 15s linear infinite;
  opacity: 0.8;
}

.bubble.delay1 { left: 30%; animation-delay: 5s; }
.bubble.delay2 { left: 70%; animation-delay: 10s; }

@keyframes floatUp {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-120vh) scale(0.7); }
}