* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  background: #020611;
  font-family: Arial, sans-serif;
}

.ocean {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;

background:
    radial-gradient(
      circle at 50% 15%,
      rgba(0, 194, 255, 0.18),
      transparent 35%
    ),
    radial-gradient(
      circle at 20% 70%,
      rgba(92, 0, 255, 0.12),
      transparent 35%
    ),
    linear-gradient(
      to bottom,
      #071b35 0%,
      #04101f 45%,
      #01050d 100%
    );
}

/* Underwater light beams */

.light {
  position: absolute;
  top: -20%;
  width: 220px;
  height: 120%;
  opacity: 0.13;

background: linear-gradient(
    to bottom,
    rgba(109, 226, 255, 0.8),
    transparent
  );

filter: blur(18px);
  transform-origin: top;
}

.light-1 {
  left: 20%;
  transform: rotate(14deg);
  animation: lightMove1 8s ease-in-out infinite alternate;
}

.light-2 {
  right: 20%;
  transform: rotate(-16deg);
  animation: lightMove2 10s ease-in-out infinite alternate;
}

@keyframes lightMove1 {
  from {
    transform: rotate(10deg) translateX(-20px);
  }

to {
    transform: rotate(18deg) translateX(40px);
  }
}

@keyframes lightMove2 {
  from {
    transform: rotate(-12deg) translateX(20px);
  }

to {
    transform: rotate(-20deg) translateX(-40px);
  }
}

/* Jellyfish */

.jellyfish {
  position: absolute;

left: 50%;
  top: 42%;

width: 220px;
  height: 320px;

transform: translate(-50%, -50%);

animation: jellyFloat 5s ease-in-out infinite;
}

@keyframes jellyFloat {
  0%,
  100% {
    transform:
      translate(-50%, -50%)
      translateY(20px)
      rotate(-2deg);
  }

50% {
    transform:
      translate(-50%, -50%)
      translateY(-25px)
      rotate(2deg);
  }
}

/* Jellyfish head */

.jelly-head {
  position: absolute;

left: 50%;
  top: 0;

width: 190px;
  height: 130px;

transform: translateX(-50%);

border-radius:
    50% 50% 35% 35% /
    70% 70% 30% 30%;

background:
    radial-gradient(
      circle at 35% 25%,
      rgba(255,255,255,0.9),
      rgba(255,255,255,0.15) 12%,
      transparent 25%
    ),
    radial-gradient(
      circle at 50% 55%,
      #ff4fe8,
      #7b4dff 48%,
      #00d9ff 100%
    );

box-shadow:
    0 0 25px rgba(124, 77, 255, 0.8),
    0 0 55px rgba(255, 79, 232, 0.45),
    inset 0 -18px 30px rgba(0, 217, 255, 0.3);

animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    transform:
      translateX(-50%)
      scaleX(1)
      scaleY(1);
  }

50% {
    transform:
      translateX(-50%)
      scaleX(1.04)
      scaleY(0.94);
  }
}

.jelly-head::after {
  content: "";

position: absolute;

left: 7%;
  bottom: -8px;

width: 86%;
  height: 35px;

border-radius: 50%;

background:
    radial-gradient(
      ellipse,
      rgba(255,255,255,0.35),
      rgba(255,79,232,0.2) 45%,
      transparent 70%
    );

filter: blur(2px);
}

.shine {
  position: absolute;

width: 50px;
  height: 24px;

left: 38px;
  top: 24px;

border-radius: 50%;

background: rgba(255,255,255,0.6);

filter: blur(7px);

transform: rotate(-25deg);
}

.inner-glow {
  position: absolute;

left: 50%;
  top: 60%;

width: 85px;
  height: 45px;

transform: translate(-50%, -50%);

border-radius: 50%;

background: #ff6bf2;

filter: blur(25px);

opacity: 0.8;
}

/* Tentacles */

.tentacles {
  position: absolute;

left: 50%;
  top: 112px;

width: 180px;
  height: 210px;

transform: translateX(-50%);
}

.tentacles span {
  position: absolute;

top: 0;

width: 16px;

border-radius: 50px;

background:
    linear-gradient(
      to bottom,
      rgba(255, 105, 235, 0.95),
      rgba(102, 86, 255, 0.75),
      rgba(0, 217, 255, 0.05)
    );

box-shadow:
    0 0 10px rgba(255, 79, 232, 0.5);

transform-origin: top;

animation:
    tentacleWave 3s ease-in-out infinite alternate;
}

.t1 {
  left: 18px;
  height: 145px;
  animation-delay: -0.3s !important;
}

.t2 {
  left: 42px;
  height: 185px;
  animation-delay: -1.1s !important;
}

.t3 {
  left: 67px;
  height: 155px;
  animation-delay: -0.7s !important;
}

.t4 {
  left: 88px;
  height: 205px;
  animation-delay: -1.6s !important;
}

.t5 {
  left: 110px;
  height: 170px;
  animation-delay: -0.5s !important;
}

.t6 {
  left: 135px;
  height: 190px;
  animation-delay: -1.3s !important;
}

.t7 {
  left: 158px;
  height: 140px;
  animation-delay: -0.9s !important;
}

@keyframes tentacleWave {
  0% {
    transform:
      rotate(-7deg)
      skewX(-4deg)
      scaleY(0.94);
  }

50% {
    transform:
      rotate(4deg)
      skewX(7deg)
      scaleY(1.04);
  }

100% {
    transform:
      rotate(9deg)
      skewX(-6deg)
      scaleY(0.98);
  }
}

/* Bubbles */

.bubble {
  position: absolute;

bottom: -60px;

border: 1px solid rgba(180, 235, 255, 0.45);

background:
    radial-gradient(
      circle at 30% 25%,
      rgba(255,255,255,0.7),
      rgba(80,200,255,0.1) 35%,
      transparent 65%
    );

border-radius: 50%;

box-shadow:
    inset 0 0 8px rgba(255,255,255,0.15),
    0 0 10px rgba(0,200,255,0.08);

animation:
    bubbleRise linear infinite;
}

.b1 {
  left: 12%;
  width: 20px;
  height: 20px;
  animation-duration: 8s;
}

.b2 {
  left: 27%;
  width: 10px;
  height: 10px;
  animation-duration: 6s;
  animation-delay: -2s;
}

.b3 {
  left: 42%;
  width: 16px;
  height: 16px;
  animation-duration: 9s;
  animation-delay: -5s;
}

.b4 {
  left: 65%;
  width: 24px;
  height: 24px;
  animation-duration: 10s;
  animation-delay: -4s;
}

.b5 {
  left: 78%;
  width: 12px;
  height: 12px;
  animation-duration: 7s;
  animation-delay: -1s;
}

.b6 {
  left: 90%;
  width: 18px;
  height: 18px;
  animation-duration: 11s;
  animation-delay: -7s;
}

@keyframes bubbleRise {
  0% {
    transform:
      translateY(0)
      translateX(0)
      scale(0.8);

opacity: 0;
  }

10% {
    opacity: 0.8;
  }

50% {
    transform:
      translateY(-55vh)
      translateX(30px)
      scale(1);
  }

100% {
    transform:
      translateY(-115vh)
      translateX(-20px)
      scale(1.15);

opacity: 0;
  }
}

/* Soft glow at bottom */

.floor-glow {
  position: absolute;

bottom: -120px;
  left: 50%;

width: 600px;
  height: 220px;

transform: translateX(-50%);

background:
    radial-gradient(
      ellipse,
      rgba(0, 183, 255, 0.16),
      transparent 65%
    );

filter: blur(20px);
}

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground