body {
  font-family: sans-serif;
  background-color: #fffafc;
  margin: 0;
  padding: 0;
}

nav ul {
  list-style: none;
  padding: 20px;
  background-color: #f8bbd0;
  display: flex;
  gap: 15px;
  justify-content: center;
}

nav ul li a {
  text-decoration: none;
  color: #6a1b9a;
  font-weight: bold;
}

.card {
  max-width: 800px;
  margin: 40px auto;
  padding: 30px;
  background-color: #fce4ec;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  position: relative;
  z-index: 2;
}

img.profile {
  border-radius: 50%;
  border: 5px solid #f8bbd0;
  width: 150px;
  margin-top: 20px;
}

.bubble {
  position: absolute;
  border-radius: 50%;
  opacity: 0.5;
  z-index: 0;
  animation: float 20s infinite ease-in-out;
}

.bubble:nth-child(1) {
  width: 120px; height: 120px;
  background: #fce1e4;
  top: 10%; left: 15%;
  animation-duration: 25s;
}
.bubble:nth-child(2) {
  width: 200px; height: 200px;
  background: #e0f7fa;
  top: 40%; left: 70%;
  animation-duration: 30s;
}
.bubble:nth-child(3) {
  width: 150px; height: 150px;
  background: #f3e5f5;
  top: 70%; left: 30%;
  animation-duration: 35s;
}

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