body {
  margin: 0;
  height: 100vh;
  background: #121212;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #f5f5f5;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 10;
}

h1 {
  font-size: 3rem;
  letter-spacing: 2px;
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 20;
}

p {
  font-size: 1.25rem;
  margin: 0.5rem 0 2rem;
  color: #ccc;
  position: relative;
  z-index: 20;
}

.contact {
  background: rgba(30, 30, 30, 0.85);
  padding: 1rem 2rem;
  border-radius: 10px;
  box-shadow: 0 0 20px #ff6f61;
  max-width: 320px;
  width: 100%;
  position: relative;
  z-index: 20;
}

a {
  color: #ff6f61;
  text-decoration: none;
  font-weight: 600;
}

a:hover {
  text-decoration: underline;
}

@media (max-width: 400px) {
  h1 {
    font-size: 2rem;
  }
}

/* Contenedor de burbujas */
.bubbles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}

/* Estilo común para cada burbuja */
.bubble {
  position: absolute;
  bottom: -150px;
  border-radius: 50%;
  opacity: 0.18;
  filter: drop-shadow(0 0 10px rgba(255 255 255 / 0.3));
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  background: radial-gradient(circle at 30% 30%, rgba(255 255 255 / 0.7), rgba(255 255 255 / 0) 70%);
}

/* Burbujas individuales con colores y degradados personalizados */

.bubble1 {
  width: 150px;
  height: 150px;
  left: 10%;
  animation-name: floatUp1;
  animation-duration: 20s;
  animation-delay: 0s;
  background: radial-gradient(circle at 30% 30%, rgba(255, 102, 102, 0.6), rgba(255, 102, 102, 0) 70%);
}

.bubble2 {
  width: 120px;
  height: 120px;
  left: 30%;
  animation-name: floatUp2;
  animation-duration: 25s;
  animation-delay: 5s;
  opacity: 0.15;
  background: radial-gradient(circle at 30% 30%, rgba(102, 204, 255, 0.5), rgba(102, 204, 255, 0) 70%);
}

.bubble3 {
  width: 180px;
  height: 180px;
  left: 55%;
  animation-name: floatUp3;
  animation-duration: 18s;
  animation-delay: 2s;
  opacity: 0.2;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 102, 0.5), rgba(255, 255, 102, 0) 70%);
}

.bubble4 {
  width: 140px;
  height: 140px;
  left: 75%;
  animation-name: floatUp4;
  animation-duration: 22s;
  animation-delay: 3s;
  opacity: 0.16;
  background: radial-gradient(circle at 30% 30%, rgba(102, 255, 178, 0.5), rgba(102, 255, 178, 0) 70%);
}

.bubble5 {
  width: 160px;
  height: 160px;
  left: 85%;
  animation-name: floatUp5;
  animation-duration: 28s;
  animation-delay: 7s;
  opacity: 0.15;
  background: radial-gradient(circle at 30% 30%, rgba(255, 102, 204, 0.5), rgba(255, 102, 204, 0) 70%);
}

/* Animaciones para subir y desplazarse lateralmente */

@keyframes floatUp1 {
  0% {
    transform: translateX(0) translateY(0) scale(1);
    opacity: 0.18;
  }
  50% {
    opacity: 0.25;
  }
  100% {
    transform: translateX(20px) translateY(-110vh) scale(1.1);
    opacity: 0;
  }
}

@keyframes floatUp2 {
  0% {
    transform: translateX(0) translateY(0) scale(1);
    opacity: 0.15;
  }
  50% {
    opacity: 0.22;
  }
  100% {
    transform: translateX(-25px) translateY(-120vh) scale(1.05);
    opacity: 0;
  }
}

@keyframes floatUp3 {
  0% {
    transform: translateX(0) translateY(0) scale(1);
    opacity: 0.2;
  }
  50% {
    opacity: 0.28;
  }
  100% {
    transform: translateX(15px) translateY(-115vh) scale(1.1);
    opacity: 0;
  }
}

@keyframes floatUp4 {
  0% {
    transform: translateX(0) translateY(0) scale(1);
    opacity: 0.16;
  }
  50% {
    opacity: 0.23;
  }
  100% {
    transform: translateX(-15px) translateY(-112vh) scale(1.05);
    opacity: 0;
  }
}

@keyframes floatUp5 {
  0% {
    transform: translateX(0) translateY(0) scale(1);
    opacity: 0.15;
  }
  50% {
    opacity: 0.22;
  }
  100% {
    transform: translateX(10px) translateY(-125vh) scale(1.1);
    opacity: 0;
  }
}

/* Botones flotantes */

.floating-buttons {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 30;
}

.floating-buttons a {
  width: 50px;
  height: 50px;
  background-color: #ff6f61;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 10px rgba(255, 111, 97, 0.6);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
}

.floating-buttons a:hover {
  background-color: #e85b4d;
  box-shadow: 0 6px 15px rgba(232, 91, 77, 0.8);
}

.floating-buttons svg {
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.3));
}