estilos2.css

body {
    height: 100vh;
     background: linear-gradient(90deg,#0fa0ba,#ebeef0);
  
  }
  audio{
    position:absolute;
    top: 65%;
    left: 41%;

    
  }
  h1{
    font-family: "Century Gothic";
    font-size: 60px;
    text-align: center;
    
  }
 
  a{
    font-family: "Century Gothic";
    font-size: 30px;
    
  
    color:rgb(0, 0, 0);
    

    
  }
  a:link, a:visited, a:active {
    text-decoration:none;
}
  
  .slider-thumb:before {
      position: absolute;
      content: "";
      left: 32%;
      top: 25%;
      width: 520px;
      height: 450px;
      background: linear-gradient(90deg,#c8d7da,#1c7bba);
      border-radius: 62% 47% 82% 35% / 45% 45% 80% 66%;
      will-change: border-radius, transform, opacity;
      animation: sliderShape 5s linear infinite;
      display: block;
      z-index: -1;
      -webkit-animation: sliderShape 5s 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);
    }
  }