.bubble {
    display: block;
    border-radius: 100%;
    opacity: 0.8;
    position: absolute;
  }
  .bubble:nth-child(1) {
    background: radial-gradient(ellipse at center, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 8px;
    height: 8px;
    left: 84vw;
    bottom: 98vh;
    -webkit-animation: move1 infinite 12s;
            animation: move1 infinite 12s;
  }
  @-webkit-keyframes move1 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 68vh;
      transform: translate(-5px, 0);
      opacity: 0;
    }
  }
  @keyframes move1 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 68vh;
      transform: translate(-5px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(2) {
    background: radial-gradient(ellipse at top right, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 11px;
    height: 11px;
    left: 65vw;
    bottom: 69vh;
    -webkit-animation: move2 infinite 4s;
            animation: move2 infinite 4s;
  }
  @-webkit-keyframes move2 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 77vh;
      transform: translate(-66px, 0);
      opacity: 0;
    }
  }
  @keyframes move2 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 77vh;
      transform: translate(-66px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(3) {
    background: radial-gradient(ellipse at center, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 8px;
    height: 8px;
    left: 65vw;
    bottom: 92vh;
    -webkit-animation: move3 infinite 13s;
            animation: move3 infinite 13s;
  }
  @-webkit-keyframes move3 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 8vh;
      transform: translate(147px, 0);
      opacity: 0;
    }
  }
  @keyframes move3 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 8vh;
      transform: translate(147px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(4) {
    background: radial-gradient(ellipse at top right, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 19px;
    height: 19px;
    left: 54vw;
    bottom: 23vh;
    -webkit-animation: move4 infinite 8s;
            animation: move4 infinite 8s;
  }
  @-webkit-keyframes move4 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 79vh;
      transform: translate(181px, 0);
      opacity: 0;
    }
  }
  @keyframes move4 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 79vh;
      transform: translate(181px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(5) {
    background: radial-gradient(ellipse at center, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 87px;
    height: 87px;
    left: 95vw;
    bottom: 87vh;
    -webkit-animation: move5 infinite 6s;
            animation: move5 infinite 6s;
  }
  @-webkit-keyframes move5 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 77vh;
      transform: translate(-46px, 0);
      opacity: 0;
    }
  }
  @keyframes move5 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 77vh;
      transform: translate(-46px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(6) {
    background: radial-gradient(ellipse at top right, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 45px;
    height: 45px;
    left: 44vw;
    bottom: 33vh;
    -webkit-animation: move6 infinite 3s;
            animation: move6 infinite 3s;
  }
  @-webkit-keyframes move6 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 97vh;
      transform: translate(-74px, 0);
      opacity: 0;
    }
  }
  @keyframes move6 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 97vh;
      transform: translate(-74px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(7) {
    background: radial-gradient(ellipse at center, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 28px;
    height: 28px;
    left: 3vw;
    bottom: 59vh;
    -webkit-animation: move7 infinite 6s;
            animation: move7 infinite 6s;
  }
  @-webkit-keyframes move7 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 19vh;
      transform: translate(126px, 0);
      opacity: 0;
    }
  }
  @keyframes move7 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 19vh;
      transform: translate(126px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(8) {
    background: radial-gradient(ellipse at top right, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 51px;
    height: 51px;
    left: 93vw;
    bottom: 56vh;
    -webkit-animation: move8 infinite 12s;
            animation: move8 infinite 12s;
  }
  @-webkit-keyframes move8 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 67vh;
      transform: translate(79px, 0);
      opacity: 0;
    }
  }
  @keyframes move8 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 67vh;
      transform: translate(79px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(9) {
    background: radial-gradient(ellipse at center, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 76px;
    height: 76px;
    left: 45vw;
    bottom: 9vh;
    -webkit-animation: move9 infinite 12s;
            animation: move9 infinite 12s;
  }
  @-webkit-keyframes move9 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 76vh;
      transform: translate(179px, 0);
      opacity: 0;
    }
  }
  @keyframes move9 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 76vh;
      transform: translate(179px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(10) {
    background: radial-gradient(ellipse at top right, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 37px;
    height: 37px;
    left: 49vw;
    bottom: 49vh;
    -webkit-animation: move10 infinite 4s;
            animation: move10 infinite 4s;
  }
  @-webkit-keyframes move10 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 6vh;
      transform: translate(160px, 0);
      opacity: 0;
    }
  }
  @keyframes move10 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 6vh;
      transform: translate(160px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(11) {
    background: radial-gradient(ellipse at center, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 55px;
    height: 55px;
    left: 100vw;
    bottom: 40vh;
    -webkit-animation: move11 infinite 5s;
            animation: move11 infinite 5s;
  }
  @-webkit-keyframes move11 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 94vh;
      transform: translate(122px, 0);
      opacity: 0;
    }
  }
  @keyframes move11 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 94vh;
      transform: translate(122px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(12) {
    background: radial-gradient(ellipse at top right, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 40px;
    height: 40px;
    left: 90vw;
    bottom: 27vh;
    -webkit-animation: move12 infinite 12s;
            animation: move12 infinite 12s;
  }
  @-webkit-keyframes move12 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 52vh;
      transform: translate(-37px, 0);
      opacity: 0;
    }
  }
  @keyframes move12 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 52vh;
      transform: translate(-37px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(13) {
    background: radial-gradient(ellipse at center, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 18px;
    height: 18px;
    left: 1vw;
    bottom: 51vh;
    -webkit-animation: move13 infinite 13s;
            animation: move13 infinite 13s;
  }
  @-webkit-keyframes move13 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 57vh;
      transform: translate(-89px, 0);
      opacity: 0;
    }
  }
  @keyframes move13 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 57vh;
      transform: translate(-89px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(14) {
    background: radial-gradient(ellipse at top right, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 64px;
    height: 64px;
    left: 78vw;
    bottom: 49vh;
    -webkit-animation: move14 infinite 8s;
            animation: move14 infinite 8s;
  }
  @-webkit-keyframes move14 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 34vh;
      transform: translate(-34px, 0);
      opacity: 0;
    }
  }
  @keyframes move14 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 34vh;
      transform: translate(-34px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(15) {
    background: radial-gradient(ellipse at center, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 50px;
    height: 50px;
    left: 26vw;
    bottom: 8vh;
    -webkit-animation: move15 infinite 4s;
            animation: move15 infinite 4s;
  }
  @-webkit-keyframes move15 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 6vh;
      transform: translate(-99px, 0);
      opacity: 0;
    }
  }
  @keyframes move15 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 6vh;
      transform: translate(-99px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(16) {
    background: radial-gradient(ellipse at top right, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 92px;
    height: 92px;
    left: 79vw;
    bottom: 27vh;
    -webkit-animation: move16 infinite 14s;
            animation: move16 infinite 14s;
  }
  @-webkit-keyframes move16 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 54vh;
      transform: translate(-99px, 0);
      opacity: 0;
    }
  }
  @keyframes move16 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 54vh;
      transform: translate(-99px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(17) {
    background: radial-gradient(ellipse at center, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 25px;
    height: 25px;
    left: 58vw;
    bottom: 66vh;
    -webkit-animation: move17 infinite 10s;
            animation: move17 infinite 10s;
  }
  @-webkit-keyframes move17 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 51vh;
      transform: translate(51px, 0);
      opacity: 0;
    }
  }
  @keyframes move17 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 51vh;
      transform: translate(51px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(18) {
    background: radial-gradient(ellipse at top right, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 97px;
    height: 97px;
    left: 67vw;
    bottom: 51vh;
    -webkit-animation: move18 infinite 4s;
            animation: move18 infinite 4s;
  }
  @-webkit-keyframes move18 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 90vh;
      transform: translate(-8px, 0);
      opacity: 0;
    }
  }
  @keyframes move18 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 90vh;
      transform: translate(-8px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(19) {
    background: radial-gradient(ellipse at center, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 95px;
    height: 95px;
    left: 73vw;
    bottom: 53vh;
    -webkit-animation: move19 infinite 10s;
            animation: move19 infinite 10s;
  }
  @-webkit-keyframes move19 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 28vh;
      transform: translate(-54px, 0);
      opacity: 0;
    }
  }
  @keyframes move19 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 28vh;
      transform: translate(-54px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(20) {
    background: radial-gradient(ellipse at top right, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 94px;
    height: 94px;
    left: 17vw;
    bottom: 98vh;
    -webkit-animation: move20 infinite 7s;
            animation: move20 infinite 7s;
  }
  @-webkit-keyframes move20 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 16vh;
      transform: translate(161px, 0);
      opacity: 0;
    }
  }
  @keyframes move20 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 16vh;
      transform: translate(161px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(21) {
    background: radial-gradient(ellipse at center, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 38px;
    height: 38px;
    left: 42vw;
    bottom: 65vh;
    -webkit-animation: move21 infinite 8s;
            animation: move21 infinite 8s;
  }
  @-webkit-keyframes move21 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 100vh;
      transform: translate(-55px, 0);
      opacity: 0;
    }
  }
  @keyframes move21 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 100vh;
      transform: translate(-55px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(22) {
    background: radial-gradient(ellipse at top right, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 51px;
    height: 51px;
    left: 19vw;
    bottom: 53vh;
    -webkit-animation: move22 infinite 10s;
            animation: move22 infinite 10s;
  }
  @-webkit-keyframes move22 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 33vh;
      transform: translate(23px, 0);
      opacity: 0;
    }
  }
  @keyframes move22 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 33vh;
      transform: translate(23px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(23) {
    background: radial-gradient(ellipse at center, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 32px;
    height: 32px;
    left: 13vw;
    bottom: 3vh;
    -webkit-animation: move23 infinite 14s;
            animation: move23 infinite 14s;
  }
  @-webkit-keyframes move23 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 57vh;
      transform: translate(173px, 0);
      opacity: 0;
    }
  }
  @keyframes move23 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 57vh;
      transform: translate(173px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(24) {
    background: radial-gradient(ellipse at top right, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 99px;
    height: 99px;
    left: 22vw;
    bottom: 13vh;
    -webkit-animation: move24 infinite 10s;
            animation: move24 infinite 10s;
  }
  @-webkit-keyframes move24 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 59vh;
      transform: translate(144px, 0);
      opacity: 0;
    }
  }
  @keyframes move24 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 59vh;
      transform: translate(144px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(25) {
    background: radial-gradient(ellipse at center, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 76px;
    height: 76px;
    left: 12vw;
    bottom: 43vh;
    -webkit-animation: move25 infinite 8s;
            animation: move25 infinite 8s;
  }
  @-webkit-keyframes move25 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 50vh;
      transform: translate(94px, 0);
      opacity: 0;
    }
  }
  @keyframes move25 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 50vh;
      transform: translate(94px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(26) {
    background: radial-gradient(ellipse at top right, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 90px;
    height: 90px;
    left: 88vw;
    bottom: 85vh;
    -webkit-animation: move26 infinite 13s;
            animation: move26 infinite 13s;
  }
  @-webkit-keyframes move26 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 42vh;
      transform: translate(127px, 0);
      opacity: 0;
    }
  }
  @keyframes move26 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 42vh;
      transform: translate(127px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(27) {
    background: radial-gradient(ellipse at center, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 58px;
    height: 58px;
    left: 40vw;
    bottom: 68vh;
    -webkit-animation: move27 infinite 15s;
            animation: move27 infinite 15s;
  }
  @-webkit-keyframes move27 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 60vh;
      transform: translate(176px, 0);
      opacity: 0;
    }
  }
  @keyframes move27 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 60vh;
      transform: translate(176px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(28) {
    background: radial-gradient(ellipse at top right, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 19px;
    height: 19px;
    left: 20vw;
    bottom: 82vh;
    -webkit-animation: move28 infinite 11s;
            animation: move28 infinite 11s;
  }
  @-webkit-keyframes move28 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 77vh;
      transform: translate(160px, 0);
      opacity: 0;
    }
  }
  @keyframes move28 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 77vh;
      transform: translate(160px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(29) {
    background: radial-gradient(ellipse at center, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 93px;
    height: 93px;
    left: 17vw;
    bottom: 57vh;
    -webkit-animation: move29 infinite 10s;
            animation: move29 infinite 10s;
  }
  @-webkit-keyframes move29 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 30vh;
      transform: translate(168px, 0);
      opacity: 0;
    }
  }
  @keyframes move29 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 30vh;
      transform: translate(168px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(30) {
    background: radial-gradient(ellipse at top right, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 79px;
    height: 79px;
    left: 59vw;
    bottom: 82vh;
    -webkit-animation: move30 infinite 6s;
            animation: move30 infinite 6s;
  }
  @-webkit-keyframes move30 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 15vh;
      transform: translate(139px, 0);
      opacity: 0;
    }
  }
  @keyframes move30 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 15vh;
      transform: translate(139px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(31) {
    background: radial-gradient(ellipse at center, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 51px;
    height: 51px;
    left: 55vw;
    bottom: 34vh;
    -webkit-animation: move31 infinite 5s;
            animation: move31 infinite 5s;
  }
  @-webkit-keyframes move31 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 63vh;
      transform: translate(129px, 0);
      opacity: 0;
    }
  }
  @keyframes move31 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 63vh;
      transform: translate(129px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(32) {
    background: radial-gradient(ellipse at top right, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 20px;
    height: 20px;
    left: 49vw;
    bottom: 38vh;
    -webkit-animation: move32 infinite 5s;
            animation: move32 infinite 5s;
  }
  @-webkit-keyframes move32 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 97vh;
      transform: translate(-10px, 0);
      opacity: 0;
    }
  }
  @keyframes move32 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 97vh;
      transform: translate(-10px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(33) {
    background: radial-gradient(ellipse at center, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 24px;
    height: 24px;
    left: 83vw;
    bottom: 5vh;
    -webkit-animation: move33 infinite 8s;
            animation: move33 infinite 8s;
  }
  @-webkit-keyframes move33 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 92vh;
      transform: translate(110px, 0);
      opacity: 0;
    }
  }
  @keyframes move33 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 92vh;
      transform: translate(110px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(34) {
    background: radial-gradient(ellipse at top right, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 72px;
    height: 72px;
    left: 6vw;
    bottom: 24vh;
    -webkit-animation: move34 infinite 12s;
            animation: move34 infinite 12s;
  }
  @-webkit-keyframes move34 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 61vh;
      transform: translate(124px, 0);
      opacity: 0;
    }
  }
  @keyframes move34 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 61vh;
      transform: translate(124px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(35) {
    background: radial-gradient(ellipse at center, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 63px;
    height: 63px;
    left: 62vw;
    bottom: 23vh;
    -webkit-animation: move35 infinite 8s;
            animation: move35 infinite 8s;
  }
  @-webkit-keyframes move35 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 63vh;
      transform: translate(90px, 0);
      opacity: 0;
    }
  }
  @keyframes move35 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 63vh;
      transform: translate(90px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(36) {
    background: radial-gradient(ellipse at top right, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 89px;
    height: 89px;
    left: 76vw;
    bottom: 22vh;
    -webkit-animation: move36 infinite 6s;
            animation: move36 infinite 6s;
  }
  @-webkit-keyframes move36 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 87vh;
      transform: translate(-1px, 0);
      opacity: 0;
    }
  }
  @keyframes move36 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 87vh;
      transform: translate(-1px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(37) {
    background: radial-gradient(ellipse at center, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 96px;
    height: 96px;
    left: 9vw;
    bottom: 65vh;
    -webkit-animation: move37 infinite 9s;
            animation: move37 infinite 9s;
  }
  @-webkit-keyframes move37 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 99vh;
      transform: translate(89px, 0);
      opacity: 0;
    }
  }
  @keyframes move37 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 99vh;
      transform: translate(89px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(38) {
    background: radial-gradient(ellipse at top right, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 75px;
    height: 75px;
    left: 1vw;
    bottom: 100vh;
    -webkit-animation: move38 infinite 9s;
            animation: move38 infinite 9s;
  }
  @-webkit-keyframes move38 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 98vh;
      transform: translate(-96px, 0);
      opacity: 0;
    }
  }
  @keyframes move38 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 98vh;
      transform: translate(-96px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(39) {
    background: radial-gradient(ellipse at center, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 12px;
    height: 12px;
    left: 7vw;
    bottom: 70vh;
    -webkit-animation: move39 infinite 3s;
            animation: move39 infinite 3s;
  }
  @-webkit-keyframes move39 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 8vh;
      transform: translate(-44px, 0);
      opacity: 0;
    }
  }
  @keyframes move39 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 8vh;
      transform: translate(-44px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(40) {
    background: radial-gradient(ellipse at top right, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 95px;
    height: 95px;
    left: 31vw;
    bottom: 87vh;
    -webkit-animation: move40 infinite 3s;
            animation: move40 infinite 3s;
  }
  @-webkit-keyframes move40 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 98vh;
      transform: translate(-98px, 0);
      opacity: 0;
    }
  }
  @keyframes move40 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 98vh;
      transform: translate(-98px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(41) {
    background: radial-gradient(ellipse at center, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 17px;
    height: 17px;
    left: 37vw;
    bottom: 63vh;
    -webkit-animation: move41 infinite 13s;
            animation: move41 infinite 13s;
  }
  @-webkit-keyframes move41 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 83vh;
      transform: translate(28px, 0);
      opacity: 0;
    }
  }
  @keyframes move41 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 83vh;
      transform: translate(28px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(42) {
    background: radial-gradient(ellipse at top right, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 80px;
    height: 80px;
    left: 32vw;
    bottom: 58vh;
    -webkit-animation: move42 infinite 13s;
            animation: move42 infinite 13s;
  }
  @-webkit-keyframes move42 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 37vh;
      transform: translate(111px, 0);
      opacity: 0;
    }
  }
  @keyframes move42 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 37vh;
      transform: translate(111px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(43) {
    background: radial-gradient(ellipse at center, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 23px;
    height: 23px;
    left: 4vw;
    bottom: 68vh;
    -webkit-animation: move43 infinite 8s;
            animation: move43 infinite 8s;
  }
  @-webkit-keyframes move43 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 75vh;
      transform: translate(21px, 0);
      opacity: 0;
    }
  }
  @keyframes move43 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 75vh;
      transform: translate(21px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(44) {
    background: radial-gradient(ellipse at top right, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 48px;
    height: 48px;
    left: 64vw;
    bottom: 48vh;
    -webkit-animation: move44 infinite 11s;
            animation: move44 infinite 11s;
  }
  @-webkit-keyframes move44 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 79vh;
      transform: translate(153px, 0);
      opacity: 0;
    }
  }
  @keyframes move44 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 79vh;
      transform: translate(153px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(45) {
    background: radial-gradient(ellipse at center, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 34px;
    height: 34px;
    left: 60vw;
    bottom: 81vh;
    -webkit-animation: move45 infinite 8s;
            animation: move45 infinite 8s;
  }
  @-webkit-keyframes move45 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 12vh;
      transform: translate(129px, 0);
      opacity: 0;
    }
  }
  @keyframes move45 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 12vh;
      transform: translate(129px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(46) {
    background: radial-gradient(ellipse at top right, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 86px;
    height: 86px;
    left: 91vw;
    bottom: 35vh;
    -webkit-animation: move46 infinite 15s;
            animation: move46 infinite 15s;
  }
  @-webkit-keyframes move46 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 72vh;
      transform: translate(17px, 0);
      opacity: 0;
    }
  }
  @keyframes move46 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 72vh;
      transform: translate(17px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(47) {
    background: radial-gradient(ellipse at center, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 80px;
    height: 80px;
    left: 100vw;
    bottom: 98vh;
    -webkit-animation: move47 infinite 6s;
            animation: move47 infinite 6s;
  }
  @-webkit-keyframes move47 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 96vh;
      transform: translate(76px, 0);
      opacity: 0;
    }
  }
  @keyframes move47 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 96vh;
      transform: translate(76px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(48) {
    background: radial-gradient(ellipse at top right, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 56px;
    height: 56px;
    left: 83vw;
    bottom: 52vh;
    -webkit-animation: move48 infinite 11s;
            animation: move48 infinite 11s;
  }
  @-webkit-keyframes move48 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 66vh;
      transform: translate(99px, 0);
      opacity: 0;
    }
  }
  @keyframes move48 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 66vh;
      transform: translate(99px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(49) {
    background: radial-gradient(ellipse at center, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 100px;
    height: 100px;
    left: 48vw;
    bottom: 8vh;
    -webkit-animation: move49 infinite 12s;
            animation: move49 infinite 12s;
  }
  @-webkit-keyframes move49 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 37vh;
      transform: translate(-20px, 0);
      opacity: 0;
    }
  }
  @keyframes move49 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 37vh;
      transform: translate(-20px, 0);
      opacity: 0;
    }
  }
  .bubble:nth-child(50) {
    background: radial-gradient(ellipse at top right, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
    width: 43px;
    height: 43px;
    left: 73vw;
    bottom: 47vh;
    -webkit-animation: move50 infinite 3s;
            animation: move50 infinite 3s;
  }
  @-webkit-keyframes move50 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 54vh;
      transform: translate(-15px, 0);
      opacity: 0;
    }
  }
  @keyframes move50 {
    0% {
      bottom: -100px;
    }
    100% {
      bottom: 54vh;
      transform: translate(-15px, 0);
      opacity: 0;
    }
  }