body{
  margin: 0;
}

#pmbLoader{
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  background: linear-gradient(283.23deg, #0D140F -16.64%, #2C4737 123.51%);
}

#pmbLoader svg{
  width: 300px;
  height: 300px;
}

svg *{
  transform-box: fill-box;
  transform-origin: center;
}

.st0, .st3{
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.st3{ animation-name: clockwise; }
.st0{ animation-name: counterClockwise; }

@keyframes clockwise {
  to{ transform: rotate(360deg); }
}

@keyframes counterClockwise {
  to{ transform: rotate(-360deg); }
}

.bubble{
  animation-name: bubbleUp;
  animation-duration: 3s;
  animation-timing-function:linear;
  animation-iteration-count: infinite;
  animation-fill-mode:none;
  transform: scale(0) translateY(0);
  opacity: 1;
  transform-box: fill-box;
  transform-origin: center;
}

.bubble:nth-of-type(1){ animation-delay: 0.5s;}
.bubble:nth-of-type(2){ animation-delay: 1.0s;}
.bubble:nth-of-type(3){ animation-delay: 1.24s;}
.bubble:nth-of-type(4){ animation-delay: 2.0s;}
.bubble:nth-of-type(5){ animation-delay: 2.5s;}
.bubble:nth-of-type(6){ animation-delay: 3.33s;}
.bubble:nth-of-type(7){ animation-delay: 3.78s;}
.bubble:nth-of-type(8){ animation-delay: 4.33s;}
.bubble:nth-of-type(9){ animation-delay: 4.55s;}

@keyframes bubbleUp {
  to{
    transform: scale(1.2) translateY(-200px);
    opacity: 0;
  }
}