Animated CSS Blobs as Background Not Responsive

Question

I have some blobs that are animated as a background for my webpage but the problem is that they are overflowing on the page causing my content to not be responsive. I have tried adding position: relative and position: absolute as well as overflow:hidden but nothing seems to work. Here is the code I have and I appreciate any help I can receive!

.shapes {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.shape:nth-of-type(1) {
  width: 637.96px;
  height: 539.24px;
  position: absolute;
  left: -5%;
  top: 20%;
  background: #befae1;
  animation: wave 8s ease-in-out infinite;
}

.shape:nth-of-type(2) {
  width: 700px;
  height: 700px;
  background: #f0f0ff;
  position: absolute;
  top: 80%;
  left: 0%;
  animation: wave 5s ease-in-out infinite;
}

.shape:nth-of-type(3) {
  width: 500px;
  height: 500px;
  background: #feee85;
  position: absolute;
  top: 35%;
  right: 15%;
  animation: wave 12s ease-in-out infinite;
}

.shape:nth-of-type(4) {
  width: 450px;
  height: 350px;
  background: #facdcd;
  position: absolute;
  top: 75%;
  right: -5%;
  animation: wave 6s ease-in-out infinite;
}

.shape:nth-of-type(5) {
  width: 350px;
  height: 350px;
  background: #bfabff;
  position: absolute;
  top: 115%;
  right: 25%;
  animation: wave 15s ease-in-out infinite;
}

.shape:nth-of-type(6) {
  width: 900px;
  height: 900px;
  background: #00c8af;
  position: absolute;
  top: 230%;
  left: -25%;
  transform: rotate(90deg);
  animation: wave 15s ease-in-out infinite;
}

.shape:nth-of-type(7) {
  width: 700px;
  height: 700px;
  background: #facdcd;
  position: absolute;
  top: 230%;
  left: 25%;
  animation: wave 5s ease-in-out infinite;
}

.shape:nth-of-type(8) {
  width: 450px;
  height: 350px;
  background: #fab4ff;
  position: absolute;
  top: 230%;
  left: 45%;
  animation: wave 6s ease-in-out infinite;
}

.shape:nth-of-type(9) {
  width: 637.96px;
  height: 539.24px;
  position: absolute;
  top: 255%;
  right: -5%;
  background: #befae1;
  animation: wave 8s ease-in-out infinite;
}

.shape:nth-of-type(10) {
  width: 350px;
  height: 350px;
  background: #bfabff;
  position: absolute;
  top: 300%;
  right: 15%;
  animation: wave 15s ease-in-out infinite;
}

@keyframes wave {
  0%,
  100% {
    border-radius: 66% 34% 37% 63% / 57% 31% 69% 43%;
  }
  50% {
    border-radius: 26% 74% 51% 49% / 22% 53% 47% 78%;
  }
}

<div class="shapes">
  <div class="shape"></div>
  <div class="shape"></div>
  <div class="shape"></div>
  <div class="shape"></div>
  <div class="shape"></div>
  <div class="shape"></div>
  <div class="shape"></div>
  <div class="shape"></div>
  <div class="shape"></div>
  <div class="shape"></div>
</div>