.bubbles_one {
  position: sticky;
  width: 100%;
  height: 300vh;
  overflow: visible;
  background-color: #36506b;
  z-index: -10;
}

.bubbles_two {
  position: fixed;
  top: 50%;
  left: calc(50vw + 30px);
  transform: translate(-50%, -50%);
  border-radius: 100%;
  pointer-events: none;
  background: #e8e8e3;
  display: block; 
  overflow: hidden;
  height: 0%;
  width: 0%;
}

@keyframes float {
  to {
    transform: translateY(-100vh);
  }
}

.bubble {
	position: fixed;
	border-radius: 50%;
	opacity: 0.7;
	transition: background-color 0.3s ease-in-out;
	will-change: transform;
  z-index: -5;
  top: 50%;
}