/* body {
  background: #013;
  color: #fff;
  height: 100vh;
  margin: 0;
} */

.css-art {
  width: 100%;
  height: 100%;
}

.css-art * {
  position: absolute;
}

.bubble {
  background: rgba(105, 178, 220, 0.067);
  border-radius: 65% 35% 38% 62% / 52% 30% 70% 48%;
  width: 10vmin;
  height: 10vmin;
  animation: bubble-anim 5s ease-in-out infinite alternate;
}

@keyframes bubble-anim {
  25% {
    transform: translateY(120%) rotate(-4deg);
    border-radius: 65% 35% 38% 62% / 41% 49% 51% 59%;
  }
  75% {
    transform: translateY(-120%) rotate(4deg);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  }
}

.bubble:nth-of-type(1) {
  left: 2%;
  top: 30%;
  animation-delay: -1000ms;
}


.bubble:nth-of-type(2) {
  left: 60%;
  top: 80%;
  animation-delay: -2000ms;
}

.bubble:nth-of-type(3) {
  left: 70%;
  top: 20%;
  animation-delay: -3000ms;
}

.bubble:nth-of-type(4) {
  left: 20%;
  top: 10%;
  animation-delay: -4000ms;
}

.bubble:nth-of-type(5) {
  left: 30%;
  top: 75%;
  position: fixed;
  animation-delay: -0ms;
}

.bubble:nth-of-type(6) {
  left: 45%;
  top: 5%;
  animation-delay: -1000ms;
}


.bubble:nth-of-type(7) {
  left: 35%;
  top: 20%;
  position: fixed;
  animation-delay: -2000ms;
}

.bubble:nth-of-type(8) {
  left: 15%;
  top: 40%;
  position: fixed;
  animation-delay: -3000ms;
}

.bubble:nth-of-type(9) {
  left: 45%;
  top: 45%;
  position: fixed;
  animation-delay: -4000ms;
}

.bubble:nth-of-type(10) {
  left: 81%;
  top: 65%;
  position: fixed;
  animation-delay: -0ms;
}

.bubble:nth-of-type(11) {
  left: 46%;
  top: 26%;
  animation-delay: -1000ms;
}
.bubble:nth-of-type(12) {
  right: 6%;
  top: 36%;
  animation-delay: -1000ms;
}
.bubble:nth-of-type(13) {
  right: 16%;
  top: 66%;
  animation-delay: -1000ms;
}
.bubble:nth-of-type(14) {
  right: 16%;
  top: 26%;
  animation-delay: -1000ms;
}
.bubble:nth-of-type(15) {
  right: 40%;
  top: 35%;
  animation-delay: -1000ms;
}
.bubble:nth-of-type(16) {
  right: 10%;
  top: 60%;
  animation-delay: -1000ms;
}
.bubble:nth-of-type(17) {
  right: 5%;
  top: 90%;
  animation-delay: -1000ms;
}


.octopus {
  position: fixed;
  background: rebeccapurple;
  bottom: 10%;
  left: 90%;
  margin-left: -25vmin;
  margin-top: -25vmin;
  width: 30vmin;
  height: 30vmin;
  border-radius: 50%;
  z-index: 2;
}

.eye {
  top: 33%;
  left: 42.5%;
  width: 15%;
  height: 20%;
  background: #30c2c7;
  border-radius: 50%;
}

.eye::after {
  content: "";
  position: absolute;
  background: #fff;
  width: 20%;
  height: 20%;
  border-radius: 50%;
  left: 55%;
  top: 30%;
}

.left {
  margin-left: -25%;
}

.right {
  margin-left: 25%;
}

.mouth {
  border-radius: 50% / 0 0 100% 100%;
  width: 25%;
  height: 10%;
  top: 60%;
  left: 37.5%;
  box-shadow: 0 4px 0 4px #000000;
}

.leg {
  background: inherit;
  width: 25%;
  height: 40%;
  border-radius: 50%;
  animation: leg-anim 1s linear infinite alternate;
}

.leg--1 {
  left: 0%;
  top: 70%;
  transform: rotate(12deg);
  animation-delay: -250ms;
}

.leg--2 {
  left: 25%;
  top: 80%;
}

.leg--3 {
  left: 50%;
  top: 80%;
  animation-delay: -80ms;
}

.leg--4 {
  left: 75%;
  top: 70%;
  transform: rotate(-12deg);
  animation-delay: -250ms;
}

@keyframes leg-anim {
  50% { transform: translateY(-8%); }
}