#container{
    margin: 0px auto;
    max-width:960px;
    text-align: center;
    font-family: "imagination", arial, sans-serif;
    font-size: 25px;
    overflow:hidden;
  }
  #container::before {
    position: absolute;
    content: "";
    margin: -60px 0px 0px -40px;
    width: 110%;
    max-width: 1080px;
    height: 100vh;
    background: #ffffff;
    border-radius: 62% 47% 82% 35% / 45% 45% 80% 66%;
    will-change: border-radius, transform, opacity;
    animation: sliderShape 10s linear infinite;
    display: block;
    z-index: -1;
    -webkit-animation: sliderShape 20s linear infinite;
  }
  
  #footercontainer{
    margin: 50px auto;
    max-width: 960px;
    min-height: 200px;
    text-align: center;
    font-family: "imagination", arial, sans-serif;
    font-size: 25px;
    opacity: 0.7;
    overflow:hidden;
  }

  #footercontainer::before {
    position: absolute;
    content: "";
    margin: -70px 0px 0px -40px;
    width: 110%;
    max-width: 960px;
    height: 500px;
    background: #ffffff;
    border: 1px solid #fff;
    border-radius: 62% 47% 82% 35% / 45% 45% 80% 66%;
    will-change: border-radius, transform, opacity;
    animation: sliderShape 10s linear infinite;
    display: block;
    z-index: -1;
    -webkit-animation: sliderShape 20s linear infinite;
  }
  @keyframes sliderShape{
    0%,100%{
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
      transform: translate3d(0,0,0) rotateZ(0.01deg);
    }
    34%{
        border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
      transform:  translate3d(0,5px,0) rotateZ(0.01deg);
    }
    50%{
      transform: translate3d(0,0,0) rotateZ(0.01deg);
    }
    67%{
      border-radius: 100% 60% 60% 100% / 100% 100% 60% 60% ;
      transform: translate3d(0,-3px,0) rotateZ(0.01deg);
    }
  }