@-webkit-keyframes "bubble" {
  0% {
    transform: rotate(0deg) translate(-50%, -50%);
  }
  100% {
    transform: rotate(360deg) translate(-50%, -50%);
  }
}
@keyframes "bubble" {
  0% {
    transform: rotate(0deg) translate(-50%, -50%);
  }
  100% {
    transform: rotate(360deg) translate(-50%, -50%);
  }
}
@media screen and (max-width: 1023px) {
  .backgroundCircles {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
}
.backgroundCircles span {
  display: block;
  position: absolute;
  border-radius: 100%;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: bubble;
  animation-name: bubble;
}
@media screen and (max-width: 1023px) {
  .backgroundCircles span {
    height: 90px;
    width: 90px;
  }
}
@media screen and (min-width: 1024px) {
  .backgroundCircles span {
    height: 220px;
    width: 220px;
    left: 50%;
  }
}
.backgroundCircles span.blue {
  background-color: #70e7fd;
  transform-origin: 5% 5%;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
}
@media screen and (max-width: 1023px) {
  .backgroundCircles span.blue {
    left: 15%;
    bottom: -70px;
  }
}
@media screen and (min-width: 1024px) {
  .backgroundCircles span.blue {
    margin-left: -450px;
    top: 460px;
  }
}
.backgroundCircles span.red {
  background-color: #ff162c;
  transform-origin: 3% 3%;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}
@media screen and (max-width: 1023px) {
  .backgroundCircles span.red {
    top: 30%;
    right: 3%;
  }
}
@media screen and (min-width: 1024px) {
  .backgroundCircles span.red {
    margin-left: 480px;
    top: 0;
  }
}
.backgroundCircles span.yellow {
  background-color: #ffd200;
  transform-origin: 4% 4%;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
}
@media screen and (max-width: 1023px) {
  .backgroundCircles span.yellow {
    bottom: 15%;
    right: -70px;
  }
}
@media screen and (min-width: 1024px) {
  .backgroundCircles span.yellow {
    margin-left: 480px;
    top: 550px;
  }
}